我想使用react-chartjs
为我的统计页面。所以我目前正在测试react-chartjs
的每个组件,如条形图和折线图。
对于渲染条形图和折线图,我制作了简单的数据集,它工作得很好。但是,对于甜甜圈图,它不能渲染它。
import React, {PropTypes} from 'react';
import classnames from 'classnames';
import Actions from '../../actions/statistics';
import {Doughnut as DoughnutChart} from 'react-chartjs';
export default class Testing extends React.Component {
render () {
const data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
const styles = {
graphContainer: {
border: '1px solid black',
padding: '15px'
}
}
return (
<div style={styles.graphContainer}>
<DoughnutChart data={data} />
</div>
);
}
}
所以为了看看它在页面上是如何显示的,我简单地按照文档中的示例渲染DoughnutChart
。在元素检查工具中,它显示渲染了canvas class
,但它没有显示图表...
我在这里做错了什么?提前谢谢你。
1条答案
按热度按时间ulydmbyx1#
问题出在
react-chartjs
上。我把react-chartjs
改成react-chartjs-2
后,就可以用了。