Highcharts

你所不知的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.x 和 xAxis.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.panning、chart.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"
  }}

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