我钻了“柱形图”。 ＆安培;现在我想深入了解“饼图”
我显示饼图的代码如下，
$(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
}]
});
});
});
我该如何深入研究？
向下钻取之后它应该仅显示饼图。那么我应该在代码abve中做些什么呢？
至少只是给我一些饼图中的钻取参考链接，以便我可以更喜欢那个。
答案 0 :(得分：4)
您可以通过两种方法深入查看饼图。
here是我的Jsfiddle链接。 我在饼图上钻了下来以显示柱形图 要向下钻取饼图，您需要的是所单击的切片。
做你需要的是，
plotOptions: {
pie: {
point: {
events: {
click: function() {
//logic for drill down goes here
}
}
}
}
},
注意：如果您在同一图表中向下钻取..
如果您要深入到不同的图表类型，还需要该图表类型的绘图选项
我希望这会有所帮助
干杯：）
答案 1 :(得分：3)
<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>
答案 2 :(得分：0)
Rahul，看看这段代码。它只是样本
$(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
}]
});
});