如何在ChartJS散点图中绘制虚线？borderDash属性不生效求助

可以实现。你当前代码里的borderDash不生效，是因为散点图开启showLine后，线条的样式渲染逻辑和折线图有差异，直接在数据集里设置borderDash不会被正确应用。以下是两种可行的解决方法：

方法一：通过元素配置设置虚线样式 #

在图表配置的options中，针对线条元素单独定义虚线参数，同时确保数据集里的fill设为false（避免填充区域干扰虚线显示）：

const chart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{ x: 0, y: 1.36 }, { x: 2, y: 2.47 }], // 修复y值语法错误：逗号改小数点
      borderColor: '#fff', // 修复引号缺失问题
      label: "24h moving average",
      showLine: true,
      fill: false, // 必须设置为false，否则虚线样式会被填充覆盖
      pointRadius: 3 // 可选，控制散点大小，不需要显示点就设为0
    }]
  },
  options: {
    elements: {
      line: {
        borderDash: [5, 5], // 设置虚线的线段长度与间隔
        borderDashOffset: 0 // 可选，调整虚线的偏移量
      }
    },
    scales: {
      x: {
        type: 'time', // 确保x轴为恒定时间刻度
        time: {
          unit: 'hour' // 根据需求调整时间单位
        }
      }
    }
  }
});

方法二：自定义插件绘制虚线 #

如果方法一无法满足需求，可通过ChartJS自定义插件，手动在绘制线条时应用虚线样式：

const dashLinePlugin = {
  afterDatasetDraw: (chart, args) => {
    const { ctx, datasetIndex } = args;
    const dataset = chart.data.datasets[datasetIndex];
    // 仅处理开启showLine且设置了borderDash的数据集
    if (!dataset.showLine || !dataset.borderDash?.length) return;

    ctx.save();
    ctx.setLineDash(dataset.borderDash);
    ctx.strokeStyle = dataset.borderColor;
    ctx.lineWidth = dataset.borderWidth || 2;

    // 遍历数据点，连接成虚线
    const points = chart.getDatasetMeta(datasetIndex).data;
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
      ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.stroke();
    ctx.restore();
  }
};

// 注册插件
Chart.register(dashLinePlugin);

// 初始化图表
const chart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{ x: 0, y: 1.36 }, { x: 2, y: 2.47 }],
      borderColor: '#fff',
      label: "24h moving average",
      showLine: true,
      borderDash: [5, 5],
      borderWidth: 2,
      pointRadius: 3
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'hour'
        }
      }
    }
  }
});

另外注意你原代码里的两处语法错误：

• y值的分隔符要用小数点（1,36改为1.36）
• borderColor的值需要加引号（#fff改为'#fff'或"#fff"）

内容的提问来源于stack exchange，提问作者Overdrivr