資視就是力量 - Highcharts / 圖表整體設定

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

接下來的幾天，將陸續介紹 Highcharts 圖表設定裡五花八門的屬性，所以之後每個章節的開頭我都會準備一個線上範例，建議大家利用範例來玩玩看當天介紹的屬性。

相信大家都有接觸過線上遊戲，在遊戲開始時總是會創建角色並決定初始樣貌以及職業，而「圖表整體設定」正是為圖表做這些初始設定。

圖表整體設定

圖表整體設定主要是一些調整圖表外觀或是整體呈現的屬性，而且這些屬性會大大影響其他區塊的設定內容，像是如果你用 chart.type 屬性把圖表設定為圓餅圖，那之後的座標軸設定你肯定就用不到了，所以它算是整個圖表的基底及前置。

var myChart = Highcharts.chart(container, {
  chart: {} // 圖表整體設定
});

# chart.type

型別: String 預設: "line"

這個算是比較重要的屬性，它決定了這張圖表要採用的類型是哪一種，我們的範例中設定的是 column 長條圖，如果沒特別設定的話，則預設會是折線圖。想知道所有圖表類型的話，可以到 官方文件 查看。

# chart.inverted

型別: Boolean 預設: false

這個屬性比較特別，如果你設為 true 的話，它會將你的座標軸給交換，這會導致圖表的方向性改變，像是用在柱狀圖的話它就會變成橫條圖，或是下面的折線圖改為由上而下繪製。

# chart.width / chart.height

型別: String|Number|null 預設: null

寬高就是非常基本的屬性了，兩者都可以用數字或字串來做設定，並且支援所有 CSS 的長度單位，如果沒特別設定的話會是預設值 null，不過 null 並非為零，而是寬度部分會自動填滿與容器，高度則預設為 400px。

# chart.reflow

型別: Boolean 預設: true

前面提到過，當你沒有為圖表設定寬度時，它會主動填滿容器元素，但若你的容器會根據視窗大小和縮放時，圖表就會跟著一起變寬變窄，而 reflow 可以讓你決定要不要讓圖表一起縮放。

# chart.backgroundColor / chart.plotBackgroundColor

型別: String|Object|null 預設: "#ffffff"

這兩個都是調整背景顏色，可以使用16進制的色碼、顏色名以及 rgba() 的顏色設定，若設為 null 的話則取消背景。那為何背景色要分成兩個設定呢？因為調整的區塊其實不太一樣，一個是設定整個圖表 (chart) 的背景，另一個則是設定繪圖區 (plot) 的背景。

另外也可以設定漸層色，不過寫法稍微複雜，必須用一個物件來設定，其中 linearGradient 屬性是調整漸層方向的，而 stops 則是設定顏色的，說明寫在註解了，你可以試著寫寫看。

chart: {
  backgroundColor: {
    //x1:0, x2:1 為水平漸層，y1:0, y2:1 為垂直的漸層，以此邏輯便能調整出斜向或反向漸層
    linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 }, 
    //第一個值為顏色位置(0~1)，第二個值為顏色
    stops: [ [0, 'pink'], [0.5, 'red'], [1, 'orange'] ]
  }
}

# chart.borderWidth / chart.plotBorderWidth

型別: Number 預設: 0

同樣地，圖表與繪圖區的邊框寬度都可以各自設定，如果不設定則沒有邊框。另外也可以用 chart.borderRadius 設定圖表的邊框圓角，繪圖區則沒有圓角設定。

# chart.borderColor / chart.plotBorderColor

型別: String 預設: "#335cad" / "#cccccc"

邊框顏色的設定方式和背景色一樣，要注意的是圖表與繪圖區的邊框色預設值不一樣，圖表是深藍色 #335cad，繪圖區則是淺灰色 #cccccc。

# chart.spacing

型別: Array[Number] 預設: [10, 10, 15, 10]

這個屬性如同圖表的 padding，代表的是圖表 (chart) 內容與邊框之間的內間距，設定方式是四個數字的陣列，順序和 CSS 一樣是上右下左，若你想要個別設定可以用 spacingTop、spacingBottom、spacingRight、spacingLeft，它們會覆蓋掉 spacing。

# chart.margin

型別: Array[Number] 預設: undefined

這是一個容易被混淆的屬性，你可能會以為它與 spacing 相對，不過它調整可不是圖表的外間距，他調整的是繪圖區 (plot) 與圖表 (chart) 邊框的距離，我覺得這算是一個蠻大的地雷，如果沒有仔細理解肯定會被搞糊塗。

灰色區域是兩者各自代表的間距，可以發現 margin 的距離其實是包含 spacing 的。另外當你沒有設定 margin 的時候，間距並不為零，而是 Highcharts 會去計算圖表的其他區塊(標題、座標軸等..)，並調整成能夠避開它們的間距。

當然，margin 也有 marginTop、marginBottom、marginRight、marginLeft 的版本可以使用。

那麼以上就是「圖表整體設定」中比較常會使用到的屬性了，明天會介紹的是標題、說明等文字性質的圖表元素。

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