React js 与 react-chart js,不渲染圆环图
React js with react-chart js, does not render doughnut chart
我想将 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
,但是没有显示图表...
我在这里做错了什么?提前致谢..
问题来自 react-chartjs
。我把react-chartjs
改成react-chartjs-2
后就可以了。
我想将 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
,但是没有显示图表...
我在这里做错了什么?提前致谢..
问题来自 react-chartjs
。我把react-chartjs
改成react-chartjs-2
后就可以了。