On hover data fluctuation issue in chart.js graph react js .How can i fix this?

huangapple go评论69阅读模式
英文:

On hover data fluctuation issue in chart.js graph react js .How can i fix this?

问题

如果我使用 event: [],那么悬停问题将会解决,但我也想要工具提示。

请告诉我或者给出一个例子,我如何在显示另一个客户数据之后销毁我的图表。我无法在 useEffect 中销毁它,因为如果我在控制台中打印 myChart,它会返回 undefined 值。

英文:

If i use event:[] then hover issue will fix, but i also want tooltip.

import Chart from "chart.js";


const Component1 = ({productData,truncatedNames}) => {
  useEffect(() => {
        const canvas = document.getElementById("myChart1");
    // Create the chart context
    const ctx = canvas.getContext("2d");
  
  
    // Define the chart data
    const data = {
      labels: truncatedNames,
      datasets: [
        {
          label: "Products",
          data: productData,
          backgroundColor: "#FA7070",
        },
      ],
    };

    // Configure the chart options
    const options = {
      responsive: true,
      scales: {
        yAxes: [
          {
            display: true,
            ticks: {
              suggestedMin: 0,
              beginAtZero: true,
              callback: productData ? yAxisLabelCallback : emptyFunction,
            },
          },
        ],
      },
      onHover: function (event, chartElements) {},
      hover: false,
    };

    // Create the bar chart
    const myChart = new Chart(ctx, {
      type: "bar",
      data: data,
      options: options,
    });
  }, []);
  return (
   
      <Box>
        <canvas width={"70%"} height={"40%"} id="myChart1"></canvas>
      </Box>
  
  );
};

export default Component1;

Please tell or give any example how I destroy my chart after displaying another customer data.
I am unable to destroy this in useEffect because if i console myChart then it gives undefined value.

答案1

得分: 1

如评论中所述,
由于您没有将依赖项(productData 和 truncatedNames)传递给 useEffect,所以您的组件不会使用新数据进行刷新。
依赖项将在属性更改后重新运行效果。

useEffect(() => {
    ... 其他代码

    // 创建柱状图
    const myChart = new Chart(ctx, {
      type: "bar",
      data: data,
      options: options
    });

    return () => {
      // 执行清理操作 
      myChart.destroy(); 
    };
  }, [productData, truncatedNames]);

此外,您还需要添加一个清理函数,该函数将销毁旧图表并在 useEffect 中呈现新图表。

英文:

As mentioned in the comments,
Your component is not refreshed with new data because you are not passing dependancies (productData and truncatedNames) to the use effect.
The dependancies will rerun the effect after props are changed.

useEffect(() => {
    ... Other code

    // Create the bar chart
    const myChart = new Chart(ctx, {
      type: "bar",
      data: data,
      options: options
    });

    return () => {
      // doing cleanup 
      myChart.destroy(); 
    };
  }, [productData, truncatedNames]);

Also you need to add clean up function which will destroy the old chart and render new one in the useEffect.

huangapple
  • 本文由 发表于 2023年7月3日 14:50:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/76602444.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定