Highcharts学习笔记(一)

1、下载类库

http://www.highcharts.com/download

2、新建html文件

下载包里有demo，可以直接复制过来进行修改。不过我觉得把代码一点一点打出来，学习效果更好。

2.1 引用jquery类库

Highcharts也支持MooTools和Prototype。但这两者我都没接触过，不考虑。

2.2 引用highcharts类库
2.3 <div id="container" style="width:815px;height:500px"></div>
2.4 设置图表基本属性

	$(function(){
		chart = new Highcharts.Chart({
			chart:{
				renderTo: 'container',
				type:'bar'
			},
			title:{
				text:'水果消耗情况'
			},
			subtitle:{
				text:'截止今天早上10点'
			},
			xAxis:{
				categories:['苹果','梨','桔子']
			},
			yAxis:{
				title:{
					text:'个数',
				},
				tickInterval: 1,
			},
			series: [{
				name: '李四',
				data:[4,5,6]
			},{
				name: '张三',
				data:[1,2,3]
			},
			],
		});
	});

其实让图表正常显示只需设置xAxis series两项即可

3 其它设置

3.1 设置Theme,只需在highcharts后面引用某个thems的js即可
3.2 tickInterval：刻度间隔。本例默认为0.5，修改为1

总结：

不需要了解html5
写代码的时候经常漏掉,(逗号)
难点在于理解各项设置的意义
文档地址：http://docs.highcharts.com/#axes