悬停后更新图表轴标签 - Chart.js

Question

我正在使用 Chart.js 版本 3.7.1。我想在悬停后替换 y 轴标签。悬停事件工作正常，它可以很好地识别 y 轴，但标签不会替换。我尝试使用 Chart API 中的 update() 方法，但没有帮助。

我还准备了一些快速游乐场，我在其中放置了一个解决此问题的自定义图表。 https://stackblitz.com/edit/angular-ivy-x3sncg

Answer 1

您可以将 afterEvent 插件与 ticks.callback函数如下所示：

options: {
  scales: {
    y: {
      beginAtZero: true,
      ticks: {
        callback: value => value + (this.isHoveringYAxe ? '
请看一下你修改后的StackBlitz  看看它是如何工作的。
 : '')
      }
    }
  }
},
plugins: [{
  id: 'customHover',
  afterEvent: (chart, args) => {
    const event = args.event;
    if (event.type == 'mousemove') {
      if (event.x < chart.scales.y.width && !this.isHoveringYAxe) {
        this.isHoveringYAxe = true;
        chart.update();
      } else if (event.x >= chart.scales.y.width && this.isHoveringYAxe) {
        this.isHoveringYAxe = false;
        chart.update();
      }
    }
  }
]

请看一下你修改后的StackBlitz 看看它是如何工作的。