Chartjs 3 如何绘制从特定 yAxis 值开始的水平线

Question

我一直在努力让它工作。我不想使用任何插件，我只想绘制一条简单的水平线，它从 y 轴上的特定值开始。

谁能告诉我这是否可行，如果可行，如何在 chartjs 3.7.1 中实现？

我知道如何绘制形状，但我无法弄清楚如何从 y 轴获取特定值的像素（起点）。

const indicatorA = {
  id: 'indicatorA ',
  afterDraw(chart, args, options) {
    console.log(chart)
  }
}

基本上我想做的是编写一个简单的插件，在加载图表时绘制线条。

Answer 1

这可以通过 Plugin Core API 在 afterDraw 挂钩中完成，如下所示：

afterDraw: chart => {
  const ctx = chart.ctx;
  ctx.save();
  const xAxis = chart.scales['x'];
  const yAxis = chart.scales['y'];
  const y = yAxis.getPixelForValue(yValueVerticalLine);
  ctx.beginPath();
  ctx.moveTo(xAxis.left, y);
  ctx.lineTo(xAxis.right, y);
  ctx.lineWidth = 2;
  ctx.strokeStyle = 'green';
  ctx.stroke();
  ctx.restore();
}

请查看下面的可运行代码，看看它是如何工作的。

const yValueVerticalLine = 8;

var chart = new Chart('canvas', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      const ctx = chart.ctx;
      ctx.save();
      const xAxis = chart.scales['x'];
      const yAxis = chart.scales['y'];
      const y = yAxis.getPixelForValue(yValueVerticalLine);
      ctx.beginPath();
      ctx.moveTo(xAxis.left, y);
      ctx.lineTo(xAxis.right, y);
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'green';
      ctx.stroke();
      ctx.restore();
    }
  }],
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F'],
    datasets: [{
        label: 'Dataset 1',
        data: [13, 10, 12, 13, 9, 12],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        fill: false
      },
      {
        label: 'Dataset 2',
        data: [10, 7, 9, 10, 6, 9],
        backgroundColor: 'rgba(255, 159, 64, 0.2)',
        borderColor: 'rgb(255, 159, 64)'
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>

Chartjs 3 如何绘制从特定 yAxis 值开始的水平线

Chartjs 3 how to draw a horizontal line starting at a specific yAxis value

chart.js