reactjs 使用react-chart js的React js,不会呈现圆环图

9gm1akwq  于 2023-03-22  发布在  React
关注(0)|答案(1)|浏览(146)

我想使用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,但它没有显示图表...
我在这里做错了什么?提前谢谢你。

ulydmbyx

ulydmbyx1#

问题出在react-chartjs上。我把react-chartjs改成react-chartjs-2后,就可以用了。

相关问题