highcharts中利用ajax传数据以及使用

1 highcharts简介

	兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库； 成熟稳定的商业软件，72 个全球 100 强企业共同的信任。
	详情见官网[https://www.hcharts.cn/docs/start-introduction]

2. 利用ajax传的数据画图

普通图

首先后台需要向前端传过来json个事数据；
例如：data={“name:”name_data,"y:"y_data,}
name_data=["李明"，“张三”，“李四”]
y_data =[2,5,6]
分别对应为李明有2个，张三有5个，李四有6个；

遍历data，重新封装成highcharts需要的data格式为：
data_use = [{“李明”，2}{“张三”，5}{“李四”，6}]

随后使用chart.series[0].setData(data_use);

chart即为图对象；
使用chart = window.document.getElementByID("")获得；

即可完成；

下钻属性的图
贴上自己的一段代码：

		var data = data  //ajax获取的data
                 var typenum = data.typenum;
                 var type = data.type;
                 var next = data.nextdata; //next的封装格式类似于第一种方式；
                 for(var i=0;i<typenum.length;i++){
                     if(typenum[i]>0){
                          data1.push({"name": type[i], "y": typenum[i], "drilldown": type[i]});
                          data2.push({id: type[i], name: type[i], data: next[i]})
                     }
                 }
然后使用：

chart1.options.drilldown.series = data2;
                 chart1.series[0].setData(data1);

这样就可以出现下钻效果；

放出需要放数据的位置：

plotOptions: {
				pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						depth: 35,
						dataLabels: {
								enabled: true,
								//format: '<h5 style="font-size: 15px;color: #1E90ff">{point.name} : {point.percentage:.1f}%</h5>'
                                formatter: function() {
                         
                                return this.y > 0 ? '<span style="color: ' + this.point.color + ';font-size:'+15+"px"+';font-family:Times New Roman;font-weight: 500">' + this.point.name + '：' +Highcharts.numberFormat(this.percentage, 2)+ '%</span>':null;
                            }
						}
				}
		},
		series: [{
				type: 'pie',
				name: '****'
		}],
        drilldown: {
        }

本人也是菜鸟，大家一块交流进步