我想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
已渲染,但不显示图表...
我在这里做错了什么?提前致谢..