五、基礎教程-圖表配置

本節主要講解圖表配置，對應的 API 位置爲 chart，主要內容包括圖表全局樣式、繪圖區、圖表事件、等相關內容。

一、 圖表容器

Highcharts 實例化中綁定容器的方式有很多種方式，這裏列舉三種：
1. 通過 dom 調用 highcharts() 函數的方式

$("#container").highcharts({
    // Highcharts 配置  
}); 

2.  通過 chart.renderTo 來指定

var charts = new Highcharts.Chart({
    // Highcharts 配置
    chart : {
        renderTo : "container"  // 注意這裏一定是 ID 選擇器
    }
});

3.   通過構造函數

var charts = new Highcharts.Chart('container', {
  // Highcharts 配置
});

二、圖表樣式

1. 寬度、高度

Highcharts 圖表的高度和寬度是根據 DIV 容器的寬高來設定的，即

<div id="container" style="width:400px;height:400px"></div>

如果容器沒有設定寬高，默認是 寬 400px， 高 400px，另外設置容器的 min-width 屬性可以讓 highcharts 自適應寬度，實例：

<div id="container" style="min-width:400px;height:400px"></div>

2. 圖表樣式

圖表樣式屬性包括 border、backgroundColor、margin、spacing、style等
* 邊框：包括 borderColor、borderRadius、borderWidth
* 背景：包括 backgroundColor
* 外邊距：包括 margin、marginTop、marginRight、marginBottom、marginLeft
* 內邊距：包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
* 其他樣式：其他屬性例如字體等屬性，實例代碼

chart: {
    style: {
        fontFamily: "",
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#006cee'
    }
}

3. 圖表繪圖區

圖表繪圖區的可配置屬性有：
*  plotBackgroundColor ： 繪圖區背景顏色
*  plotBackgroundImage ： 繪圖區背景圖片
*  plotBorderColor ： 繪圖區邊框顏色
*  plotBorderWidth ： 繪圖區邊框寬度
*  plotShadow ： 繪圖投影

三、事件

*  click ：圖表點擊事件
*  load ：圖表加載完後事件
*  addSeries ：圖表增加序列事件
*  drilldown ：圖表下鑽事件
*  drillup ： 圖表上鑽事件
*  redraw ：圖表重繪事件
*  selection ： 圖表範圍選擇事件
*  beforePrint ： 圖表打印前事件
*  afterPrint ： 圖表打印後事件

四、其他配置

1. 圖表類型

通過 chart.type 來指定圖表類型，表示如果默認圖表類型，即如果 series 中沒有指定 type， 那麼圖表的類型就由該屬性來確定。highcharts 支持的所有圖表類型見 plotOptions。

2. 圖表縮放

圖表縮放包括縮放（zoom）和平移（pan），對應的屬性有：
   * zoomType ： 縮放類型，值可以是 “x”、“y”、“xy”，分別表示水平縮放、豎直縮放、平面縮放
   * 縮放恢復按鈕：可以指定按鈕的樣式、位置等，見 resetZoomButton，按鈕的文字可以通過 lang 中的屬性來指定
   * selectionMarkerFill ：選中背景色
   * panKey：平移鍵，默認是 “Shift”，即在啓用平移後，按住指定的按鍵即可對圖表進行平移操作
   * panning ： 是否啓用平移，啓用平移後，按住平移鍵，然後就可以用鼠標對圖表進行平移操作

3. 3D屬性

Highcharts 4.0 開始支持 3D 圖表類型，目前支持 3D 柱形圖、3D 餅圖、3D 散點圖。

4. 其他

*  圖表反轉 ： 圖表反轉指的是將圖表的 x軸和 y軸進行對調操作，對應的只需要設置 chart.inverted = true 即可。
* 圖表動畫 ：chart.animation 可以設置圖表的全局動畫效果，這裏的動畫指的是圖表更新時的動畫效果，而圖表初始化的動畫是在 plotOptions.series.animation 中啓用和關閉的。
* 圖表自適應 ：前面說過通過設置圖表容器的 min-width 可以讓圖表自適應，這個開關對應的屬性是 chart.reflow，另外，還可以通過 API 接口 Chart.reflow 在外部對圖表進行自適應操作