node.js配置完成了，node_modules里面的react-chartjs.js和react-chartjs.min.js也配置完成了app.jsvar?React?=?require('react');
var?ReactDOM?=?require('react-dom');
class?HomePage?extends?React.Component?{
render()?{
return?(
<div>
<h1>戰(zhàn)略布圖</h1>
<LineChartExample?/>
</div>
);
????}
};
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:?'<ul?class=\"<%=name.toLowerCase()%>-legend\"><%?for?(var?i=0;?i<datasets.length;?i++){%><li><span?style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
}
const?styles?=?{
??graphContainer:?{
????border:?'1px?solid?black',
????padding:?'15px'
??}
}
class?LineChartExample?extends?React.Component?{
??constructor(props)?{
????super(props)
????this.state?=?{
??????data:?chartData()
????}
??}
??render()?{
????return?(
??????<div?style={styles.graphContainer}>
????????<LineChart?data={this.state.data}
??????????chartOptions={chartOptions}
??????????width="600"?height="250"/>
??????</div>
????)
??}
}
var?LineChart?=?require("react-chartjs").Line;
var?MyComponent?=?React.createClass({
??render:?function()?{
????return?<LineChart?data={chartData}?options={chartOptions}/>
??}
});
ReactDOM.render(<HomePage?/>,??document.body);index.html<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<link?href="css/styles.css"?rel="stylesheet"?type="text/css">
????<title>Title</title>
</head>
<body>
<h1>圖</h1>
</body>
<script?src="app.bundle.js"></script>
</html>
添加回答
舉報(bào)
0/150
提交
取消