图表配置（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 在外部对图表进行自适应操做，在线试一试