如何在ChartJS散点图中将零轴线移至50位置？

当然可以实现这个需求！ChartJS确实没有直接提供配置项来指定轴线的位置，但我们可以借助它的自定义插件功能手动绘制出位于50位置的交叉轴线，同时调整原有坐标轴的样式来匹配你的预期效果。

下面是修改后的完整代码，我会在后面解释关键改动：

window.onload = function() {
  var ctx = document.getElementById('canvas').getContext('2d');
  window.myScatter = Chart.Scatter(ctx, {
    data: {
      datasets: [{
        backgroundColor: '#000000',
        borderColor: '#000000',
        data: [{ x: 61.01, y: 62.87 }]
      }]
    },
    options: {
      title: {
        display: false,
      },
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: false,
            max: 100,
            min: 0,
            stepSize: 20
          },
          gridLines: {
            display: true,
            drawBorder: false // 隐藏默认的坐标轴边框
          },
          border: {
            display: false // 隐藏默认的轴线
          }
        }],
        yAxes: [{
          ticks: {
            beginAtZero: false,
            max: 100,
            min: 0,
            stepSize: 20
          },
          gridLines: {
            display: true,
            drawBorder: false
          },
          border: {
            display: false
          }
        }]
      }
    },
    plugins: [{
      afterDraw: function(chart) {
        const ctx = chart.ctx;
        const xAxis = chart.scales['x-axis-0'];
        const yAxis = chart.scales['y-axis-0'];
        
        // 绘制水平方向的中间轴线（对应Y=50的位置）
        ctx.beginPath();
        ctx.moveTo(xAxis.left, yAxis.getPixelForValue(50));
        ctx.lineTo(xAxis.right, yAxis.getPixelForValue(50));
        ctx.lineWidth = 2; // 调整线条粗细，匹配默认轴线样式
        ctx.strokeStyle = '#777'; // 用默认轴线的灰色，你可以按需修改
        ctx.stroke();
        
        // 绘制垂直方向的中间轴线（对应X=50的位置）
        ctx.beginPath();
        ctx.moveTo(xAxis.getPixelForValue(50), yAxis.top);
        ctx.lineTo(xAxis.getPixelForValue(50), yAxis.bottom);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#777';
        ctx.stroke();
      }
    }]
  });
};

关键改动说明： #

1. 隐藏默认轴线：在scales的配置中，我们关闭了坐标轴的border.display和gridLines.drawBorder，这样原来位于0位置的轴线和边框就不会显示，避免和我们手动绘制的中间线冲突。
2. 自定义插件绘制中间线：通过plugins数组添加一个自定义插件，利用afterDraw钩子（图表绘制完成后触发），使用Canvas API绘制两条交叉线：
   • 用getPixelForValue(50)方法把数值50转换成对应的画布像素位置，确保线条精准定位在坐标轴中间。
   • 调整lineWidth和strokeStyle来匹配ChartJS默认轴线的样式，你也可以根据自己的需求修改颜色和粗细。

这样修改后，你的散点图就会呈现出轴线位于50位置的效果，和你提供的预期图一致。

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