微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。