Диаграмма. js Мерцание при наведении React - PullRequest
Новая
       24

Диаграмма. js Мерцание при наведении React

0 голосов
/ 26 февраля 2020

Я прочитал несколько ответов на один и тот же вопрос и перепробовал все, но ничего не помогло. Когда я обновляю данные на гистограмме Chart js и зависаю на графике, она продолжает мерцать между старыми и новыми данными.

Ниже приведен мой компонент графика: 

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 (), но, похоже, ничего не решило проблему. Я также пытался изменить отзывчивость и любые другие советы, которые давали другие ответы, но пока ничего.

...