02图表配置

图表容器

此处列举了三种方式进行 Highcharts 配置

// 第一种
$('#container').highcharts({
    // Highcharts 配置
})

// 第二种
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container' // 一定是元素的 ID
    }
})

// 第三种
var chart = new Highcharts.Chart('container',{
    // Highcharts 配置
})

图表配置

这里主要涉及chart内各种配置项

图表样式配置

1. 宽高

• 在元素上直接设置宽高
• 在元素上设置min-width，可使其自适应

2. 图表样式

• 边框 borderColor、borderRadius、borderWidth
• 背景 backgroundColor
• 外边距 margin、marginTop、marginRight、marginBottom、marginLeft
• 内边距 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
• 其它样式 style，它是一个对象

3. 图表绘图区

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

图表事件

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

图表其它配置

1. 图表类型

• type，有哪些类型可以在plotOptions中查询到

2. 图表缩放

• zoomType，缩放类型，值可以是 “x”、“y”、“xy”，分别表示水平缩放、竖直缩放、平面缩放
• resetZoomButton,可以指定按钮的样式、位置等
• selectionMarkerFill,选中背景色
• panKey,平移键，默认是 “Shift”
• panning ,是否启用平移

3. 3D属性
4. 其它

• invert,将图表x和y轴进行对调操作
• animation，图表更新时动画效果，不会影响在plotOptions.series.animation中的设置。后者是图表初始化时动画
• reflow，图表自适应