使用HighChart的一些心得

HighChart对个浏览器有着良好的支持,有着强大的统计图表功能;例如折线图,饼图,柱状图,3d图形,等等,种类繁多

我使用过其中的几种一下记录我的一点学习经验吧:

1,首先要引入其核心的js文件highcharts.js,对HighChart提供最基本的支持,当然这个是基于jQuery的所以引入jQuery的类库也是必不可少的。

2,如果是需要将生成的图表导出则需要引入exporting.js然后可以通过配置属性来禁用

exporting: { 

                enabled: true  //设置导出按钮可用

            },

3,如果是要生成3D效果的图表则需要引入highcharts-3d.js配置

options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            },

4,生成蛛网图等则要引入highcharts-more.js,测试发现如果蛛网图不引入该js文件则会以折线图形式显示

给一个按年龄段统计人员数量生成饼图的示例吧:

//初始化数据
	function doInitData(){
		var rows = null;
		$.ajax({
			type:'POST',
			url:"countPerson.do",//分组统计年龄,请求后台返回数据
			data:"",
			dataType:"json",
			async:false,
			success:function(data){
				rows = data.rows;
			}
		})
		return rows;
	}
	
	//生成饼状图
	function doInitCol(){
		var data = doInitData();
		var dataArr = [];
		for(var i=0;i{point.name}: {point.percentage:.1f} %" 
					},
					showInLegend: true 		//图例
				} 
			}, 
			series: [{ 
				type: "pie", 
				name: "年龄", 
				data:dataArr 
				}] 
		});
	}



你可能感兴趣的:(jquery,HightChart)