資視就是力量 - Highcharts / 主題設定
昨天在介紹到「語言設定」時有提到 Highcharts.setOptions
, 說到它的功能是負責調整全域設定,讓整個網頁的圖表都受到影響,而今天要介紹的「主題設定」其實就是透過它來達成的。
主題設定
目前我們已經把七成的圖表區塊設定屬性給認識完了,基本上已經可以把 Highcharts 順利地運用在網頁中,但隨著頁面中的圖表越來越多,就會逐漸發現程式碼也變得越來越龐大。
由於我們在設計網頁時,總會有固定的風格、字型、顏色等等,所以會精心調整圖表的樣式細節,例如標題的字型樣式,圖例、提示框的顏色邊框等等。但是當我們想要把精心設定的樣式套用到每張圖表時,卻發現只能不斷寫著重複的程式碼。
var lineChart = Highcharts.chart(container, {
chart: {
type: "line"
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 4
}
});
var columnChart = Highcharts.chart(container, {
chart: {
type: "column"
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 4
}
});
就像上面這個簡單的案例,明明只是想要把每個圖表都加上邊框,卻要每張圖表都寫一堆重複的設定。這時候就可以使用 Highcharts.setOptions
來解決這種麻煩的窘境。
首先要把每張圖表都會重複的部份抽出來,然後再透過 Highcharts.setOptions
進行設定,這樣以後每個圖表都只要設定那些不一樣地方就好了。
var theme = {
chart: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 4
}
};
Highcharts.setOptions(theme);
var lineChart = Highcharts.chart(container, {
chart: { type: "line" }
});
var columnChart = Highcharts.chart(container, {
chart: { type: "column" }
});
# 權重最小
當然,要是圖表數量多了,總是會有變動的可能,但如果你還記得「越細節,權重越高」這個原則的話,就會知道「主題設定」的權重是最小的,因為它影響的範圍是所有設定中最大的。
var theme = {
chart: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 4
}
};
Highcharts.setOptions(theme);
var myChart = Highcharts.chart(container, {
chart: {
// 主題設定是可以被覆蓋的
borderColor: "blue",
borderRadius: 5
}
});
所以要是有與「主題設定」不同的設定,直接寫在圖表設定中就可以了,Highcharts 會自動幫你覆蓋。
# 深層合併
如果遇到某些物件類型的屬性,例如 style
、xAxis.label
...等等,你可能會覺得要把整個屬性重新覆蓋一次,但其實你一樣只要撰寫不同的地方即可,因為 Highcharts 會自動幫我們做到深層的物件合併。
var theme = {
title: {
style: {
fontFamily: "微軟正黑體",
fontWeight: "bold",
color: "#292929"
}
},
};
Highcharts.setOptions(theme);
var myChart = Highcharts.chart(container, {
title: {
text: "公司員工年齡分佈",
style: { color: "red" } // 還是有吃到字型和粗細
}
});
# 順序與重複
雖然「主題設定」非常的方便,不過要特別注意它的執行順序以及重複執行的問題,像是下面的程式碼中,我們先建立圖表才進行主題設定,那圖表是吃不到主題設定的。
var theme = {
chart: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 4
}
};
// 沒有吃到主題設定
var lineChart = Highcharts.chart(container, {
chart: { type: "line" }
});
Highcharts.setOptions(theme);
// 執行全域設定後,才吃得到主題設定
var columnChart = Highcharts.chart(container, {
chart: { type: "column" }
});
另外,重複執行 Highcharts.setOptions
是允許的,Highcharts 會自動把每次執行的設定內容合併,但是一樣要注意執行的順序。
var theme = {
chart: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 4
}
};
// 第一次執行全域設定
Highcharts.setOptions(theme);
// 有邊框,顏色為 #ddd
var lineChart = Highcharts.chart(container, {
chart: { type: "line" }
});
// 第二次執行全域設定
Highcharts.setOptions({
chart: { borderColor: "red" }
});
// 一樣有邊框,但邊框顏色為 red
var columnChart = Highcharts.chart(container, {
chart: { type: "column" }
});
那今天的「主題設定」就介紹到這邊,雖然是比較間單的功能,但卻能幫我們省去很多重複的工作,跟先前介紹的「繪圖區設定」有異曲同工之妙,接著明天要繼續介紹的是「響應式設定」,讓我們的圖表也能適應 RWD 網站。
- 此篇文章為「iT邦幫忙鐵人賽」參賽文章,同步發表於 iT邦幫忙 -