Highcharts

你所不知的highchart常用属性

文章目录
  1. Highcharts 4.1.9
  2. Highcharts 4.1.8
    1. maxPointWidth
  3. Highcharts 4.1.6
  4. Highcharts 4.1.5 以内
    1. xAxis.labels.autoRotationLimit
    2. plotOptions.series.pointIntervalUnit
    3. events.selection
    4. chart.panning、chart.panKey
    5. xAxis.breaks
    6. xAxis.labels.staggerLines
    7. plotOptions.line.linecap
    8. 后面待续。。。。不定期更新

那些你没用过，你所不知道的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"
  }}

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