你所不知的highchart常用属性

那些你没用过,你所不知道的highchart秘密,不定期更新。

Highcharts 4.1.9

axis.visible

这个属性用来控制是否显示yAxis或者xAxis,之前我们想要隐藏x和y轴是通过设置它的宽度为0来控制的,现在可以通过这个属性来设置了

softThreshold

此属性是在series里设置的,默认为true。如果设置false,当series里的值出现 0,1,2值会使y轴出现负值,我想大家都遇到过此问题,我们会设置y轴的最小值使y的坐标从0开始
如果是true,则不用设置最小值,直接从0开始

Highcharts 4.1.8

exporting.allowHTML

导出配置的一个属性,这个属性默认是false,默认导出不允许导出的svg中包含自定义的html元素。设置true即可支持自定义html元素导出

1
2
3
The HTML is rendered in a foreignObject tag in the generated SVG. 
The official export server is based on PhantomJS, which supports this,
but other SVG clients, like Batik, does not support it.

我们会看到官方给出了这样一段话,什么意思呢?就是说渲染svg以外的html元素,官方的phantomjs 是支持的,但其他的客户端导出 例如Batik 是不支持的。

maxPointWidth

默认值是null,用来设置柱子的最大宽度,当图表里只有几根柱子时,柱子会非常的粗,此时就需要应用此属性来设置了。

Highcharts 4.1.6

  • 增加xAxis.title.xxAxis.title.y 配置标题的作为
  • 3D图上 增加scaling 缩放 Z 轴

Highcharts 4.1.5 以内

series.keys

1
2
3
4
5
6
7
8
9
10
11
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['Chrome', 12.8, true, true],
['Safari', 8.5]
],
keys: ['name', 'y', 'sliced', 'selected']
//设置key的顺序后,会按照data提供的数据顺序获取
}]

xAxis.labels.autoRotationLimit

1
2
3
4
5
6
7
xAxis: {
type: 'category',
labels: {
autoRotationLimit: 40
}
}
//X轴的label超过指定长度后自动截取

plotOptions.series.pointIntervalUnit

当x轴为 datetime模式时,可以将此属性 设置为 day,month,year ,代表间隔单位

xAxis.labels.autoRotation

此属性是一个数组用来分别设置categories的倾斜度数,例如:

1
2
3
4
categories: ['January', 'February', 'March'],
labels: {
autoRotation: [-10, -20, -30]
}

yAxis.tickAmount

用来设置y轴 label的显示个数

events.selection

当设置了zoomType时,选中图表某个区域,能在此事件中获取到选中的区域的值范围。

1
2
3
4
selection: function (event) {
var min=Highcharts.numberFormat(event.xAxis[0].min, 2);
var max=Highcharts.numberFormat(event.xAxis[0].max, 2);
}

chart.panningchart.panKey

这2个属性基本同时出现,要使用panKey,必须先将panning设置为true。它的作用是:设置一个快捷键,当x轴启用zoomType时,放大某一块区域,然后按住所设置的快捷键,点击图表拖拽可以滑动查看。

xAxis.breaks

此属性是一个数组,作用是用一个区间段来代表x轴 某个起始点到某个结束点。例如x轴有1~10个点,我想把 5~8 之间的点不显示,直接显示 1,2,3,4,5,8,9,10。这样6,7 两个点就不显示在x轴上了。

1
2
3
4
5
6
7
8
xAxis: {
tickInterval: 1,
breaks: [{
from: 5,
to: 8,
breakSize: 1
}]
}

xAxis.labels.staggerLines

用来设置x轴分行显示

plotOptions.line.linecap

用来设置线条的渲染形状 弧形和方形,默认是弧形,以下设置为方形

1
2
3
4
plotOptions: {
line: {
linecap:"square"
}}

后面待续。。。。不定期更新