图表无法正常工作chart.js

Question

CodeSandbox

当我尝试使用顶部面板更改图表数据时，它可以工作，但是当我将鼠标悬停在图表上时，它会反复更改数据。为什么会这样呢？

例如，单击“周”，然后将鼠标悬停在下表上。

Answer 1

我正在观看您提供的CodeSandbox，我看到您的工具提示与值相交：false，我认为它将始终使用工具提示模式，而不是在您希望将其提示时使用看看是否可行：

tooltips: {
      mode: "index",
      intersect: true
    },

建议： 将此添加到renderLi（参考CodeSandbox示例）

onMouseOver={() => {
      this.setState({ selectedIdx: key });
      this.props.itemKey(key);
    }}

Answer 2

我将图表添加到了全局范围。如果图表存在并且不等于null⇒它将被销毁。相应的闪烁消失了

if (window.eChart && window.eChart !== null) {
  window.eChart.destroy();
}