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;i0){
                          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: '
{point.name} : {point.percentage:.1f}%
' formatter: function() { return this.y > 0 ? '' + this.point.name + ':' +Highcharts.numberFormat(this.percentage, 2)+ '%':null; } } } }, series: [{ type: 'pie', name: '****' }], drilldown: { }

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

你可能感兴趣的:(前端)