图表容器
此处列举了三种方式进行 Highcharts 配置
// 第一种
$('#container').highcharts({
// Highcharts 配置
})
// 第二种
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container' // 一定是元素的 ID
}
})
// 第三种
var chart = new Highcharts.Chart('container',{
// Highcharts 配置
})
图表配置
这里主要涉及
chart内各种配置项
图表样式配置
- 宽高
- 在元素上直接设置宽高
- 在元素上设置
min-width，可使其自适应
- 图表样式
- 边框 borderColor、borderRadius、borderWidth
- 背景 backgroundColor
- 外边距 margin、marginTop、marginRight、marginBottom、marginLeft
- 内边距 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
- 其它样式 style，它是一个对象
- 图表绘图区
- plotBackgroundColor ： 绘图区背景颜色
- plotBackgroundImage ： 绘图区背景图片
- plotBorderColor ： 绘图区边框颜色
- plotBorderWidth ： 绘图区边框宽度
- plotShadow ： 绘图投影
图表事件
- click ：图表点击事件
- load ：图表加载完后事件
- addSeries ：图表增加序列事件
- drilldown ：图表下钻事件
- drillup ： 图表上钻事件
- redraw ：图表重绘事件
- selection ： 图表范围选择事件
- beforePrint ： 图表打印前事件
- afterPrint ： 图表打印后事件
图表其它配置
- 图表类型
- type，有哪些类型可以在
plotOptions中查询到
- 图表缩放
- zoomType，缩放类型，值可以是 “x”、“y”、“xy”，分别表示水平缩放、竖直缩放、平面缩放
- resetZoomButton,可以指定按钮的样式、位置等
- selectionMarkerFill,选中背景色
- panKey,平移键，默认是 “Shift”
- panning ,是否启用平移
- 3D属性
- 其它
- invert,将图表x和y轴进行对调操作
- animation，图表更新时动画效果，不会影响在
plotOptions.series.animation中的设置。后者是图表初始化时动画 - reflow，图表自适应
