<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>//需要給圖表一個空間
<script type="text/javascript">
$(document).ready(function() {
Highcharts.chart('container', { //圖表程式開始處
title: {//標題：1
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {//副標題：2
text: 'Source: thesolarfoundation.com'
},
yAxis: {//y軸標題：3
title: {
text: 'Number of Employees'
}
},
legend: {//說明文字：7
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {//下方起始數字：6
series: {
pointStart: 2010
}
},
series: [{//資料：5
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}]
});
})
</script>
<style>
#container {//圖表的空間屬性
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
</style>
</head>
</html>
參考：http://www.highcharts.com/
如果您喜歡我的文章，請在文章最末按5下Like!
我將得到LikeCoin的回饋:)
回饋由LikeCoin基金會出資，您只要註冊/登入帳號(FB、Google帳號都可以註冊，流程超快)，按L五次左鍵，可以贊助我的文章且完全不會花到錢！
支持創作，正向交流:)
沒有留言:
張貼留言