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>战略布图</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>
添加回答
举报
0/150
提交
取消