# 圖表配置（Chart） 本節主要講解圖表配置，對應的 API 位置為 [`chart`](http://www.hcharts.cn/api/index.php#chart)，主要內容包括圖表全局樣式、繪圖區、圖表事件、等相關內容。 ### 一、圖表容器 Highcharts 實例化中綁定容器的方式有兩種 1、通過 dom 調用 highcharts() 函數的方式 ``` $("#container").highcharts({ // Highcharts 配置 }); ``` 2、通過 chart.renderTo 來指定 ``` var charts = new Highcharts.Chart({ // Highcharts 配置 chart : { renderTo : "container" // 注意這里一定是 ID 選擇器 } }); ``` ### 二、圖表樣式 #### 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' } } ``` 另外還可以通過 [`chart.className`](http://www.hcharts.cn/api/index.php#chart.className) 來綁定 CSS 類并給定 CSS 樣式。 #### 3、圖表繪圖區 圖表繪圖區的可配置屬性有： * plotBackgroundColor ： 繪圖區背景顏色 * plotBackgroundImage ： 繪圖區背景圖片 * plotBorderColor ： 繪圖區邊框顏色 * plotBorderWidth ： 繪圖區邊框寬度 * plotShadow ： 繪圖投影 ### 三、事件 1. click ：圖表點擊事件，效果見 [在線演示](http://code.hcharts.cn/highcharts/hhhhhg) 2. load ：圖表加載完后事件，效果見 [在線演示](http://code.hcharts.cn/highcharts/hhhhyj) 3. addSeries ：圖表增加序列事件，效果見[在線演示](http://code.hcharts.cn/highcharts/hhhhhj) 4. drilldown ：圖表下鉆事件，效果見 [在線演示](http://code.hcharts.cn/highcharts/hhhhys) 5. drillup ： 圖表上鉆事件，效果見 [在線演示](http://code.hcharts.cn/highcharts/hhhhys) 6. redraw ：圖表重繪事件，效果見 [在線演示](http://code.hcharts.cn/highcharts/hhhhyg) 7. selection ： 圖表范圍選擇事件，效果見[在線演示](http://code.hcharts.cn/highcharts/hhhhqG) 8. afterPrint ： 圖表打印前事件 9. beforePrint ： 圖表打印后事件 ### 四、其他配置 #### 1、圖表類型 通過 `chart.type` 來指定圖表類型，表示如果默認圖表類型，即如果 series 中沒有指定 type， 那么圖表的類型就由 該屬性來確定。highcharts 支持的所有圖表類型見 `plotOptions`。 #### 2、圖表縮放 圖表縮放包括縮放（zoom）和平移（pan），對應的屬性有： * **zoomType** ： 縮放類型，可以是水平縮放、豎直縮放、平面縮放，對應的時設置 `zoomType` 為 `"x"`、`"y"`、`"xy"` * **縮放恢復按鈕**：可以指定按鈕的樣式、位置等，見 [resetZoomButton](http://www.hcharts.cn/api/index.php#chart.resetZoomButton)，按鈕的文字可以通過 [lang](http://www.hcharts.cn/api/index.php#lang) 中的屬性來指定 * **selectionMarkerFill** ： * **panning** ： 是否啟用平移，啟用平移后，按住平移鍵既可以使用鼠標對圖表進行平移操作 * **panKey**：平移鍵，默認是 “Shift”，即在啟用平移后，按住指定的按鍵即可對圖表進行平移操作，[在線實例](http://code.hcharts.cn/highcharts/hhhhyW) #### 3、3D 屬性 Highcharts 4.0 開始支持 3D 圖表類型，目前支持 3D 柱形圖、3D 餅圖、3D 散點圖。 3D 相關屬性見：[chart.options3d](http://www.hcharts.cn/api/index.php#chart.options3d) ，關于 3D 圖形的詳細教程將以單獨文章形式給出。 #### 4、其他 * 圖表反轉 ： 圖表反轉指的是將圖表的 x軸和 y軸進行對調操作，對應的只需要設置 `chart.inverted = true` 即可。 * 圖表動畫 ：`chart.animation` 可以設置圖表的全局動畫效果，這里的動畫指的是圖表更新時的動畫效果，而圖表初始化的動畫是在 `plotOptions.series.animation` 中啟用和關閉的。 * 圖表自適應 ：前面說過通過設置圖表容器的 `min-width` 可以讓圖表自適應，這個開關對應的屬性是 `chart.reflow`，另外，還可以通過 API 接口 [`Chart.reflow`](http://www.hcharts.cn/api/index.php#Chart.reflow) 在外部對圖表進行自適應操作，[實例見這里](http://code.hcharts.cn/highcharts/hhhhLw) * * * （正文完，最后更新時間：2015-08-09 18:01:50）