向下钻取多个级别的Highchart

我们喜欢在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) } }); 

Answer 1

这是可能的，只需添加所有钻取系列，然后在点和钻取之间创建连接。 请参阅： 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] }] } 

Answer 2

对于多层饼图，请查看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] }] } }) }); 

Answer 3

     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]]}]} 

Answer 4

这是一个保留轴上名称的示例。 （Drilldown适用于“动物”>“哺乳动物”）

向下钻取选项如下所示：

 drilldown: { series: [{ id: 'animals', data: [{ name: 'Mammals', y: 4, drilldown: 'mammals' }, ['Reptiles', 2], ['Vertebrates', 1] ] }, { id: 'mammals', data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]] }, ... 

http://jsfiddle.net/vcsqnr2z/

Answer 5

您必须为多个钻取编写自定义代码，我们可以通过在每个列（第一个图表）中存储数据系列并将此系列传递到下一个图表来实现这一点，依此类推

Answer 6

 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.):