node.js配置完成了，node_modules里面的react-chartjs.js和react-chartjs.min.js也配置完成了
app.js
var React = require('react');var ReactDOM = require('react-dom');class HomePage extends React.Component { render() { return ( 战略布图
); }}; function chartData() { return { 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], }, ] }}const chartOptions = { scaleShowGridLines: true, scaleGridLineColor: 'rgba(0,0,0,.05)', scaleGridLineWidth: 1, scaleShowHorizontalLines: true, scaleShowVerticalLines: true, bezierCurve: true, bezierCurveTension: 0.4, pointDot: true, pointDotRadius: 4, pointDotStrokeWidth: 1, pointHitDetectionRadius: 20, datasetStroke: true, datasetStrokeWidth: 2, datasetFill: true, legendTemplate: '
',}const styles = { graphContainer: { border: '1px solid black', padding: '15px' }}class LineChartExample extends React.Component { constructor(props) { super(props) this.state = { data: chartData() } } render() { return (
) }}var LineChart = require("react-chartjs").Line;var MyComponent = React.createClass({ render: function() { return }});ReactDOM.render(, document.body);
index.html
Title图 |
天盟APP下载
