Chart 圖表
圖表是數值資料的圖形表示法。
圖表類型
(1) 長條圖
| 單筆資料 | 多筆資料 |
|---|---|
|
|
|
|
(2) 折線圖
| 單筆資料 | 多筆資料 |
|---|---|
|
|
|
|
圖表 (chart)
Download
JS highcharts.js JS highcharts-ratechart.js
SAMPLE
HTML
<div id="trend">
<figure class="highcharts-figure">
<div id="trendArea"></div>
</figure>
</div>
複製
CSS
.highcharts-figure,
.highcharts-data-table table {
margin-top: 30px;
}
.highcharts-credits,
.highcharts-axis-title,
.highcharts-series-label {
display: none;
}
.date-select-group {
margin: 20px 0;
}
.date-select-group {
margin: 20px 0;
}
.mobile-none {
display: none;
}
.ui-datepicker-calendar,
.ui-datepicker-header {
display: none;
}
複製
JS
Highcharts.chart('trendArea', {
chart: {
scrollablePlotArea: {
minWidth: 700
}
},
title: {
text: '美元匯率',
style: {
fontSize: '18px',
color: '#00a19b'
}
},
xAxis: {
tickInterval: 7 * 24 * 3600 * 1000, // one week
tickWidth: 0,
gridLineWidth: 1,
type: 'datetime',
labels: {
align: 'left',
style: {
fontSize: '14px'
}
}
},
yAxis: [{
title: {
text: null
},
labels: {
style: {
fontSize: '14px'
}
},
showFirstLabel: false
}, {
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
style: {
fontSize: '14px'
}
},
showFirstLabel: false
}],
legend: {
align: 'left',
margin: 50,
verticalAlign: 'top',
borderWidth: 0,
itemStyle: {
fontWeight: 'medium',
color: '#1C1C1C',
fontSize: '16px'
}
},
tooltip: {
shared: true,
crosshairs: true,
borderColor: '#d9d9d9',
style: {
fontSize: '14px'
}
},
plotOptions: {
series: {
cursor: 'pointer',
className: 'popup-on-click',
marker: {
lineWidth: 1
}
}
},
series: [{
name: '銀行賣出',
lineWidth: 2,
data: [
[Date.UTC(2017, 12, 18), 40585],
[Date.UTC(2017, 12, 19), 43039],
[Date.UTC(2017, 12, 20), 44926],
[Date.UTC(2017, 12, 21), 41256],
[Date.UTC(2017, 12, 22), 36844],
[Date.UTC(2017, 12, 23), 28955],
[Date.UTC(2017, 12, 24), 26113],
[Date.UTC(2017, 12, 25), 28433],
[Date.UTC(2017, 12, 26), 32687],
[Date.UTC(2017, 12, 27), 35689],
[Date.UTC(2017, 12, 28), 33656],
[Date.UTC(2017, 12, 29), 34559],
[Date.UTC(2017, 12, 30), 29197],
[Date.UTC(2017, 12, 31), 29197],
[Date.UTC(2018, 1, 1), 28291],
[Date.UTC(2018, 1, 2), 35472],
[Date.UTC(2018, 1, 3), 38363],
[Date.UTC(2018, 1, 4), 41645],
[Date.UTC(2018, 1, 5), 40268],
[Date.UTC(2018, 1, 6), 32846],
[Date.UTC(2018, 1, 7), 33560],
[Date.UTC(2018, 1, 8), 39327],
[Date.UTC(2018, 1, 9), 42947]
],
market: {
radius: 4
},
color: '#1DA4EF',
}, {
name: '銀行買入',
color: '#FD9A01',
data: [
[Date.UTC(2017, 12, 18), 48351],
[Date.UTC(2017, 12, 19), 51499],
[Date.UTC(2017, 12, 20), 53359],
[Date.UTC(2017, 12, 21), 49018],
[Date.UTC(2017, 12, 22), 43332],
[Date.UTC(2017, 12, 23), 33419],
[Date.UTC(2017, 12, 24), 30020],
[Date.UTC(2017, 12, 25), 33183],
[Date.UTC(2017, 12, 26), 38782],
[Date.UTC(2017, 12, 27), 42566],
[Date.UTC(2017, 12, 28), 39972],
[Date.UTC(2017, 12, 29), 40414],
[Date.UTC(2017, 12, 30), 33565],
[Date.UTC(2017, 12, 31), 30738],
[Date.UTC(2018, 1, 1), 32822],
[Date.UTC(2018, 1, 2), 42081],
[Date.UTC(2018, 1, 3), 45652],
[Date.UTC(2018, 1, 4), 49572],
[Date.UTC(2018, 1, 5), 47936],
[Date.UTC(2018, 1, 6), 37539],
[Date.UTC(2018, 1, 7), 38527],
[Date.UTC(2018, 1, 8), 46847],
[Date.UTC(2018, 1, 9), 51286]
],
lineWidth: 2,
market: {
radius: 4
},
}]
});
複製