圖表配置（Chart）

1、圖表容器

Highcharts 實例化中綁定容器的方式有兩種
一、經過 dom 調用 highcharts() 函數的方式

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

二、經過 chart.renderTo 來指定

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

2、圖表樣式

一、寬度、高度

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>

特別說明：餅圖中能夠經過設置寬高來讓圖形填充滿整個容器

二、圖表樣式

圖表樣式屬性包括 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 來綁定 CSS 類並給定 CSS 樣式。

三、圖表繪圖區

圖表繪圖區的可配置屬性有：

• plotBackgroundColor ： 繪圖區背景顏色
• plotBackgroundImage ： 繪圖區背景圖片
• plotBorderColor ： 繪圖區邊框顏色
• plotBorderWidth ： 繪圖區邊框寬度
• plotShadow ： 繪圖投影

3、事件

1. click ：圖表點擊事件，效果見 在線演示
2. load ：圖表加載完後事件，效果見 在線演示
3. addSeries ：圖表增長序列事件，效果見在線演示
4. drilldown ：圖表下鑽事件，效果見 在線演示
5. drillup ： 圖表上鑽事件，效果見 在線演示
6. redraw ：圖表重繪事件，效果見 在線演示
7. selection ： 圖表範圍選擇事件，效果見在線演示
8. beforePrint ： 圖表打印前事件
9. afterPrint ： 圖表打印後事件

4、其餘配置

一、圖表類型

經過 chart.type 來指定圖表類型，表示若是默認圖表類型，即若是 series 中沒有指定 type， 那麼圖表的類型就由 該屬性來肯定。highcharts 支持的全部圖表類型見 plotOptions。

二、圖表縮放

圖表縮放包括縮放（zoom）和平移（pan），對應的屬性有：

• zoomType ： 縮放類型，能夠是水平縮放、豎直縮放、平面縮放，對應的時設置 zoomType 爲 "x"、"y"、"xy"

• 縮放恢復按鈕：能夠指定按鈕的樣式、位置等，見 resetZoomButton，按鈕的文字能夠經過 lang 中的屬性來指定

• selectionMarkerFill ：

• panning ： 是否啓用平移，啓用平移後，按住平移鍵既可使用鼠標對圖表進行平移操做

• panKey：平移鍵，默認是 「Shift」，即在啓用平移後，按住指定的按鍵便可對圖表進行平移操做，在線試一試

三、3D 屬性

Highcharts 4.0 開始支持 3D 圖表類型，目前支持 3D 柱形圖、3D 餅圖、3D 散點圖。
3D 相關屬性見：chart.options3d ，關於 3D 圖形的詳細教程將以單獨文章形式給出。

四、其餘

• 圖表反轉 ： 圖表反轉指的是將圖表的 x軸和 y軸進行對調操做，對應的只須要設置 chart.inverted = true 便可。

• 圖表動畫 ：chart.animation 能夠設置圖表的全局動畫效果，這裏的動畫指的是圖表更新時的動畫效果，而圖表初始化的動畫是在 plotOptions.series.animation 中啓用和關閉的。

• 圖表自適應 ：前面說過經過設置圖表容器的 min-width 可讓圖表自適應，這個開關對應的屬性是 chart.reflow，另外，還能夠經過 API 接口 Chart.reflow 在外部對圖表進行自適應操做，在線試一試