哪个是画线的合适的生命周期钩子？答案

【问题标题】：Which is the appropriate lifecycle hook to draw a line?哪个是画线的合适的生命周期钩子？
【发布时间】：2021-12-31 15:26:38
【问题描述】：

我想画一条线来显示 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 回调来更改背景 - 堆叠上下文是按我们通过不同钩子绘制的顺序管理的吗？

【问题讨论】：

标签： chart.js

【解决方案1】：

chart.js documentation 中有一个图表，显示了在渲染过程中何时调用每个钩子，以及 chart.js 在这些钩子之间做了什么，如绘制数据集、网格等。

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

【讨论】：