Question

我已经阅读了一个类似问题的多个答案，并且尝试了所有方法，但似乎无济于事。当我更新Chartjs条形图上的数据并将鼠标悬停在该图上时，它会在新旧数据之间不断闪烁。

下面是我的图形组件：

import React, { useRef, useEffect, useCallback, useState } from 'react';
import Chart from 'chart.js';


const BarChart = (props: BarChartProps, ref): JSX.Element => {
  const { xAxisLabels, yAxisValues, barSettings, hideLegend } = props;
  const barChartRef = useRef<HTMLCanvasElement>(null);
  let myBarChart;

  const buildChart = () => {
    const myBarChartRef = barChartRef.current.getContext("2d");
    if(myBarChart) {
      myBarChart.destroy();
    }
    myBarChart = new Chart(myBarChartRef, {
      type: 'bar',
      data: {...},
      options: {...}
    });
  }

  useEffect(() => {
    buildChart();
  }, [buildChart]);

  return (
    <div style={{width: barSettings.width}}>
      <canvas ref={barChartRef} />
    </div>
  )
}

export default BarChart;

数据正在从外部组件动态更改（尽管我怀疑这与问题有关），如下所示：

export const OutsideComponent = () => {
  const [ydata, setYData] = useState(getYAxisValues(barChartData));

  const updateGraph = () => {
    setYData(getYAxisValues(barChartData2));
  }

  return (
    <div>
      <button onClick={updateGraph}>Update Graph1</button>
      <BarChart
        xAxisLabels={getXAxisLabels(barChartData)}
        yAxisValues={ydata}
        barSettings={settings}
      />
    </div>
  )
};

似乎没有什么对我有用。我已经尝试过chart.destroy（），chart.update（），但是似乎没有什么可以解决问题。我还尝试过更改响应能力以及其他答案提供的其他建议，但仍然没有。

悬停React时Chart.js闪烁

0 个答案: