图表工作不正确chart.js

Posted 2021-04-05

CodeSandbox

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

例如，点击“周”，然后点击下面的图表。

答案

我正在看你给的CodeSandbox，我看到你的工具提示与value：false相交，我认为它会一直使用工具提示模式，而不是当你想要soo尝试把它放在这里看看如果有效：

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

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

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

另一答案

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

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