我有关于如何使用DOM进行向下钻取和向上钻取的上一个问题的答案,请访问This Post。但是我在Here处找到了一个简单易懂的highcharts.js版本,如您所见,该代码更易于理解。
现在,您可以让我知道如何启用按钮来进行This Demo中的向下钻取和向上钻取吗?
$(function () {
var chart;
function drawChart1() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Basic drilldown'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
credits: {
enabled: false
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}]
}
});
$("#animals").on("click", function () {
$(this).addClass('disabled');
$("#overview").removeClass('disabled');
});
$("#fruits").on("click", function () {
$(this).addClass('disabled');
$("#overview").removeClass('disabled');
});
$("#overview").on("click", function () {
$(this).addClass('disabled');
$("#animals").removeClass('disabled');
$("#fruits").removeClass('disabled');
});
}
drawChart1();
});
最佳答案
好吧,这不是API的一部分,但是您已经注意到,要深入研究,您需要调用chart.drillUp()
。要向下钻取,则有所不同,具体取决于您要在何处进行向下钻取。
简短的调用方法:chart.xAxis[0].drilldownCategory(category_index);
,请参见:http://jsfiddle.net/vncnwd66/2/
但是,有一个限制:您不能从A的第二级向下钻取到B的第二级。首先,您需要向上钻取,然后向下钻取到另一个第二级。