ReactChart wird nicht angezeigt

Ich benutze React-Diagramm zum Rendern Liniendiagramm in meiner Anwendung. Liniendiagramm nicht angezeigt. Es erstellt ein Canvas in div-Tag mit der ID "main1".ReactChart wird nicht angezeigt

lchart.js Datei:

var React = require('React'); 
var LineChart = require("react-chart").Line; 
var ReactDOM = require('ReactDOM'); 
var Chart = require('chart.js'); 

Chart.defaults.global.responsive = true; 
var chartData = [ 
    { 
     value: 300, 
     color:"#F7464A", 
     highlight: "#FF5A5E", 
     label: "Red" 
    }, 
    { 
     value: 50, 
     color: "#46BFBD", 
     highlight: "#5AD3D1", 
     label: "Green" 
    }, 
    { 
     value: 100, 
     color: "#FDB45C", 
     highlight: "#FFC870", 
     label: "Yellow" 
    } 
]; 

var LChart = React.createClass({ 

    render: function() { 
     return (<LineChart data={chartData} width="600" height="250" redraw/>); 
    } 
}); 
ReactDOM.render(<LChart />, document.getElementById('main1'));

Datei index.html:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    </head> 
    <body> 
    <div id="main1"></div> 
    <script src="lchart.js"></script> 
    </body> 
</html>

Quelle

2016-10-18 user2194838

Können Sie Ihre index.html posten? – Kafo

@Hussein Alkaf Index.html Datei hinzugefügt – user2194838

Angenommen, Sie reagieren-chartjs V1 verwenden:

Die Daten, die Sie in die passieren LineChart-Komponente<LineChart ... /> sollte diesem Muster folgen:

var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [ 
    { 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.2)", 
     strokeColor: "rgba(220,220,220,1)", 
     pointColor: "rgba(220,220,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }, 
    { 
     label: "My Second dataset", 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: [28, 48, 40, 19, 86, 27, 90] 
    } 
] 
};

Weitere Informationen finden Sie auf der Chart.js V 1.1.1 Dokumentation Chart.js V1.1.1: Line Chart documentation

Quelle

2016-10-31 21:15:39

ReactChart wird nicht angezeigt

Antwort

Verwandte Themen