向下钻取两个步骤，在Highcharts中进行多项选择
I'm a newbie in this community so I'll try my best. I'm trying to perform a drilldown using Highcharts in a pie chart. The fact is that I want to develop some code that allows me to:
我是这个社区的新手，所以我会尽我所能。我正在尝试使用饼图中的Highcharts进行深入分析。事实是，我想开发一些代码，允许我：
- In a first click select multiple charts (or slices from a pie)
- 在第一次单击时选择多个图表（或饼图中的切片）
- In a second click drilldown the pie to view the drilldown series.
- 在第二次点击向下钻取饼图以查看向下钻取系列。
Here it goes with my code (where I can only perform multiple selections when the drilldown is done, not before):
这里是我的代码（我只能在完成下钻时执行多项选择，而不是之前）：
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
series: {
point: {
events: {
click: function (event) {
this.slice(null);
}
}
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
Thanks for your help mates!
谢谢你的帮助伙伴们！
1 个解决方案
#1
1
Using async drilldown (API) it is possible to add more series as a drilldown. Check state of a point and if it was already selected, then this means that selected point was clicked and drilldown should be performed.
使用async drilldown（API）可以添加更多系列作为明细。检查点的状态以及它是否已被选中，这意味着单击了选定的点并应执行向下钻取。
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions && e.point.selected) {
var chart = this,
points = chart.getSelectedPoints(),
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
}
};
Highcharts.each(points, function (p) {
chart.addSingleSeriesAsDrilldown(p, drilldowns[p.name]);
});
chart.applyDrilldown();
}
},
drillup: function (e) {
var chart = this,
points = [];
setTimeout(function () {
points = chart.getSelectedPoints();
Highcharts.each(points, function (p) {
// unselect points from previous drilldown
p.selected = false;
p.setState('', true);
});
}, 0);
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
allowPointSelect: true,
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: []
}
});
});
JSFiddle: http://jsfiddle.net/7hmn093d/2/
JSFiddle：http：//jsfiddle.net/7hmn093d/2/
更多相关文章
- 单击文件输入后，Fancybox正在关闭
- 如何使用jQuery捕获对href值的单击
- 单击列表项时如何编写内容？ [重复]
- 如何通过多次单击在画布上显示多个箭头
- 单击链接中的复选框会导致以下链接——我如何避免这种情况?
- 我无法理解为什么我的代码中的单击选择文本
- 当锚标记被单击时，角值从一个页面传递到另一个页面
- 单击动态创建的复选框时，通过AJAX / PHP更新MySQL中的值？
- 单击保存按钮（PHP和MSQL）时如何保存记录列表