Javascript HighChart动态向下钻取
我已经创建了一个图表,使用fiddle上给出的示例进行深入分析 当我点击第一级时,它通过使用成功地为下一级添加图表Javascript HighChart动态向下钻取,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我已经创建了一个图表,使用fiddle上给出的示例进行深入分析 当我点击第一级时,它通过使用成功地为下一级添加图表 chart.addSeriesAsDrilldown(e.point, series); 我的问题是,现在我想新添加的图表也有向下钻取。我不知道如何做到这一点。任何帮助都是感激的 我找到了解决这个问题的办法。事实上,当数据作为json从web服务中获取用于下一级深入分析时,我必须确保属性深入分析需要设置为true,这是我之前在进行一些研究后发现的。我在下面给出了一些json格
chart.addSeriesAsDrilldown(e.point, series);
我的问题是,现在我想新添加的图表也有向下钻取。我不知道如何做到这一点。任何帮助都是感激的
我找到了解决这个问题的办法。事实上,当数据作为json从web服务中获取用于下一级深入分析时,我必须确保属性深入分析需要设置为true,这是我之前在进行一些研究后发现的。我在下面给出了一些json格式的数据,并参考了fiddle上的示例 单击第一级时,我将转到web服务并获取数据
"{\"name\":\"Animals\",\"data\": [[\"Cows\", 2],[\"Sheep\", 3]],\"drilldown\": true}"
未启用下一级别的向下钻取。为了允许进一步向下钻取,我必须修改上述数据,如下所示,在中,我添加了属性向下钻取,使其为true
(name == "Animals") resp = "{\"name\":\"Animals\",\"data\": [{\"name\":\"Cows\", \"y\": 2, \"drilldown\": \"true\"},{\"name\":\"Sheep\",\"y\": 3,\"drilldown\":\"true\"}]}";
就这些,似乎很简单:)
如果我有时间,我会尝试在小提琴上创建样本,如果这样做,我会更新链接
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
{
name: 'Toyota',
y: 4,
drilldown: true
},
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
})
}))