Kreisdiagramme in reactjs

Question

Ich versuche, ein Kreisdiagramm in meiner Webanwendung zu implementieren, und ich fand dies als eine gute Quelle.

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

Aber es bietet keine Möglichkeit, chartData und chartOptions inorder zu geben, es funktioniert. Wie kann ich das machen?

meinen Code

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; 

ich diese Fehler

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

Answer 1

Sie müssen chatData und chartOptions initialisieren und hat auch react-chartjs eine Abhängigkeit von chartjs, so dass Sie das auch installieren müssen

npm install --save chart.js@^1.1.1 

-Code

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; 

Answer 2

ich chart.js in meinem Projekt verwenden und es funktioniert wirklich gut. Sie müssen über npm chart.js Modul installieren

npm install chart.js --save 

Dann importieren Sie es in Ihre Komponentendatei

import Chart from 'chart.js' 

Und es bietet ‚Daten‘ Feld in seiner Funktion für Sie Daten zu füllen.

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 
    } 
    } 
}); 

Weitere Details finden Sie in unserem ihre doc (http://www.chartjs.org/docs/)