win10系统
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: '
- -legend\"><% for (var i=0; i
- \"><%if(datasets[i].label){%><%=datasets[i].label%><%}%> <%}%>
}
const styles = {
graphContainer: {
border: '1px solid black',
padding: '15px'
}
}
class LineChartExample extends React.Component {
constructor(props) {
super(props)
this.state = {
data: chartData()
}
}
render() {
return (
chartOptions={chartOptions}
width="600" height="250"/>
)
}
}
var LineChart = require("react-chartjs").Line;
var MyComponent = React.createClass({
render: function() {
return
}
});
ReactDOM.render(, document.body);
index.html
<!DOCTYPE html>
Title
