小白看过来!有关于highcharts 数据格式 以及案例 下钻

小白看过来!有关于highcharts 数据格式 以及案例 下钻

博主新手 最近做了一个highcharts下钻的报表 要求是一级下转 刚开始是导入highcharts常用的几个包highcharts.js，highcharts-zh_CN.js，exporting.js ,drilldown.js(这个是必须导入的 实现下钻的依赖包)
刚刚入手看了官方文档 当时只有各种案列 没有实际的 一切只能自己领悟 对我这种人太难 下面是我自己整理的几点
1、导入官方的样式 var chart = Highcharts.chart(‘container’,{
chart: {
type: ‘column’
},
title: {
text: ‘操作日志’
},
subtitle: {
},
xAxis: {
type: ‘category’,//根据name值显示到x轴
crosshair: true
},
yAxis: {
title: {
text: ‘操作日志’
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: ‘{point.y:.1f}%’
}
}
},
大概如上 我没贴完整 官网有
2、 highcharts 是一个div显示 所以你要创建一个div 并设置id给他

(我曾经犯傻待了10多分钟 一直想哪里错了 就是没写显示的div)
3、 绑定数据的方法有很多 我使用的是ajax绑定数据 这个地方真的很坑 我花了3、4个小时终于顿悟了 必须拼格式和官方的案例一样才能出数据
下面是自己案例
//日志操作图表
function selecet(){
var y=[];//数据
var ydata={};//json对象 //拼接格式

var y1=[]; //下钻总数据源  拼接出来的数据就变成了这种格式 [{ [ [],[] ]},{ [ [],[] ]}]
var ydata3=[];//数组		[]
var ydata2=[];//数组   下钻数据格式  ['',''],['','']
var ydata1={};//json对象 下钻必要
var mid;
$.ajax({
	url:'logAction_highchartsLog.action',
	data:{'dataA':$("#dateA").val(),'dataB':$("#dateB").val()},
	type:'post',
	dataType:'json',
	async:false,
	success:function(data){
		var log1=eval(data.highchartsLog);
		var log2=eval(data.highchartsLogchil);
		
		for(var i=0;i<log1.length;i++){
			ydata={"name":log1[i].text,"y":log1[i].time,"drilldown":log1[i].moduleid.substring(0,2)};
			y.push(ydata);
		//下钻数据
			for(var j=0;j<log2.length;j++){
				//截取id前两位进行比较  
				if(log1[i].moduleid.substring(0,2)==log2[j].moduleid.substring(0,2)){
					ydata3.push(log2[j].text,log2[j].time);//格式 ['':数值]
					mid=log1[i].moduleid.substring(0,2);//取id
				}
				if(ydata3.length!=0){
					ydata2.push(ydata3);//拼接格式  [ [],[] ]
					ydata3=[]; //清空
				}
			}
			if(ydata2.length!=0){
				ydata1={id:mid.substring(0,2),data:ydata2};//json数据格式 { id:'' ,data :[ [] ,[] ] }
				y1.push(ydata1);//数据格式  [ { id:'' ,data :[ [] ,[] ] },{ id:'' ,data :[ [] ,[] ] } ]
			}
			ydata2=[];
		}
		console.log(y1);
		var chart = Highcharts.chart('container',{
			chart: {
				type: 'column'
			},
			title: {
				text: '操作日志'
			},
			subtitle: {
			},	
			xAxis: {
				type: 'category',//根据name值显示到x轴
				crosshair: true
			},
			yAxis: {
				title: {
					text: '操作日志'
				}
			},
			legend: {
				enabled: false
			},
			plotOptions: {
				series: {
					borderWidth: 0,
					dataLabels: {
						enabled: true,
						format: '{point.y:.1f}%'
					}
				}
			},
			tooltip: {
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
				'<td style="padding:0"><b>{point.y}次</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				series: {
					borderWidth: 0,
					dataLabels: {
						enabled: true
					}
				}
			},
			series: [{
				colorByPoint: true,
				name: '日志操作统计',
				data:y,
			}],
			//下钻 数据  id 必须一致
			drilldown:{
				activeAxisLabelStyle: {
					textDecoration: 'none',
					fontStyle: 'italic'
				},
				series:
					y1
			}
		});
	},
});

}
我下钻使用的id 之所以截取是因为我获取的数据是无限极分类 例： 11 -1
21 -1
1101 11
110101 1101
2101 21
210101 2101
所以我使用了截取 你们可以按自己需要拼接id

最后说一点最重要的 格式一定要拼对！！！！