我的基本图表 Package 器看起来像这样（使用ReactJS 16.8+和ChartJS 2.0+）

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { makeStyles } from '@material-ui/styles';
import { useTranslation } from 'react-i18next';

Chart.plugins.unregister(ChartDataLabels);
function BarChart({ chartId, options }) {
  const classes = useStyles();
  const { t } = useTranslation();

  useEffect(() => {
    const myChart = new Chart(chartId, options); // instantiate a new chart
    return () => {
      myChart.destroy(); // destroy chart on component unmount
    };
  });

  return (
    <canvas className={classes.chart} id={chartId} data-testid={chartId}>
      <p>{t('noCanvasSupport')}</p>
    </canvas>
  );
}

字符串
我传入的选项对象有一个onClick回调函数，它改变父对象的一个状态变量（布尔值）。

function Parent() {
...
return (
<>
    {isTrue && <Barchart options={{...}} chartId={'chart-1'} />} // throws error as soon as isTrue becomes false
    {!isTrue && <Barchart options={{...}} chartId={'chart-2'} />}
</>
)
}

型
当isTrue被更改（通过单击图表中的一个条形图时触发的onclick回调函数）并且第一个Barchart被卸载时，我似乎得到了这个错误。
错误代码：

Uncaught TypeError: Cannot read property 'removeHoverStyle' of null
    at Chart.updateHoverStyle (Chart.js:8801)
    at Chart.handleEvent (Chart.js:8883)
    at Chart.eventHandler (Chart.js:8820)
    at listener (Chart.js:8758)
    at HTMLCanvasElement.proxies.<computed> (Chart.js:6685)

型
选项对象：

const options = {
    type: 'horizontalBar',
    plugins: [ChartDataLabels],
    data: data,
    options: {
      onClick: handleChartClick,
      maintainAspectRatio: false,
      cornerRadius: 6,
      tooltips: {
        enabled: true,
        callbacks: {
          label: (tooltipItem, data) => {
            let label = data.datasets[tooltipItem.datasetIndex].label || '';
            if (label) {
              label += ': ';
            }
            label += `${(tooltipItem.xLabel * 100).toFixed(1)}%`;
            return label;
          },
        },
      },
      legend: {
        position: 'bottom',
        labels: {
          fontFamily: 'Roboto',
          fontSize: theme.spacing(2) - 2,
          boxWidth: theme.spacing(2) + 2,
        },
      },
      plugins: {
        datalabels: {
          align: context => {
            if (isSmallScreen && context.datasetIndex === 1 && context.dataset.data[context.dataIndex] < 0.1) {
              return 'start';
            } else {
              return 'start';
            }
          },
          anchor: 'end',
          color: '#000000',
          font: {
            size: theme.spacing(1) + 4,
            family: 'Roboto',
            weight: 'normal',
          },
          formatter: (value, context) => {
            return (value * 100).toFixed(1) + '%';
          },
          display: context => {
            return context.dataset.data[context.dataIndex] > 0.05;
          },
        },
      },
      scales: {
        xAxes: [
          {
            stacked: true,
            scaleLabel: {
              display: false,
            },
            gridLines: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              display: false,
            },
          },
        ],
        yAxes: [
          {
            stacked: true,
            gridLines: {
              display: false,
              drawBorder: false,
            },
            ticks: {
              fontSize: isHeader ? theme.spacing(3) : theme.spacing(2),
              fontFamily: 'Roboto',
              fontStyle: isHeader ? 'bold' : 'normal',
              padding: theme.spacing(2),
            },
          },
        ],
      },
    },
  };

3条答案

按热度按时间

dauxcl2d1#

我也有同样的问题，我发现我们不应该在onClick事件处理程序中修改图表，解决方案是

window.setTimeout(function () {
            if (ref.current) {
                ref.current.chartInstance.destroy();
            }
            history.push(`/eod/${date}`);
        }, 1);

字符串

赞(0）回复(0）举报 2023-11-18

7y4bm7vi2#

我在react-chartjs-2 2.9.0上使用react-chartjs-2 2.9.0。我发现图表本身具有属性“onElementsClick”，您可以根据父组件中的属性设置一个函数来处理图表的显示。这样您就不必做任何奇怪的黑客行为，例如随机延迟代码的执行。
举例来说：

import React from 'react';
import { Line } from 'react-chartjs-2';

const chartComponent = (props) => {
  return (
      <Line onElementsClick={props.handleShow} ..... />
  );
}

mccptt673#

在我的例子中，这个问题在React中得到了解决，方法是将改变当前页面的操作移动到一个计时器为0的setTimeout()函数上。我不确定为什么这样可以解决这个问题，也许是一些应该异步的同步进程。在图表上调用destroy()似乎没有改变任何东西，但我离开了它，因为它似乎是一件好事，卸载干净的组件之前，改变页面。

options.onClick = (_event, activeElements) => {
  setTimeout(() => {
    activeElements.length && activeElements[0]._chart.destroy();
    this.props.history.push(`measure/${measure_id}`);
  }, 0);
};

ChartJS 单击事件时删除图表会产生null错误的“removeHoverStyle”

3条答案

相关问题

热门标签

最新问答