# 2.2 圖表配置
## 一 、 圖表容器
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'
}
}
~~~
另外還可以通過 chart.className 來綁定 CSS 類并給定 CSS 樣式。
### 3、圖表繪圖區
圖表繪圖區的可配置屬性有：
plotBackgroundColor ： 繪圖區背景顏色
plotBackgroundImage ： 繪圖區背景圖片
plotBorderColor ： 繪圖區邊框顏色
plotBorderWidth ： 繪圖區邊框寬度
plotShadow ： 繪圖投影
## 四、其他配置
### 1、圖表類型
通過 chart.type 來指定圖表類型，表示如果默認圖表類型，即如果 series 中沒有指定 type， 那么圖表的類型就由該屬性來確定。highcharts 支持的所有圖表類型見 plotOptions。
### 2、圖表縮放
圖表縮放包括縮放（zoom）和平移（pan），對應的屬性有：
zoomType ： 縮放類型，值可以是 “x”、“y”、“xy”，分別表示水平縮放、豎直縮放、平面縮放
縮放恢復按鈕：可以指定按鈕的樣式、位置等，見 resetZoomButton，按鈕的文字可以通過 lang 中的屬性來指定
selectionMarkerFill ：選中背景色，詳細參考 API 文檔
panKey：平移鍵，默認是 “Shift”，即在啟用平移后，按住指定的按鍵即可對圖表進行平移操作，在線試一試
panning ： 是否啟用平移，啟用平移后，按住平移鍵，然后就可以用鼠標對圖表進行平移操作（即平移操作是平移鍵加鼠標拖動）
### 3、3D 屬性
Highcharts 4.0 開始支持 3D 圖表類型，目前支持 3D 柱形圖、3D 餅圖、3D 散點圖。
3D 相關屬性見：chart.options3d ，關于 3D 圖形的詳細教程將以單獨文章形式給出。
### 4、其他
圖表反轉 ： 圖表反轉指的是將圖表的 x軸和 y軸進行對調操作，對應的只需要設置 chart.inverted = true 即可。
圖表動畫 ：chart.animation 可以設置圖表的全局動畫效果，這里的動畫指的是圖表更新時的動畫效果，而圖表初始化的動畫是在 plotOptions.series.animation 中啟用和關閉的。
圖表自適應 ：前面說過通過設置圖表容器的 min-width 可以讓圖表自適應，這個開關對應的屬性是 chart.reflow，另外，還可以通過 API 接口 Chart.reflow 在外部對圖表進行自適應操作，在線試一試
