reactjs中的饼图

我试图在我的web应用程序中实现一个饼图，我发现这是一个很好的来源。reactjs中的饼图

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

但它并没有提供给chartData和chartOptions序，使其工作方式。我怎样才能做到这一点？

我的代码

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

来源

2017-03-10 CraZyDroiD

您需要初始化chatData和chartOptions也react-chartjs对chartjs依赖，所以你需要安装过

npm install --save [email protected]^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;

来源

2017-03-10 04:00:00

当我使用此代码，它显示错误（在编辑器中红线）*或类型名称 – CraZyDroiD

检查更新的答案 –

我用chart.js之在我的项目和它的作品真的很好。你需要通过NPM

npm install chart.js --save

安装chart.js之模块然后导入到你的组件文件

import Chart from 'chart.js'

而在其功能提供了“数据”字段，用于填充数据。

let myDoughnutChart = new Chart(document.getElementById('my_chart'), { 
    type: 'pie', 
    data: { 
    datasets: [{ 
     data: [percentage, 100 - percentage], 
     backgroundColor: ['rgba(82,199,197,1)', '#E5E5E5'], 
     borderWidth: 1 
    }] 
    }, 
    options: { 
    tooltips: { 
     enabled: false 
    } 
    } 
});

欲了解更多详情，请查看他们的文档（http://www.chartjs.org/docs/）

来源

2017-03-10 04:02:07 MattYao

reactjs中的饼图

回答

相关问题