Desglose de Highcharts y tipo de gráfico de combinación

Me gustaría mezclar en mi columna de desglose (en la gráfica de niños) y en la spline como aquí: https://jsfiddle.net/lostrailler/Ljotp059/

Pero cuando lo bash, no tengo ambas cosas al mismo tiempo. Aquí está mi código:

var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column' }, title: { text: 'Scores par paliers' }, xAxis: { type: 'category', labels: { rotation: -45, align: 'right', style: { fontFamily: 'Verdana, sans-serif' } }, min: 0 }, yAxis: { title: { text: 'Score' }, max: 100, tickInterval: 10, min: 0 }, legend: { enabled: false }, plotOptions: { series: { borderWidth: 0, dataLabels: { enabled: true } } }, exporting: { enabled: true }, tooltip: { formatter: function() { if (this.point.drilldown) { var s = this.key +' : '+ this.y +' %'; } else { var s = this.key +' : '+ this.y + ''; } return s; } }, series: [{ name: 'Marches', colorByPoint: true, data: [ { name: 'Step 1', y: 89, drilldown: 'step1' }, { name: 'Step 2', y: 17, drilldown: 'step2' }] }], drilldown: { drillUpButton: { relativeTo: 'spacingBox', position: { y: 0, x: -50 } }, series: [ { id: 'step1', name: 'Step 1', type: 'column', data: [['Game 1', 100],['Game 2', 100],['Game 3', 100]] }, { id: 'step2', name: 'Step 2', type: 'column', data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]] }, { id: 'step1', name: 'Step 1', type: 'spline', data: [['Game 1', 83],['Game 2', 82],['Game 3', 79]] }, { id: 'step2', name: 'Step 2', type: 'spline', data: [['Game 1', 0],['Game 2', 100],['Game 3', 0]] }] } }); 

JsFiddle: https://jsfiddle.net/lostrailler/fe1zzwph/

Algunas ideas ?

Muchas gracias.

Puede usar la función de callback del evento de desglose para agregar nuevas series como su desglose: http://api.highcharts.com/highcharts#chart.events.drilldown

 drilldown: function(e) { var chart = this, drilldowns = chart.userOptions.drilldown.series, series = []; e.preventDefault(); Highcharts.each(drilldowns, function(p, i) { if (p.id.includes(e.point.name)) { chart.addSingleSeriesAsDrilldown(e.point, p); } }); chart.applyDrilldown(); } 

Puede usar addSingleSeriesAsDrilldown (), método similar a: http://api.highcharts.com/highcharts#Chart.addSeriesAsDrilldown

Pero puede agregar varias series como desglose con este método.

Aquí puedes ver un ejemplo de cómo puede funcionar:

http://jsfiddle.net/h5xjp8h5/12/

Saludos cordiales.

Intereting Posts