图表配置（Chart）
最后更新于：2022-04-01 22:26:06
# 图表配置（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 容器的宽高来设定的，即
```
```
如果容器没有设定宽高，默认是 宽 `400px`， 高 `400px`，另外设置容器的 `min-width` 属性可以让 highcharts 自适应宽度，实例：
```
```
特别说明：饼图中可以通过设置宽高来让图形填充满整个容器
#### 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）
';