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

Question

我正在使用 chart.js 版本 3.7.1。我想在悬停后替换 y 轴标签。悬停事件工作正常，它可以很好地识别 y 轴，但标签不会替换。我尝试使用图表 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 ? '$' : '')
      }
    }
  }
},
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，看看它是如何工作的。

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

Update chart axis labels after hover - chart.js

javascript

axis-labels

chart.js

angular