import React from 'react';
import Highcharts from 'highcharts';
export default class extends React.Component {
componentDidMount() {
this.renderGraph();
}
renderGraph = () => {
let Data = {
title: { //表頭
text: '2010 ~ 2016 年太陽能行業就業人員發展情況'
},
subtitle: { //副標題
text: '數據來源:thesolarfoundation.com'
},
yAxis: { //y座標
title: {
text: '就業人數'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
}
},
series: [{ //圖表數據
name: '安裝,實施人員',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '銷售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '項目開發',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 1000
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
},
credits: { //去掉版權logo
enabled: false
}
}
Highcharts.chart(this.refs.alarmHighChart, Data);
}
render() {
return (
<div ref="alarmHighChart" />
);
}
}
React中使用highcharts繪製圖表demo
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.