如何在Chart.js中实现带连线的散点图

核心问题解答 #

options.elements.lines配置可以作用于Scatter类型图表，但Scatter图表默认不会渲染线条，必须配合数据集的showLine: true配置才能触发线条渲染。

实现步骤 #

1. 开启数据集连线
   在每个需要连线的散点数据集里添加showLine: true，同时可设置线条的颜色、宽度等基础样式：

   datasets: [
       {
           label: '数据集1',
           data: [{x:1,y:2}, {x:2,y:3}, {x:3,y:1}],
           backgroundColor: '#ff4444',
           showLine: true, // 关键：开启该数据集的线条渲染
           borderColor: '#ff4444',
           borderWidth: 2
       },
       // 第二组数据集同理配置
   ]
   

2. 用options.elements.lines精细化配置线条
   当数据集开启showLine后，options.elements.lines的配置就会生效，比如设置线条平滑度、是否填充等：

   options: {
       elements: {
           lines: {
               tension: 0.2, // 0为纯直线，值越大线条越平滑
               fill: false, // 关闭线下区域填充
               borderCapStyle: 'round' // 线条端点样式
           }
       }
   }
   

实现两组数据点的关联连线（匹配示例图需求） #

如果需要把两组数据中同X值的点互相连接，需要额外构造一个专门用于连线的数据集：

datasets: [
    // 原有的两个散点数据集...
    {
        label: '关联连线',
        data: [
            {x:1,y:2}, {x:1,y:4}, // 第一组X=1的两个点
            {x:2,y:3}, {x:2,y:2}, // 第二组X=2的两个点
            {x:3,y:1}, {x:3,y:5}  // 第三组X=3的两个点
        ],
        showLine: true,
        borderColor: '#999999',
        borderWidth: 1,
        pointRadius: 0, // 隐藏连线数据集的点
        borderDash: [3,3] // 设置为虚线样式
    }
]

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