Highcharts基础教程（二）：图表配置

2019独角兽企业重金招聘Python工程师标准>>>

Highcharts基础教程（一）：Highcharts 的主要组成
Highcharts基础教程（二）：图表配置

一、图表容器

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 来绑定 CSS 类并给定 CSS 样式。

3、图表绘图区

图表绘图区的可配置属性有：

plotBackgroundColor ：绘图区背景颜色
plotBackgroundImage ：绘图区背景图片
plotBorderColor ：绘图区边框颜色
plotBorderWidth ：绘图区边框宽度
plotShadow ：绘图投影

三、事件

click ：图表点击事件
load ：图表加载完后事件
addSeries ：图表增加序列事件
drilldown ：图表下钻事件
drillup ：图表上钻事件
redraw ：图表重绘事件
selection ：图表范围选择事件
afterPrint ：图表打印前事件
beforePrint ：图表打印后事件

四、其他配置

1、图表类型

通过 chart.type 来指定图表类型，表示如果默认图表类型，即如果 series 中没有指定 type，那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions。

2、图表缩放

图表缩放包括缩放（zoom）和平移（pan），对应的属性有：

zoomType：缩放类型，可以是水平缩放、竖直缩放、平面缩放，对应的时设置 zoomType 为 "x"、"y"、"xy"
缩放恢复按钮：可以指定按钮的样式、位置等，按钮的文字可以通过lang中的属性来指定
panning：是否启用平移，启用平移后，按住平移键既可以使用鼠标对图表进行平移操作
panKey：平移键，默认是 “Shift”，即在启用平移后，按住指定的按键即可对图表进行平移操作

3、3D 属性

Highcharts 4.0 开始支持 3D 图表类型，目前支持 3D 柱形图、3D 饼图、3D 散点图。

4、其他

图表反转：图表反转指的是将图表的 x轴和 y轴进行对调操作，对应的只需要设置 chart.inverted = true 即可。
图表动画：chart.animation 可以设置图表的全局动画效果，这里的动画指的是图表更新时的动画效果，而图表初始化的动画是在 plotOptions.series.animation 中启用和关闭的。
图表自适应：前面说过通过设置图表容器的 min-width 可以让图表自适应，这个开关对应的属性是 chart.reflow，另外，还可以通过 API 接口Chart.reflow在外部对图表进行自适应操作

Via：hcharts.cn

点击下载最新版 Highcharts

转载于:https://my.oschina.net/pengyi1992/blog/707710