React chartjs-2 没有重新绘制并且没有错误

问题描述

我正在尝试使用 react-chartjs-2，但它没有呈现。此外，我在反应终端或浏览器控制台中没有收到任何错误。

我的主要代码：

import TinyPieChart from './Charts/TinyPieChart';
...

const totalRevenue = {
    chartData: {
        labels: ['Last Week','Target'],datasets: [{
            data: [100,260],backgroundColor: [
                ChartConfig.color.info,ChartConfig.color.primary
            ],hoverBackgroundColor: [
                ChartConfig.color.info,ChartConfig.color.primary
            ]
        }]
    },target: '$566',lastWeek: '$100'
}
...

return (
   <>
      <TinyPieChart
         labels={totalRevenue.labels}
         datasets={totalRevenue.datasets}
         height={110}
         width={100}
      />
   </>
)

这是我的 TinyPieChart

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

// chart congig
import ChartConfig from '../../Constants/chart-config';

const options = {
    legend: {
        display: false,labels: {
            fontColor: ChartConfig.legendFontColor
        }
    }
};

const TinyPieChart = ({ labels,datasets,width,height }) => {
    const data = {
        labels,datasets
    };
    return (
        <Pie height={height} width={width} data={data} options={options} />
    );
}

export default TinyPieChart;

以及图表配置的 ChartConfig 文件：

import AppConfig from './AppConfig';

const { primary,info,danger,success,warning,purple,secondary,yellow,white,greyLighten,grey } = AppConfig.themeColors;

const ChartConfig = {
  color: {
    'primary': primary,'info': info,'warning': warning,'danger': danger,'success': success,'default': '#DEE4E8','purple': purple,'secondary': secondary,'yellow': yellow,'white': '#FFFFFF','dark': white,'greyLighten': greyLighten,'grey': grey
  },legendFontColor: '#AAAEB3',// only works on react chart js 2
  chartGridColor: '#EAEAEA',axesColor: '#657786',shadowColor: 'rgba(0,0.6)'
}

// Tooltip Styles
export const tooltipStyle = {
  backgroundColor: 'rgba(0,0.6)',border: '1px solid rgba(0,borderRadius: '5px'
}

export const tooltipTextStyle = {
  color: '#FFF',fontSize: '12px',paddingTop: '5px',paddingBottom: '5px',lineHeight: '1'
}

export default ChartConfig;

它不会返回任何错误，但不会呈现图表。

谢谢

解决方法

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

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

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