highcharts使用心得

文章目录

1. 1. 概述：这两天写项目，要求把所有的出表操作换成图。使用HighChart框架可以方便的做出来。但是做的过程当中遇到很多问题，简单记录一下，留着日后看看，可以感慨一下~~
2. 2. Highchart真的是一个很棒的框架！
   1. 2.1. 先不说它的扩展性，就是光看它提供的那些图表类型就觉得好厉害的样子。
   2. 2.2. 项目中为了达到复用的目的，写了一个通用的出图模板，以应对每个模块的数据的变化。需要动态的为图标添加数据：
   3. 2.3. 动态操作上面对象中的数据
   4. 2.4. 动态添加线条和数据
   5. 2.5. 删除多余图例
3. 3. 动态操作真的很方便，增加了程序的扩展性，让用户很方便的实现需求。

概述：这两天写项目，要求把所有的出表操作换成图。使用HighChart框架可以方便的做出来。但是做的过程当中遇到很多问题，简单记录一下，留着日后看看，可以感慨一下~~

Highchart真的是一个很棒的框架！

先不说它的扩展性，就是光看它提供的那些图表类型就觉得好厉害的样子。

• 曲线图
• 区域图
• 3D图
• 柱状图
• 饼图
• 散列图
• 混合图

项目中为了达到复用的目的，写了一个通用的出图模板，以应对每个模块的数据的变化。需要动态的为图标添加数据：

var options = {
		    chart : {
		     renderTo : 'MonthlyIAE',
		     type : 'line',
		    },
		    title : 
		    legend:   { },
		    xAxis : { 
		     categories : defaultCategories,//x轴数据集
		     labels: {
                 rotation: -45		//x轴标签旋转45度
               }
		    },
		    yAxis : {//y轴
		     },
		    },
		    legend: {			//图例
		         enabled: true
		     },
		    credits : {	//highchart的版权声明
		        enabled: false
		     },
		    plotOptions : {
		     series : {
		      stacking : 'normal'
		     }
		    }, 
		    scrollbar: {		//滚动条
       			enabled: true
   			},
		    series : [ {		//线条
		     name : '',
		     data : []
		    } ]
   		};

动态操作上面对象中的数据

options.xAxis.categories = timeline;//设置X轴-
options.yAxis.title.text= '单位(' + division + ')';//Y轴
options.title.text = title;//TITLE

动态添加线条和数据

for(var i = 0; i <newKeylist.length;i++){
	options.series[i].name = newKeylist[i];
	options.series[i].data = dataArr[i];
}

删除多余图例

var chart=new Highcharts.Chart(options);
       for(var i=0; i < 10;i++){
		if(chart.series.length > newKeylist.length){
			var j=chart.series.length;
			chart.series[j-1].remove();							
		}
	}

动态操作真的很方便，增加了程序的扩展性，让用户很方便的实现需求。