資視就是力量 - Highcharts / 顏色屬性

本章節範例:https://codepen.io/max-lee/pen/poyZgWx
避免文章篇幅過長,沒辦法每個屬性都利用圖片示意,所以記得善用範例來測試不太了解的屬性。

我猜可能有些人在前面幾天一直很在意到底要怎麼更換「數據列/點」的顏色吧,還是其實已經有人等不及,自己偷偷跑去翻出調整顏色的屬性了。

Highcharts 當然是可以調整顏色的,但不是我不想跟大家介紹,而是能夠設定顏色的方法很多,而且又有權重的問題,所以才會想接在「繪圖區設定」後面介紹顏色的部分。


數據列顏色


昨天有講到繪圖區、數據列、數據點的權重大小,而調整顏色的屬性除了在這些區塊裡都可以調整外,顏色本身也有獨立的屬性可以設定。

var myChart = Highcharts.chart(container, {
  colors: ["red", "orange"],    // 所有數據列依序採用陣列中顏色 
  plotOptions: {
    series:{ 
      color: "green",           // 所有數據列都採用這個顏色
      colorByPoint: true,       // 所有數據列是否都用colors設定數據點顏色
      colors: ["cyan", "navy"], // 所有數據列的數據點依序採用陣列中顏色
    },
    line: { 
      color: "blue",            // 指定類型數據列都採用這個顏色
      colorByPoint: true,       // 指定類型數據列是否都用colors設定數據點顏色
      colors: ["lime", "plum"], // 指定類型數據列的數據點依序採用陣列中顏色
     }
  },
  series: [{
    color: "purple",            // 這組數據列採用這個顏色
    colorByPoint: true,         // 是否要用colors設定數據點顏色
    colors: ["pink", "gray"],   // 這組數據列裡的數據點依序採用陣列中顏色
    data: [{ color: "black" }]  // 這個數據點採用這個顏色
  }]
});

是不是看得頭都暈了?這樣應該知道為何我要等的現在才講顏色了吧?那下面就從權重最低到最高一個個詳細介紹。


# options.colors

型別: Array[String] 預設: 請見下方

這個顏色屬性直接隸屬於 options 物件底下,而它的值是一組陣列,陣列裡必須是合法的顏色字串,然後 「所有數據列」 便會依據它自己的順序從 colors 裡拉出顏色來設定,假如顏色用完了就會在回到第一個繼續循環

這也是為什麼我們前面的範例總是藍色的,因為它被設定的是預設 colors 裡的第一個顏色 #7cb5ec

default = ["#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1"]


# plotOptions.series.color

型別: String 預設: undefined

這個顏色屬性就非常很單純了,就是把 「所有數據列」 改成指定的顏色。



# plotOptions.[type].color

型別: String 預設: undefined

由於昨天解釋過繪圖區的權重關係,所以這個顏色屬性應該也不難懂,就是把 「所有指定類型的數據列」 改成指定的顏色,須要特別注意的是,假如你設定的圖表種類未涵蓋所有圖表的話,那其他圖表會「從頭」開始設定 options.colors 中的顏色,並且跳過已經有指定顏色的圖表。

var myChart = Highcharts.chart(container, {
  colors: ["green", "blue", "purple"], // 所有數據列依序採用陣列中顏色 
  plotOptions: {
    column: { color: "red" }
  },
  series: [
    { type: "column", data: [2, 2, 2] }, // 紅色
    { type: "line",   data: [6, 6, 6] }, // 綠色
    { type: "column", data: [4, 4, 4] }, // 紅色
    { type: "line",   data: [2, 2, 2] }  // 藍色
  ]
});


# series.color

型別: String 預設: undefined

這個顏色屬性一樣很簡單,就是把 「這個數據列」 改成指定的顏色。而且和上一個屬性一樣,剩下的數據列會「從頭」開始設定 options.colors 中的顏色,並且跳過已經有指定顏色的圖表。



