自定义工具提示 React ChartJs

Question

我在使用 react-chartjs-2 库创建自定义工具提示时遇到问题，每当我将鼠标悬停在图表上并更改工具提示未来数据的状态时，我的图表都会重新呈现。（目前工具提示不存在我只是记录一些我稍后会用到的数据）

我在尝试创建工具提示时引用了此 question，但是他们使用的是 class 组件，而我使用的是功能组件，但它应该不会真正改变任何东西，但无论如何。我真的很感激有人可以使用 react-chartjs-2 提供自定义工具提示的工作示例，因为我仍然不确定工具提示是否应该是一个单独的 jsx 组件，或者在中创建自定义工具提示的正确方法是什么反应。提前致谢

我的代码

 const GraphTooltip = ({ data }) => {
  return (
    <div
      style={{
        padding: 20,
        position: 'absolute',
        border: '1px solid',
        borderColor: '#fff8f9',
        backgroundColor: 'rgba(53,53,53,0.81)',
        borderRadius: 4,
        top: data.top,
        left: data.left,
      }}
    ></div>
  );
};

const LineChart = ({ values, labels }) => {
  const isSSR = useIsSSR();

  const [tooltipData, setTooltipData] = useState(null);

  console.log(tooltipData);

  const chartRef = useRef(null);

  const customTooltip = useCallback(tooltipModel => {
    if (tooltipModel.tooltip.opacity == 0) {
      setTooltipData(null);
      console.log('Hide tooltip');
      return;
    }
    console.log(tooltipModel);
    const chart = chartRef.current;
    const canvas = chart.canvas;

    console.log(canvas);

    if (canvas) {
      const position = canvas.getBoundingClientRect();

      // set position of tooltip
      const left = tooltipModel.tooltip.x;
      console.log(position.left);
      console.log(tooltipModel.tooltip);
      const top = tooltipModel.tooltip.y;

      tooltipData?.top != top && setTooltipData({ top: top, left: left });
    }
  });

  const options = useMemo(() => ({
    scales: {
      x: {
        ticks: {
          beginAtZero: true,
        },
        grid: {
          color: '#EEF5FF',
        },
      },
      y: {
        grid: {
          color: '#EEF5FF',
        },
      },
    },
    plugins: {
      legend: {
        display: false,
        position: 'right',
      },
      tooltip: {
        enabled: false,
        external: customTooltip,
      },
    },
  }));

  const data = {
    labels: labels,
    datasets: [
      {
        data: values,
        fill: false,
        backgroundColor: '#88B1DD',
        borderColor: '#88B1DD',
        pointRadius: 6,
        tension: 0.5,
      },
    ],
  };

  if (isSSR) return null;

  return (
    <>
      <div className="header"></div>
      <div className="relative">
        <Line data={data} options={options} ref={chartRef} />
        {tooltipData ? <GraphTooltip data={tooltipData} /> : <div />}
      </div>
    </>
  );
};

Answer 1

使用 https://www.npmjs.com/package/test-react-chartjs-2 实际上解决了这个问题。包本身的一些问题。

Answer 2

我已经回答过类似的问题，请关注link 谢谢:)

自定义工具提示 React ChartJs

Custom tooltip React ChartJs

javascript

reactjs

charts

react-chartjs