在這邊要提到的是如何利用Highcharts API來動態製作多個圖表,根據當下的需求。在這邊並
會提到關於Highcharts的options如何設定及介紹,可以查閱官網的documents,裡面有很多實際
的範例操作,非常清楚!
首先,我們先定義要放置chart圖表的外層容器,在這邊是打算利用table
接著定義簡單的options,如下:
請注意,由於要動態產生chart,因此在options內的chart object並不會事先指定renderTo容器!
再來是定義thumb_options object,以現有option設定做deep copy assign to it,並且在此指定產生
4張圖,產生<tr></tr>及<td></td>。最後要特別提到的是new Highcharts下的Chart function
Chart (Object options, Function callback)
會提到關於Highcharts的options如何設定及介紹,可以查閱官網的documents,裡面有很多實際
的範例操作,非常清楚!
首先,我們先定義要放置chart圖表的外層容器,在這邊是打算利用table
<table id="charts" style="width:600px"></table>
接著定義簡單的options,如下:
var option_thumb = {
chart: {
type: 'line'
},
title: {
text: '',
style: {
color: '#000000',
font: 'bold 20px Trebuchet MS, Verdana, sans-serif',
},
align: 'center'
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'top',
x: 0,
y: 20,
borderWidth: 0
},
xAxis: {
categories:[],
labels: {
rotation: 90,
style: {
color: '#000000',
font: 'bold 11px Trebuchet MS, Verdana, sans-serif',
},
align:"left",
},
title:{
style: {
color: '#000000',
font: 'bold 14px Trebuchet MS, Verdana, sans-serif'
}
},
},
yAxis: {
title: {
text: 'Express',
style: {
color: '#000000',
font: 'bold 18px Trebuchet MS, Verdana, sans-serif'
}
},
labels: {
style: {
color: '#000',
font: 'bold 14px Trebuchet MS, Verdana, sans-serif'
}
}
},
credits : {
enabled : false
},
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 4,
lineColor: null // inherit from series
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
color: '#004EA0'
}]
};
請注意,由於要動態產生chart,因此在options內的chart object並不會事先指定renderTo容器!
再來是定義thumb_options object,以現有option設定做deep copy assign to it,並且在此指定產生
4張圖,產生<tr></tr>及<td></td>。最後要特別提到的是new Highcharts下的Chart function
Chart (Object options, Function callback)
請注意callback,當圖表完成載入後,您可以再去調整圖表的項目,在這邊是示範
調整Series 1 text,放大字體大小!
忘了補上css
var thumb_options = new Object();
for(var i = 0 ; i < 4 ; i++){
//deep copy elements
thumb_options[i] = $.extend(true, {}, option_thumb);
//set thumbnail chart container
thumb_options[i].chart.renderTo = "container"+i;
thumb_options[i].title.text = "chart "+i;
if($("#charts tr").get().length < 2)
$("#charts").append("");
$("#charts tr:nth-child("+((i%2)+1)+")").append("<td><div id='container"+i+"' class='show_chart'></div></td>");
//initialize highchart
new Highcharts.Chart(thumb_options[i], function(){
$(".highcharts-legend-item").find("text").each(function(){
$(this).children().css("font-size", "24px");
});
});
}
忘了補上css
.show_chart{
width: 500px;
height: 300px;
cursor:pointer;
}
謝謝分享!
回覆刪除