javascript 如何在 Highchart 的 Piechart 中进行 Drilldown？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13816865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do Drilldown in Piechart of Highchart?
提问by Rahul
I have Drilled the "Column chart". & Now I want to Drill down the "Pie chart"
我已经钻了“柱状图”。& 现在我想深入研究“饼图”
my code for showing Pie chart is as below,
我显示饼图的代码如下，
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
}
}
}
},
series:
[{
type:'pie',
data: model.mixchart
}]
});
});
});
How can I do drilldown in this ?
我怎样才能在这方面进行深入研究？
After Drilldown It should show the Pie chart only. So what should I do for that in the code abve?
钻取之后它应该只显示饼图。那么在上面的代码中我应该怎么做呢？
At least just Give me some reference links for drilldown in Pie chart so that I can Prefer that one.
至少给我一些在饼图中向下钻取的参考链接，以便我可以更喜欢那个。
回答by Nagesh Salunke
There are two methods you can drill down pie chart.
有两种方法可以向下钻取饼图。
- Either you can modify same chart data
- You can draw new pie chart using the clicked refrence to previous chart.
- 您可以修改相同的图表数据
- 您可以使用单击的上一个图表的引用来绘制新的饼图。
hereis my Jsfiddle link.
I have drilled down the pie chart to show column chart.
To drill down a pie chart,What you need is the clicked slice.
这是我的 Jsfiddle 链接。我已经向下钻取饼图以显示柱形图。
要向下钻取饼图，您需要的是单击的切片。
to do that what you need is,
要做到这一点，你需要的是，
plotOptions: {
pie: {
point: {
events: {
click: function() {
//logic for drill down goes here
}
}
}
}
},
Note: If you are drilling down in the same chart..
You will also need plot options for that chart type,If you are drilling down to different chart type.
I hope this helps.
cheers :)
注意：如果您在同一个图表中向下钻取......
如果您向下钻取到不同的图表类型，您还需要该图表类型的绘图选项。
我希望这有帮助。
欢呼:)
回答by Santosh Mishra
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
backgroundColor: '#e2dfd3',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
//credits for highcharts
credits: {
enabled: false
},
title: {
text: 'Country/Region',
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
borderWidth: 0, // border color control
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) { // drill down
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
} else { // restore
setChart(name, categories, data);
}
}
},
dataLabels: {
enabled: true,
color: '#000', //label colors
connectorColor: '#000', // connector label colors
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Country/Region',
data: [
{
name:'United States',
y: 45.0,
},{
name:'Germany',
y: 26.8
},{
name: 'France',
y: 12.8,
sliced: true,
selected: true,
/*drilldown: {
name: ['Disney'],
categories: ['2001', '2002', '2003','2004','2005','2006','2007','2008','2009','2010','2011'],
data: [32591, 29256, 28036, 27113, 26441, 27848, 29210, 29251, 28447, 28731],
color: colors[12]
},*/
},{
name:'Japan',
y: 8.5
},{
name:'United Kingdom',
y: 8.5
},{
name:'Switzerland',
y: 8.5
},{
name: 'South Korea',
y: 6.2
},{
name:'Italy',
y: 6.2
},{
name:'Canada',
y: 0.7
},{
name:'Finland',
y: 0.7
},{
name:'Netherlands',
y: 0.7
},{
name:'Spain',
y: 0.7
},{
name:'Sweden',
y: 0.7
}
]
}]
}/**/
});
});
</script>
回答by Dashang
Rahul , check out this code. its just sample
拉胡尔，看看这个代码。它只是样品
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: { renderTo: 'container', type: 'bar'},
title: { text: '' },
xAxis: {
categories: model.buckets,
},
yAxis: {
title: { text: '' }
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
var range=this.category[0];
if (step==0) { // drill down
$.ajax({
type: 'POST',
url: root + "analytics/standard_prospects_prospectaging/?json",
data: { range: range, what: 'drill' },
success: function (o) {
setChart("", o.buckets, o.pcounts, '#e48801');
rebind(o.aging);
step = step + 1;
},
dataType: "json"
});
} else { // restore
console.log(this);
$.ajax({
type: 'POST',
url: root + "analytics/standard_prospects_prospectaging/?json",
data: { oppname: range },
success: function (o) {
window.location.href = "/prospects/index/" + o.oppid;
},
dataType: "json"
});
}
}
}
},
}
},
series: [{
name: 'Prospect Aging',color:'#e48801',
data: model.pcounts
}]
});
});
