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中的餅圖

回答

相關問題