能否用Chart.js实现带右侧分类Y轴的多散点图？

能否用Chart.js实现？ #

可以实现，无需堆叠多个散点图组件，通过配置双Y轴+多数据集就能在单个Chart实例里达成需求。

具体实现方式 #

核心配置思路 #

1. 双Y轴设置：在options.scales里定义两个Y轴：
   • 左侧Y轴（y）：对应各子图的数值刻度，用于展示散点的实际数值
   • 右侧Y轴（y1）：设为分类轴，刻度值对应子图的分类编号，用来区分不同子图
2. 数据集定义：每个子图的散点数据单独作为一个数据集，绑定左侧Y轴，同时可以通过颜色、点样式区分不同子图，也可以把数据集的y值映射到右侧分类轴的对应刻度，让散点落在对应子图的垂直区间内。

示例代码片段 #

const ctx = document.getElementById('multiScatterChart').getContext('2d');
new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
      {
        label: '子图1',
        data: [{x: 1620000000000, y: 4.2}, {x: 1620086400000, y: 5.7}],
        yAxisID: 'y',
        backgroundColor: '#ff6384',
        pointRadius: 6
      },
      {
        label: '子图2',
        data: [{x: 1620000000000, y: 2.1}, {x: 1620086400000, y: 3.9}],
        yAxisID: 'y',
        backgroundColor: '#36a2eb',
        pointRadius: 6
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {unit: 'day'},
        title: {display: true, text: '时间戳'}
      },
      y: {
        position: 'left',
        title: {display: true, text: '子图数值'}
      },
      y1: {
        position: 'right',
        type: 'category',
        labels: ['1', '2'],
        title: {display: true, text: '子图分类'},
        grid: {drawOnChartArea: false} // 隐藏右侧轴网格，避免干扰
      }
    }
  }
});

如果需要让每个子图的散点固定在右侧分类对应的垂直区域，可以给每个数据集的y值设置为对应分类的偏移值，同时调整左侧轴的刻度范围，配合插件自定义绘制分隔线，模拟子图的视觉分隔。

社区实现参考 #

Chart.js的GitHub讨论区和Stack Overflow上有不少用户实现过类似效果，核心都是基于双轴配置+多数据集绑定的思路，你可以搜索“Chart.js multiple scatter plots single axis”找到相关案例。

替代库推荐 #

如果觉得Chart.js的配置太繁琐，可考虑这些工具：

• Plotly.js：原生支持多子图布局和双轴，配置更直观，适合快速搭建复杂散点图组合
• D3.js：完全自定义化，能实现任何你想要的图表布局，但需要编写更多底层代码

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