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