如何在ChartJS中控制Bump Chart折线的转向偏移位置？

你可以通过两种方式实现折线与图标点之间的偏移，无需额外第三方插件（或仅用自定义轻量插件）：

1. 双数据集拆分方案（用ChartJS原生功能） #

直接用两个数据集分别负责折线和图标点：

• 折线数据集：设置showLine: true、pointRadius: 0（隐藏点），手动给数据添加偏移量。比如原本的排名数据是[1,2,3,4]，改成[1.3,2.3,3.3,4.3]（偏移量根据图标大小调整），让折线的连接点比真实位置低（或高/左/右）。
• 图标点数据集：设置showLine: false、pointStyle: 'image'（你的图标），使用真实的原始数据，只显示图标点不画线。
  这样折线和图标点就会自动错开，匹配示例效果。

2. 自定义插件方案（更灵活） #

如果不想手动修改数据，写一个简单的ChartJS插件，在绘制前修改折线的连接点坐标：

// 注册自定义偏移插件
Chart.register({
  beforeDraw: (chart) => {
    const offset = 18; // 调整这个值控制偏移距离
    chart.data.datasets.forEach((dataset, idx) => {
      if (dataset.type === 'line' && dataset.showLine) {
        const meta = chart.getDatasetMeta(idx);
        meta.data.forEach(point => {
          // 纵向Bump Chart：Y轴方向偏移，横向则修改point._model.x
          point._model.y += offset;
        });
      }
    });
  }
});

插件会在绘制折线前，把所有折线的连接点坐标偏移指定距离，而图标点还是用原始位置渲染，自然形成间距。

注意：偏移量要根据你的图标尺寸调整，避免折线和图标重叠；如果是横向Bump Chart，把point._model.y改成point._model.x即可。

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