Chart.js 散点图（scatter）支持通过 borderDash 配置项绘制虚线，但需确保使用 2.x 或更高版本，并正确设置 showLine: true 和 lineTension: 0，否则虚线样式可能不生效。
chart.js 散点图（scatter）支持通过 `borderdash` 配置项绘制虚线，但需确保使用 2.x 或更高版本，并正确设置 `showline: true` 和 `linetension: 0`，否则虚线样式可能不生效。
在 Chart.js 中，散点图默认不连接数据点；若需显示趋势线或参考线（如移动平均线），可通过启用 showLine: true 将散点“连成线”，再配合 borderDash 实现虚线效果。关键点在于：borderDash 仅对线条生效，且在散点图中必须显式关闭贝塞尔曲线插值（即设 lineTension: 0），否则虚线段会被平滑拉伸而失效。
以下为完整可运行配置示例：
const ctx = document.getElementById('myChart').getContext('2d');
const myScatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: '24h moving average',
data: [
{ x: 0, y: 1.36 },
{ x: 2, y: 2.47 },
{ x: 5, y: 2.12 },
{ x: 8, y: 1.95 }
],
borderColor: '#ffffff',
backgroundColor: 'rgba(255, 255, 255, 0.1)',
showLine: true,
lineTension: 0, // ⚠️ 必须设为 0，否则 borderDash 无效
borderDash: [5, 5], // 虚线：5px 实线 + 5px 间隙
borderWidth: 2
}]
},
options: {
scales: {
x: {
type: 'linear',
title: { display: true, text: 'Time (seconds)' }
},
y: {
beginAtZero: false,
title: { display: true, text: 'Value' }
}
}
}
});
✅ 注意事项：
-
borderDash是数组格式[dashLength, gapLength]，支持更复杂模式如[10, 5, 2, 5]； - 若使用 Chart.js v3+，属性名保持不变（仍为
borderDash），但需确认已启用interaction.mode: 'nearest'等兼容配置； -
lineTension: 0是散点图虚线的关键——它禁用样条插值，使线条严格按数据点折线连接，虚线才能准确分段渲染； - 如需多条虚线（如上下置信区间），可添加多个 dataset，各自独立配置
borderDash。
综上，Chart.js 完全支持在散点图中绘制虚线，只需遵循“启用连线 + 关闭曲率 + 设置虚线”的三步原则，即可在保持等距时间轴（x 轴为 linear 类型）的同时，清晰呈现趋势或参考线。
