我使用高图来绘制饼图，并且要求是当我们点击图表的一部分时，需要向下钻取到其他级别。
我需要向下钻取3到4级。
例如，如果我点击它时为服装创建图表，则会深入查看包含服装类别的图表，例如男士服装，女士服装，儿童服装等。（等级2）
在High Charts官方网站（http://www.highcharts.com/demo/pie-drilldown/）
上给出的这个工作正常1级和示例但我想要更深层次的深入钻取，就像现在我点击女性服装一样，它会深入到女性服装类别，如包包，太阳镜，手表，收入等。
任何人都可以帮助我:(
答案 0 :(得分：2)
不确定这是否对您有所帮助。但我认为使用服务器端的数据实现这一点会更容易。您可以更改饼图的数据，如下所示，可以将您带到任何级别。您只需要确定一个标识，以确定您所在的级别。
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
series: [{
data: myInitialDataArray, // make sure each data point has an id
point: {
events: {
click: function () {
$.post('/get/data/url/' + this.id, function(data) {
// you may need to format your data here
// Set the level here. e.g Level 1, 2 or 3 and then depending on that you can also change the url also or any other logic
chart.series[0].setData(data);
});
}
}
}
}]
});
答案 1 :(得分：0)
我猜你已经得到了答案。但它可能对其他人有帮助。
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div>
<button id="pie">reset</button>
JavaScript部分
var chart;
$(document).ready(function() { /*begin chart render*/
var colors = Highcharts.getOptions().colors,
categories = ['The Americas', 'Asia Pacific', 'Europe & Africa'],
//name = 'Sectors',
data = [{
name: 'A-1',
y: 55,
color: colors[0],
drilldown: {
//begin alcohol
name: 'A-1',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [122252, 3516, 4036, 3557, 4021, 3624, 3847],
color: colors[0],
data: [{
y: 33.06,
name: 'A',
drilldown: {
name: 'Budweiser',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [10838, 11349, 11894, 11846, 11878, 11662, 11652, 11438, 11833, 12252],
color: colors[0]
}},
{
y: 10.85,
name: 'B',
drilldown: {
name: 'Heinekein',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2266, 2396, 2431, 2380, 2357, 3516],
color: colors[0]
}},
{
y: 7.35,
name: 'C',
drilldown: {
name: 'Jack Daniels',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [1583, 1580, 1612, 4036],
color: colors[0]
}},
{
y: 2.41,
name: 'D',
drilldown: {
name: 'Johnnie Walker',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [1649, 1654, 1724, 3557],
color: colors[0]
}},
{
y: 2.41,
name: 'E',
drilldown: {
name: 'Moet & Chandon',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2470, 2445, 2524, 2861, 2991, 3257, 3739, 3951, 3754, 4021],
color: colors[0]
}},
{
y: 2.41,
name: 'F',
drilldown: {
name: 'Smirnoff',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [2594, 2723, 5600, 2975, 3097, 3032, 3379, 3590, 7350, 3624],
color: colors[0]
}},
{
y: 2.41,
name: 'G',
drilldown: {
name: 'Corona',
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
data: [3847],
color: colors[0]
}}],
}},
{
name: 'B-1',
y: 11.94,
color: colors[2],
drilldown: {
name: 'B',
categories: ['A-2', 'B-2', 'C-2'],
color: colors[2],
data: [{
y: 33.06,
name: 'A',
drilldown: {
name: 'A',
categories: ['A', 'B'],
data: [4444, 6666],
color: colors[3]
},
},
{
name: 'B',
y: 10.85,
drilldown: {
name: 'B',
categories: ['A', 'B'],
data: [22222, 6005],
color: colors[3]
},
},
{
name: 'C',
y: 7.35,
drilldown: {
name: 'C',
categories: ['2011'],
data: [3605],
color: colors[3]
}}],
}},
];
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
/* changes bar size */
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 10,
shadow: false,
backgroundColor: '#e2dfd3'
},
title: {
text: 'Pie Test'
},
subtitle: {
text: 'Pie Chart Triple Breakdown'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: 'Total Brand Value',
categories: categories
}
},
//drilldown plot
plotOptions: {
pie: {
cursor: 'pointer',
allowPointSelect: true,
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
point: {
events: {
click: function() {
var chart = this.series.chart,
drilldown = this.drilldown;
if (drilldown) { // drill down
chart.setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
}
}
}
},
dataLabels: {
enabled: true,
color: '#000',
//label colors
connectorColor: '#000',
// connector label colors
formatter: function() {
return '<b>' + this.point.name + '</b>: ' + this.y;
}
}
}
},
//formatting over hover tooltip
tooltip: {
formatter: function() {
var point = this.point,
s = point.name + ':<b>' + this.y + '% market share</b><br/>';
if (point.drilldown) {
s = point.name + ':<b>' + this.y + '222</b><br/>';
s += 'Click to view ' + point.name + ' versions';
} else {
s = point.name + ':<b>' + this.y + '333</b><br/>';
s += 'Click to return to browser brands';
}
return s;
}
},
credits: {
enabled: false
},
series: [{
name: name,
data: data,
/* changes bar size */
pointPadding: -0.3,
borderWidth: 0,
pointWidth: 15,
shadow: false,
color: 'black' //Sectors icon
}],
exporting: {
enabled: false
}
}, function(chart){
chart.upper = [];
var up = false;
chart.setChart = function(name, categories, data, color) {
//chart.xAxis[0].setCategories(categories);
if (name === true && chart.upper.length) {
chart.series[0].remove();
chart.addSeries( chart.upper.pop() );
if( chart.upper.length === 0 ) {
$("#pie").hide('up');
up = false;
}
return true;
}
if (up === false) {
$("#pie").show().bind('click', function(){ chart.setChart(true); });
up = true;
}
chart.upper.push( chart.series[0].options );
chart.series[0].remove();
chart.addSeries({
name: name,
data: data,
color: color || 'white'
});
}
});
});