有关highcharts的一些小记录

Highcharts作为一款数据可视化交互性图表库，非常的受欢迎。在以往的项目中，曾经使用过。最近接到一个任务，也是和使用Higcharts相关的，就把本次使用的一些tips记录在这。当然，如果想更多的了解Highcharts，请移步 Highcharts 中文官网 。

1、默认选中一组数据，在其余数据设置visible: false

series: [{
 	name: 'Tokyo',
 	data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
 	visible: false
 }, {
 	name: 'New York',
 	data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5],
 	visible: false
 }, {
 	name: 'Berlin',
 	data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
 }, {
 	name: 'London',
 	data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8],
 	visible:false
 }]

2、series自定义数据读取: this.series.userOptions[‘自定义字段’]

$(function () {
  $('#container').highcharts({
  	tooltip: {
  		formatter: function () { 
  			return 'The text for <b>' + this.series.userOptions.text + '</b> is <b>' + this.y + '</b>';
  		}
  },
  xAxis: {
  	categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
  		data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
  		text: 'hello'
  	}, {
  		data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
  		text: 'world'
  	}]
  });
});

3、X轴数据过多，可设置间隔显示

xAxis: {
  categories: self.date_period,
  tickInterval: 5//此处设置间隔显示个数
}

如有继续使用，会持续更新