|
需求描述
在一个类别柱状图上，点击柱状图上的某一类后可显示该类具体的数据。
钻取的定义
钻取是改变维的层次，变换分析的粒度。包括向上钻取(drill up)和向下钻取(drill down).drill up 是在某一维上将低层次的细节数据概括到高层次的汇总数据，或者减少维数；而drill down则相反，它从汇总数据深入到细节数据进行观察或增加新维。
基本实现方式
Highcharts是一个用纯JavaScripts编写的一个图表库。可简单便捷的在web网站添加有交互性的图表。 实现效果图： 下钻前：  下钻后：  echarts Echarts本身并没有像HighCharts直接实现柱状图的下钻功能，但Echarts可以通过setOptions间接实现下钻功能。 通过点击月份柱状图的某一月，触发点击事件，点击事件的功能是销毁该Echarts实例，并会向后台请求该月份的数据，当后台返回数据后，进行重新初始化Echarts实例。 实现效果如下：
 
实现细节
前端部分
html代码
back to things
js代码
var drillDown = {
getOption : function () {
var option = null;
option = {
title: {
text: 'Basic drilldown',
left: 'center'
},
legend: {
left: 'left',
data: ['category']
},
xAxis: {
type: 'category',
data: ['Animals', 'Fruits', 'Cars']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'category',
type: 'bar',
data: [5,2,4]
}
]
};
return option;
},
initChart : function (myChart,option) {
myChart.setOption(option);
myChart.on('click',function(object){
// 销毁之前的echarts实例
echarts.dispose(dom);
// 初始化一个新的实例
var myChart = echarts.init(dom);
// object为当前的这个echart对象，大家可以自己打印出来看看
// console.dir(object);
// $.ajax(
// type : 'get',
// url : interfaceUrl + '&category=' + object.name, // 此处可以替换为你的接口地址
// dataType : 'json',
// success : function (msg){
// option.xAxis.data = msg.xAxis;
// option.series[0].data = msg.yAxis[0];
// myChart.setOption(option, true);
// }
// );
console.dir(object.name);
if (object.name == "Animals"){
option.xAxis.data = [
'Cats','Dogs','Cows','Sheep','Pigs'
];
option.series[0].data = [
4,2,1,2,1
];
option.legend.data= ['Animals'];
option.series[0].name=['Animals'];
}
if (object.name == "Fruits"){
option.xAxis.data = [
'Apples','Oranges'
];
option.series[0].data = [
4,2
];
option.legend.data= ['Fruits'];
option.series[0].name=['Fruits'];
}
if (object.name == "Cars"){
option.xAxis.data = [
'Toyota','Opel','Volkswagen'
];
option.series[0].data = [
4,2,2
];
option.legend.data= ['Cars'];
option.series[0].name=['Cars'];
}
myChart.setOption(option, true);
});
},
};
后端接口
@RequestMapping("getCategory.do")
@ResponseBody
public ServerResponse addCategory(HttpSession session){
Map map = new HashMap();
ResultBean result = onGetCategory();
out.println("result==>" + result);
map.put("xAxis", result.category());
map.put("yAxis", result.value());
return map;
}
}
@RequestMapping("getNameAndNumByCategory.do")
@ResponseBody
public ServerResponse getNameByCategory(HttpSession session,String Category){
Map map = new HashMap();
ResultBean result = getNameByCategory(Category);
out.println("result==>" + result);
map.put("xAxis", result.Name());
map.put("yAxis", result.value());
return map;
}
}
接口定义
1.获得全部种类及数量 /getCategory.do
request / response { “xAxis”:[“Animals”,”Fruits”,”Cars”], “yAxis”:[5,2,4] }
2.获得每一类的详细内容 /getNameAndNumByCategory.do
request category response { “xAxis”:[“Cats”,”Dogs”,”Cows”,”Sheep”,”Pigs “], “yAxis”:[4,2,1,2,1] }
这里没有具体实现全部代码，而是使用简单的伪代码描述了后台接口实现思路。
数据要求
数据表可以可以按如下设计：
IDcategorynamenum1AnimalsCats42AnimalsDogs23AnimalsCows14AnimalsSheep25AnimalsPigs16FruitsApples47FruitsOranges28carsToyota49carsOpel210carsVolkswagen2
总结
以上简要叙述了需求以及实现的基本思想。使用静态数据实现了一个样例，具体实现还要后端接口的配合这里介绍了接口的设计思想以上内容参考了折线图下钻功能的实现https://github.com/phping1/echarts3-line-drilldown 查看本项目可访问https://github.com/LiFH/bar-drilldown-master.git
|