这是动态数据的解决方案 Highcharts Column Chart Drilldown
但是我有3级钻取。这是我的代码:
var XMonths = "Jan|Feb|March".split("|");
var XStates = "Asia|America|Africa".split("|");
var XNames = "Jack|Mary|John".split("|");
var YMonths = "10|12|8".split("|").map(Number);
var YStates = "1|2|3".split("|").map(Number);
var YNames = "100|200|300".split("|").map(Number);
var chart,
colors = Highcharts.getOptions().colors;
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories);
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
$(document).ready(function () {
var categories = XMonths,
data = [{
y: YMonths[0],
color: colors[0],
drilldown: {
categories: XStates,
data : [{
y: YStates[0],
color: colors[0],
drilldown: {
categories: XNames,
data: YNames,
color: colors[0]
}
},
{
y: YStates[1],
color: colors[1],
drilldown: {
categories: XNames,
data: YNames,
color: colors[1]
}
},
{
y: YStates[2],
color: colors[2],
drilldown: {
categories: XNames,
data: YNames,
color: colors[1]
}
}]
}
}, {
y: YMonths[1],
color: colors[1],
drilldown: {
categories: XStates,
data: YStates,
color: colors[1]
}
}, {
y: YMonths[2],
color: colors[2],
drilldown: {
categories: XStates,
data: YStates,
color: colors[2]
}
}];
chart = new Highcharts.Chart({
lang: {
drillUpText: '◁ Back to {series.name}'
},
chart: {
renderTo: 'visitReport',
type: 'column'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Numbers'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
var drilldown = this.drilldown;
if (drilldown) { // drilldown
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // not drilldown
setChart(name, categories, data);
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function () {
return this.y;
}
}
}
},
tooltip: {
formatter: function () {
var point = this.point,
s = this.x + ':<b>' + this.y + '</b><br/>';
return s;
}
},
series: [{
name: name,
data: data,
color: 'white'
}],
exporting: {
enabled: false
}
});
});
}
我不知道每个月(第2级)和每个州(第3级)的下钻次数是多少 我应该如何设置“类别”数据动态?我可以创建一个通用函数来创建“类别”变量吗? 谢谢。