使用json数组对象，我想显示3级钻取列highchart： 在1级：在此，我想显示守卫者-共5个守卫者 那里（1,2,3,4,5）。 在2级中：在此我要在1级中显示区域ID- 我单击wardid：1，该wardid：1相关的areaid将进入2级。 在3级：在此，我想显示干废物和湿废物的数量-在 当我单击areaid：15时该2级，该areaid：15相关 干废和湿废数量将与日期一起显示
这是实际数据，
var data = [
{
"solidwastecollectionid": 50,
"areaid": 25,
"wardid": 5,
"collectiondate": 1501698600000,
"drywaste": 11.23,
"wetwaste": 12.47,
"collectionqty": 23.7
},
{
"solidwastecollectionid": 47,
"areaid": 22,
"wardid": 5,
"collectiondate": 1501698600000,
"drywaste": 13.2,
"wetwaste": 10.4,
"collectionqty": 23.6
},
{
"solidwastecollectionid": 46,
"areaid": 21,
"wardid": 4,
"collectiondate": 1501698600000,
"drywaste": 13.02,
"wetwaste": 5.38,
"collectionqty": 18.4
},
{
"solidwastecollectionid": 45,
"areaid": 20,
"wardid": 4,
"collectiondate": 1501698600000,
"drywaste": 10.22,
"wetwaste": 4.98,
"collectionqty": 15.2
},
{
"solidwastecollectionid": 44,
"areaid": 19,
"wardid": 4,
"collectiondate": 1501698600000,
"drywaste": 15.3,
"wetwaste": 3.5,
"collectionqty": 18.8
},
{
"solidwastecollectionid": 43,
"areaid": 18,
"wardid": 3,
"collectiondate": 1501698600000,
"drywaste": 9.9,
"wetwaste": 11.7,
"collectionqty": 21.6
},
{
"solidwastecollectionid": 42,
"areaid": 17,
"wardid": 3,
"collectiondate": 1501698600000,
"drywaste": 13.2,
"wetwaste": 3.3,
"collectionqty": 16.5
},
{
"solidwastecollectionid": 41,
"areaid": 16,
"wardid": 3,
"collectiondate": 1501698600000,
"drywaste": 11.9,
"wetwaste": 5.4,
"collectionqty": 17.3
},
{
"solidwastecollectionid": 38,
"areaid": 13,
"wardid": 3,
"collectiondate": 1501698600000,
"drywaste": 9.4,
"wetwaste": 15,
"collectionqty": 24.4
},
{
"solidwastecollectionid": 37,
"areaid": 12,
"wardid": 3,
"collectiondate": 1501698600000,
"drywaste": 10.6,
"wetwaste": 7.3,
"collectionqty": 17.9
},
{
"solidwastecollectionid": 36,
"areaid": 11,
"wardid": 2,
"collectiondate": 1501698600000,
"drywaste": 11.2,
"wetwaste": 11.4,
"collectionqty": 22.6
},
{
"solidwastecollectionid": 35,
"areaid": 10,
"wardid": 2,
"collectiondate": 1501698600000,
"drywaste": 12.1,
"wetwaste": 5,
"collectionqty": 17.1
},
{
"solidwastecollectionid": 34,
"areaid": 9,
"wardid": 2,
"collectiondate": 1501698600000,
"drywaste": 2.06,
"wetwaste": 19.34,
"collectionqty": 21.4
},
{
"solidwastecollectionid": 31,
"areaid": 6,
"wardid": 2,
"collectiondate": 1501698600000,
"drywaste": 4.89,
"wetwaste": 11.41,
"collectionqty": 16.3
},
{
"solidwastecollectionid": 30,
"areaid": 5,
"wardid": 2,
"collectiondate": 1501698600000,
"drywaste": 8.84,
"wetwaste": 17.66,
"collectionqty": 26.5
},
{
"solidwastecollectionid": 29,
"areaid": 4,
"wardid": 1,
"collectiondate": 1501698600000,
"drywaste": 9,
"wetwaste": 15.9,
"collectionqty": 24.9
},
{
"solidwastecollectionid": 28,
"areaid": 3,
"wardid": 1,
"collectiondate": 1501698600000,
"drywaste": 12.67,
"wetwaste": 6.73,
"collectionqty": 19.4
},
{
"solidwastecollectionid": 27,
"areaid": 2,
"wardid": 1,
"collectiondate": 1501698600000,
"drywaste": 11.78,
"wetwaste": 11.02,
"collectionqty": 22.8
},
{
"solidwastecollectionid": 25,
"areaid": 25,
"wardid": 5,
"collectiondate": 1501612200000,
"drywaste": 9.44,
"wetwaste": 6.16,
"collectionqty": 15.6
},
{
"solidwastecollectionid": 24,
"areaid": 24,
"wardid": 5,
"collectiondate": 1501612200000,
"drywaste": 7.19,
"wetwaste": 15.21,
"collectionqty": 22.4
},
{
"solidwastecollectionid": 23,
"areaid": 23,
"wardid": 5,
"collectiondate": 1501612200000,
"drywaste": 10.78,
"wetwaste": 14.72,
"collectionqty": 25.5
},
{
"solidwastecollectionid": 21,
"areaid": 21,
"wardid": 4,
"collectiondate": 1501612200000,
"drywaste": 10.9,
"wetwaste": 5.2,
"collectionqty": 16.1
},
{
"solidwastecollectionid": 18,
"areaid": 18,
"wardid": 3,
"collectiondate": 1501612200000,
"drywaste": 10.2,
"wetwaste": 10.2,
"collectionqty": 20.4
},
{
"solidwastecollectionid": 17,
"areaid": 17,
"wardid": 3,
"collectiondate": 1501612200000,
"drywaste": 9.3,
"wetwaste": 9.3,
"collectionqty": 18.6
},
{
"solidwastecollectionid": 14,
"areaid": 14,
"wardid": 3,
"collectiondate": 1501612200000,
"drywaste": 13.3,
"wetwaste": 9.3,
"collectionqty": 22.6
},
{
"solidwastecollectionid": 13,
"areaid": 13,
"wardid": 3,
"collectiondate": 1501612200000,
"drywaste": 8.2,
"wetwaste": 10.1,
"collectionqty": 18.3
},
{
"solidwastecollectionid": 12,
"areaid": 12,
"wardid": 3,
"collectiondate": 1501612200000,
"drywaste": 4.05,
"wetwaste": 12.05,
"collectionqty": 16.1
},
{
"solidwastecollectionid": 11,
"areaid": 11,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 11.9,
"wetwaste": 11.8,
"collectionqty": 23.7
},
{
"solidwastecollectionid": 10,
"areaid": 10,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 2.2,
"wetwaste": 17,
"collectionqty": 19.4
},
{
"solidwastecollectionid": 9,
"areaid": 9,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 11.2,
"wetwaste": 5,
"collectionqty": 16.2
},
{
"solidwastecollectionid": 8,
"areaid": 8,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 8.9,
"wetwaste": 5.4,
"collectionqty": 14.3
},
{
"solidwastecollectionid": 7,
"areaid": 7,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 6.8,
"wetwaste": 21.3,
"collectionqty": 28.1
},
{
"solidwastecollectionid": 6,
"areaid": 6,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 10.7,
"wetwaste": 11.1,
"collectionqty": 21.9
},
{
"solidwastecollectionid": 5,
"areaid": 5,
"wardid": 2,
"collectiondate": 1501612200000,
"drywaste": 15.05,
"wetwaste": 9.15,
"collectionqty": 24.2
},
{
"solidwastecollectionid": 4,
"areaid": 4,
"wardid": 1,
"collectiondate": 1501612200000,
"drywaste": 11.2,
"wetwaste": 9.1,
"collectionqty": 21.2
},
{
"solidwastecollectionid": 3,
"areaid": 3,
"wardid": 1,
"collectiondate": 1501612200000,
"drywaste": 12.5,
"wetwaste": 6.2,
"collectionqty": 18.7
},
{
"solidwastecollectionid": 2,
"areaid": 2,
"wardid": 1,
"collectiondate": 1501612200000,
"drywaste": 9,
"wetwaste": 11.2,
"collectionqty": 21.2
},
{
"solidwastecollectionid": 1,
"areaid": 1,
"wardid": 1,
"collectiondate": 1501612200000,
"drywaste": 10.2,
"wetwaste": 5.3,
"collectionqty": 15.5
}
];
答案 0 :(得分：0)
您需要为图表创建自定义明细：
chart: {
type: 'column',
events: {
drillup: function() {
if (this.xAxis[0].isDatetimeAxis) {
this.xAxis[0].update({
type: 'linear'
});
}
},
drilldown: function(e) {
if (!e.seriesOptions) {
var chart = this,
drilldown1,
drilldown2;
if (e.point.series.name === 'wardid') {
drilldown1 = {
name: 'areaid',
data: (function() {
var data = [];
JSONdata.forEach(function(el) {
if (e.point.y === el.wardid) {
data.push({
y: el.areaid,
drilldown: true
});
}
});
return data;
})()
}
chart.addSeriesAsDrilldown(e.point, drilldown1);
} else {
drilldown1 = {
name: 'drywaste',
data: [{
y: JSONdata[e.point.index].drywaste,
x: JSONdata[e.point.index].collectiondate
}]
}
drilldown2 = {
name: 'wetwaste',
data: [{
y: JSONdata[e.point.index].wetwaste,
x: JSONdata[e.point.index].collectiondate
}]
}
chart.addSingleSeriesAsDrilldown(e.point, drilldown1);
chart.addSingleSeriesAsDrilldown(e.point, drilldown2);
chart.xAxis[0].update({
type: 'datetime'
});
}
chart.applyDrilldown();
}
}
}
}
实时演示：http://jsfiddle.net/BlackLabel/q1n7r6oh/
API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown