javascript - 在单击事件中删除图表会产生 'removeHoverStyle' 的空错误

Question

我的基本图表包装器看起来像这样(使用 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 回调函数，它会更改父级的状态变量之一( bool 值)。这有条件地呈现了下面的图表之一。

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 回调函数)并且第一个条形图被卸载时，我似乎遇到了这个错误。由于某种原因调用了 removeHoverStyle

错误:

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),
            },
          },
        ],
      },
    },
  };

相关链接https://github.com/chartjs/Chart.js/issues/3777

Answer 1

我在 react 16.12 上使用 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} ..... />
  );
}