~~~ L O A D I N G ~~~~~ L O A D I N G ~~~~~ L O A D I N G ~~~

資視就是力量 - Highcharts / 主題設定

Sep 30, 2020 Max Lee

本章節範例:https://codepen.io/max-lee/pen/Vwaqvab

昨天在介紹到「語言設定」時有提到 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 會自動幫你覆蓋。


# 深層合併


如果遇到某些物件類型的屬性,例如 stylexAxis.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邦幫忙 -