我们喜欢在Highchart中的多个级别上向下钻取。 Highchart中是否有一个例子？
目前使用的代码：
$(div).highcharts({
chart: {type: 'column'},
credits: {enabled: false},
title: {text: title},
xAxis: {
categories: [
'Instroom',
'Rijdend',
'Úitstroom'
]
},
yAxis: {title: {text: ytitle}},
legend: {enabled: true},
plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}},
series: first,
drilldown: {
series: drillDownObject(second)
}
});
答案 0 :(得分：34)
可能，只需添加所有向下钻取系列，然后在点和向下钻取之间创建连接。请参阅：http://jsfiddle.net/6LXVQ/2/
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}]
}],
drilldown: {
series: [{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 4,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
答案 1 :(得分：7)
对于多级饼图，请查看http://jsfiddle.net/bge14m3a/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Deep 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: 'animals'
},{
name: 'Food',
y: 4,
drilldown: 'food'
}]
}],
drilldown: {
series: [{
id: 'food',
name: 'Food',
data: [{
name: 'Apple',
y: 1.5,
drilldown: 'apple'
},
['Banana', 1],
['Peer', 0.5],
['Pineapple', 1]
]
}, {
id: 'apple',
data: [['1/6' ,1],
['1/3' , 2],
['1/2' , 3]]
},{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 5,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 1],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
})
});
答案 2 :(得分：2)
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/drilldown.js"></script>
<script>
var chartSeriesData = [];
var chartDrilldownData = [];
$.ajax({
type: 'GET',
url: 'abc.json',
success: function(data) {
var agentJson = data;
for (var i = 0;i <agentJson.countryInfo.length; i++)
{
var series_name = agentJson.countryInfo[i].name;
var drill_id = agentJson.countryInfo[i].drilldown;
var series_data = agentJson.countryInfo[i].y;
var drill_data = agentJson.countryInfo[i].data;
chartSeriesData.push({
name: series_name,
y: parseFloat(series_data),
drilldown : drill_id
});
chartDrilldownData.push({
data : drill_data,
id: drill_id,
name: series_name,
});
}
/// END FOR LOOP
$('#countryInfo').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: {
text: 'Human Resources'
},
subtitle: {
text: ''
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '12px',
textShadow: "0px #ffffff"
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Country',
colorByPoint: true,
data: chartSeriesData
}],
drilldown: {
series: chartDrilldownData
}
});
}
});
</script>
and your json file look likes:
{"countryInfo":[{"name":"Firefox","y":4,"drilldown":"Firefox","data":[["desktop",1]]},{"name":"Chrome","y":176,"drilldown":"Chrome","data":[["desktop",1],["desktop",18]]}]}
答案 3 :(得分：1)
这是一个保留轴上名称的示例。 （Drilldown适用于＆＃34;动物＆＃34;＆gt;＆＃34;哺乳动物＆＃34;）
向下钻取选项如下所示：
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
}, {
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
},
...
答案 4 :(得分：0)
您必须为多次下钻编写自定义代码，我们可以通过在每列（第一个图表）中存储数据系列并将此系列传递到下一个图表等来实现此目的
答案 5 :(得分：-1)
this.EixoX = ["Jun/2016","Jul/2016","Ago/2016","Set/2016","Out/2016","Nov/2016","Dez/2016"];
this.EixoY = "Reais";
this.Class = "DivGraficoLinhaDoTempo";
this.Titulo = "Média de Vendas por Equipe";
this.Subtitulo;
this.ValoresBarras =[{
name:"ECLEIA",
data: [30000, 32000, 54000, 50000, 54000, 50000], //JAN, FEV, MAR, ABR, MAY, JUN
vendedores: [{name:"ECLEIAv1",data:[32000,40005,40005,27002,20002,70001]},{name:"ECLEIAv2",data:[30000,55000,45000,22000,32000,33001]}]
},{
name:"JOANA",
data: [43000, 12000, 34000, 4000, 30004, 4000],
vendedores: [{name:"JOANAv1",data:[72000,55005,70005,90002,70002,50001]},{name:"JOANAv2",data:[22000,50005,40005,40002,30002,66001]}]
},{
name:"GABRIELE",
data: [22000, 22000, 34000, 20004, 30004, 4000],
vendedores: [{name:"GABRIELEv1",data:[11000,30005,60005,40002,30002,30001],vendedores: [{name:"GABRIELEv1SUB1",data:[11000,30005,60005,40002,30002,30001]},{name:"GABRIELEv1SUB2",data:[60000,50005,40005,24502,55502,70001]}]},{name:"GABRIELEv2",data:[60000,50005,40005,24502,55502,70001]}]
},{
name:"FRANCISCO",
data: [54000, 12000, 30004, 4000, 30004, 4000],
vendedores: [{name:"FRANCISCOv1",data:[52000,60005,20005,11002,66002,40001]},{name:"FRANCISCOv2",data:[50000,56005,40005,25002,30002,38001]}]
}];
this.ValoresLinha = [{
name:"MÉDIA",
data: [54000, 12000, 30004, 4000, 30004, 4000]
}];
//ATRIBUTOS AUXILIARES
this.nivel;
this.indexmes;
this.indexvendedor;
this.drilldownniveis;
var drilldownTitle = "Equipe de ";
///UserCodeRegionStart:[User Functions] (do not remove this comment.)
var _this = this;
//var vetorNomesX = [];
var colors = Highcharts.getOptions().colors;
$(function () {
Highcharts.Tick.prototype.drillable = function () {}; //REMOVE LINKS DOS LABELS DO EIXO X(mes), pois cada mes possui "n" vendedores
var options = {
type:"column",
chart: {
renderTo: "container",
events: {
drilldown: function(e) {
//console.log(e.point);
chart.setTitle({ text: drilldownTitle + e.point.name });
},
drillup: function(e) {
chart.setTitle({ text: _this.Titulo });
}
}
},
title: {
text: _this.Titulo
},
subtitle: {
text: _this.Subtitulo
},
xAxis: {
categories: _this.EixoX
},
yAxis: {
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value,0);
}
},
title: {
text: _this.EixoY
}
},
plotOptions: {
column: {
cursor: "pointer",
point: {
events: {
click: function (e) {
_this.indexmes = e.point.x;
_this.indexvendedor = e.point.series.columnIndex;
//LÓGICA PARA AVANÇO DE NIVEIS
if(_this.drilldownniveis){
chart.setTitle({ text: drilldownTitle + _this.drilldownniveis[_this.indexvendedor].name });
_this.drilldownniveis = _this.drilldownniveis[_this.indexvendedor].drilldown;
}else{
chart.setTitle({ text: drilldownTitle + options.series[_this.indexvendedor].name });
_this.drilldownniveis = options.series[_this.indexvendedor].data[_this.indexmes].drilldown;
if(options.series[_this.indexvendedor].data[_this.indexmes].drilldown.length<=0){ //SE drilldown = 0 mesma coisa que não ter (undefined), então seto null!
_this.drilldownniveis = null;
}
}
//setChart de acordo com novas variaveis
if (_this.drilldownniveis) { // drill down
if(_this.drilldownniveis.length<=0){
_this.drilldownniveis = options.series;
}
var media = new Array(0,0,0,0,0,0,0); //ZERA ARRAY PARA PODER SOMAR VALORES
for(var x=0;x<_this.EixoX.length;x++){
$(_this.drilldownniveis).each(function(index, el) {
media[x] += el.data[x];
});
}
for(var x=0;x<_this.EixoX.length;x++){
media[x] = media[x]/_this.drilldownniveis.length;
}
_this.drilldownniveis.push({
"name": "MÉDIA",
"type":"spline",
"data": media
});
setChart(null, _this.EixoX, _this.drilldownniveis, null, 1);
_this.drilldownniveis.pop();
} else if(!_this.drilldownniveis){ // restore
chart.setTitle({ text: _this.Titulo });
setChart(null, _this.EixoX,options.series, null,2);
}else if(options.series){ // NÃO VAI ENTRAR AQUI
setChart(null, _this.EixoX,options.series, null,2);
}
}
}
}
}
},
legend: {
layout: "horizontal",
align: "right",
verticalAlign: "bottom",
floating: false,
borderWidth: 0
},
credits: {
enabled: false
},
series: []
// drilldown: {
// series: drill_down_data
// }
};
function setChart(name, categories, series, color, tipo) {
if(series.length<=0){
}else{
chart.xAxis[0].setCategories(categories);
while (chart.series.length > 0) {
chart.series[0].remove(true);
}
for (var i = 0; i < series.length; i++) {
var tipocolumn="column";
var marcador=[];
if(i==series.length-1 ){
tipocolumn="spline";
marcador= {
lineWidth: 2,
symbol: "circle",
lineColor: Highcharts.getOptions().colors[3],
fillColor: "white"
};
}
// chart.setTitle({ text: _this.Titulo });
chart.addSeries({
type: tipocolumn,
marker: marcador,
name: series[i].name,
data: series[i].data,
drilldown: series[i].drilldown,
color: colors[i]
});
}
}
}
//INICIALIZAÇÃO DAS SERIES DO Highcharts
$(_this.ValoresBarras).each(function(index, el) {
var drilldownseries =[];
var series = {
name: el.name,
type: "column",
data: []
};
for(var count=0;count<_this.EixoX.length;count++){
series.data.push({
"name": el.name,
"y": el.data[count],
"colors": colors[index],
"drilldown": drilldownseries
});
}
$(el.vendedores).each(function(index2, vendedor) {
drilldownseries.push({
"name" : vendedor.name,
"data" : vendedor.data,
"drilldown": vendedor.vendedores
});
});
options.series.push(series);
});
$(_this.ValoresLinha).each(function(index, el) {
var series = {
type: "spline",
name: "",
data: [],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: "white",
}
};
series.name = el.name;
series.data = el.data;
options.series.push(series);
});
var chart = new Highcharts.Chart(options);
/*$("#" + obj).highcharts({
});*/
});
///UserCodeRegionEnd: (do not remove this comment.):<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
如果有人需要，我创建一个多层次的多钻取：
[http://jsfiddle.net/alissondiel/vNfWk/253/][1]