自定义图例并不总是使用 react-chartjs-2 渲染

问题描述

我使用圆环图上的 legendCallback 选项制作了自定义图例，但图例并不总是呈现。但是，在刷新页面时，图例会呈现。这让我相信这是组件生命周期的问题，但我一直无法通过使用 React 钩子来解决它。我认为问题可能是这样的：我给了 <Doughnut> 组件一个 refHook，我只能在 DOM 中存在 ref 之后调用 generateLegend() 函数，所以有时可能不会在页面渲染之前制作它？我真的不知道。我不能使用 useEffect，因为我需要将 ref 作为依赖项传递给它，并且在 ref 更改时组件不会重新呈现。这是组件相关的组件：

import { useEffect,useRef,useState } from 'react'
import { Doughnut } from "react-chartjs-2";
import generateColors from 'utils/colorGen';
import parse from 'html-react-parser';

export const Donut = ({labelName,dataname,data}: DonutProps<CategoryTotalsObj>) => {

  let labels = data.map(e => e[labelName])
  let dataSet = data.map(e => Number(e[dataname].replace(/[^0-9.-]+/g,"")))
  const chartEl = useRef<Doughnut>(null)
  const colors = generateColors(data.length)
  
  const chart = {...}

  const options = {...}
  
  return (
    <div className='chart-wrapper' style={{width: '400px'}}>
      <Doughnut data={chart} options={options} ref={chartEl}/>
      {chartEl.current && parse(chartEl.current.chartInstance.generateLegend())}
    </div>
  )
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-chartjs reactjs reactjs reactjs reactjs