reactjs中的饼图 [英] Pie charts in reactjs

问题描述

我正在尝试在Web应用程序中实现饼图，并且发现它是一个很好的来源.

I'm trying to implement a pie chart in my web application and i found this as a good source.

https://github.com/reactjs/react-chartjs

但是它没有提供赋予chartData和chartOptions的方法以使其起作用.我该怎么办?

But it does not provide the way to give chartData and chartOptions inorder to make it work. How can i do this?

我的代码

import React, {Component} from 'react';
var LineChart = require("react-chartjs").Line;

class PieChart extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div className="">
                <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
            </div>
        );
    }
}
export default PieChart;

我得到这些错误

12:34  error    'chartData' is not defined     no-undef
12:54  error    'chartOptions' is not defined  no-undef

推荐答案

您需要初始化chatData和chartOptions，并且react-chartjs依赖于chartjs，因此您也需要安装

You need to initialise chatData and chartOptions and also react-chartjs has a dependency on chartjs, so you need to install that too

npm install --save chart.js@^1.1.1

代码

import React, {Component} from 'react';
import Chartjs from 'chart.js'
var LineChart = require("react-chartjs").Line;

class PieChart extends Component {
    constructor() {
        super();
    }

    render() {
       var chartOptions: {


     // Boolean - If we should show the scale at all


    showScale: true,
    // Boolean - Whether to show a dot for each point
    pointDot: true,
    showLines: false,
    title: {
        display: true,
        text: 'Chart.js Line Chart'
    },
    legend: {
        display: true,
        labels: {
           boxWidth: 50,
           fontSize: 10,
           fontColor: '#bbb',
           padding: 5,

        }
    }
    }

    var chartData= {
        labels: ['1', '2', '3', '4'],
        datasets: [
            {
                label: 'Current lag',
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                data: [50, 35, 60, 67]
            }
        ]
    }


        return (
            <div className="">
                <LineChart data={chartData} options={chartOptions} width="600" height="250"/>
            </div>
        );
    }
}
export default PieChart;

这篇关于reactjs中的饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！