# plotOptions.series.colorByPoint

型別: Boolean 預設: false

這個屬性可以決定是否要用 colors 來依序設定 「所有數據列的數據點顏色」,這裡指的 colors 不一定是 options.colors,而是權重最高的 colors



# plotOptions.series.colors

型別: Array[String] 預設: undefined

假如你的數據列沒有開啟 colorByPoint,那這個顏色屬性基本上就沒以任何作用,但如果開啟了,這個屬性就會覆蓋 options.colors,並用你提供的顏色陣列來依序設定「所有數據列的數據點顏色」

var myChart = Highcharts.chart(container, {
  colors: ["green", "blue", "purple"],
  plotOptions: {
    series: {
      colorByPoint: true,
      colors: ["pink", "red", "orange"]
    }
  },
  series: [{ 
    // 粉紅色, 紅色, 橘色, 粉紅色, 紅色
    data: [5, 3, 7, 4, 10] 
  }] 
});


# plotOptions.[type].colorByPoint / plotOptions.[type].colors

這組應該就不用多作介紹了吧,作用和前面一樣,只不過對象換成 「所有指定類型數據列的數據點顏色」

var myChart = Highcharts.chart(container, {
  colors: ["green", "blue", "purple"],
  plotOptions: {
    series: {
      colors: ["pink", "red", "orange"]
    },
    line: {
      colorByPoint: true,
    }
  },
  series: [
    // 粉紅色, 紅色, 橘色, 粉紅色, 紅色
    { type: "line", data: [5, 5, 5, 5, 5] },
    // 所有數據列都是綠色的
    { type: "column", data: [3, 3, 3, 3, 3] },
    // 粉紅色, 紅色, 橘色, 粉紅色, 紅色
    { type: "line", data: [2, 2, 2, 2, 2] }
  ] 
});


# series.colorByPoint / series.colors

數據列中也是有同一組的設定,也是必須要 colorByPoint 開啟才會作用,不過作用對象就換成了 「單一數據列的數據點顏色」

var myChart = Highcharts.chart(container, {
  chart: { type: "column" },
  colors: ["green", "blue", "purple"],
  plotOptions: {
    series: {
      colorByPoint: true,
      colors: ["pink", "red", "orange"]
    },
  },
  series: [
    // 粉紅色, 紅色, 橘色, 粉紅色, 紅色
    { data: [5, 3, 7, 4, 10] },
    // 所有數據列都是綠色的
    { colorByPoint: false, data: [5, 3, 7, 4, 10] },
    // 黑色, 灰色, 褐色, 黑色, 灰色
    { colors: ["black", "gray", "brown"], data: [5, 3, 7, 4, 10] }
  ] 
});


# series.data.color

型別: String 預設: undefined

這個顏色屬性是權重最高的,它可以決定 「單一數據點顏色」,不過跟數據列不同的是,它會直接覆蓋 colors 設定的顏色,而 不會被跳過

var myChart = Highcharts.chart(container, {
  chart: { type: "column" },
  colors: ["green", "blue", "purple"],
  plotOptions: {
    series: { colorByPoint: true }
  },
  series: [{ 
    // 綠色, 紅色, 紫色, 綠色, 藍色
    data: [5, { y: 3, color: "red" }, 7, 4, 10]
  }] 
});

補充: 圓餅圖這類以「數據點」為單位的圖表類型,colorByPoint 是強制開啟無法調整的。



今天完全在物理上體會了什麼叫「給你一點顏色瞧瞧」,單單一個顏色 Highcharts 就可以搞得那麼複雜。不過也因為這樣,在圖表的設計上就可以有很大的發揮空間,例如依據數據點的數值大小來調整顏色深淺。

而明天終於要來填「格式化屬性」的坑了。


- 此篇文章為「iT邦幫忙鐵人賽」參賽文章,同步發表於 iT邦幫忙 -