哪个是合适的生命周期钩子来画一条线？

Question

我想画一条线来显示 y 轴上的零值。我有这个工作：

afterDraw(chart) {
      const {ctx, scales} = chart;

      Object.keys(scales).forEach((key) => {
        const scale = scales[key];
        if (scale.axis !== 'y') {
          return;
        }
        const yCoordinate = scale.getPixelForValue(ZERO_COORDINATE);
        ctx.fillStyle = 'blue';
        ctx.fillRect(0, yCoordinate, 200, 5);
      });
    },

我最初尝试使用 afterBuildTicks，但那并没有划清界线 - 或者至少它是不可见的。是否有关于何时使用不同生命周期挂钩的指南？有些看起来很明显，有些则不那么明显。

如果我在任何生命周期挂钩中使用图表的上下文，我如何确保我绘制的内容位于图表之上？我看到一个示例，其中有人通过提供 beforeDraw 回调来更改背景 - 堆叠上下文是否按我们通过不同挂钩绘制的顺序管理？

Answer 1

chart.js documentation 中有一个图表显示了在渲染过程中何时调用每个挂钩以及 chart.js 在这些挂钩之间执行的操作，例如绘制数据集、网格等.

如果您想确保您正在绘制的内容位于其他所有内容之上，您需要使用 afterDraw 挂钩在您想要的 canvas 上绘制内容。

哪个是合适的生命周期钩子来画一条线？

Which is the appropriate lifecycle hook to draw a line?

chart.js