javascript - tipos - highcharts test data

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

Question

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

Pero cuando lo intento, no tengo los dos 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 +'' : <b>''+ this.y +'' %</b>'';
} else {
var s = this.key +'' : <b>''+ this.y + ''</b>'';
}
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.

Answer 1

Puede usar la función de devolución de llamada de eventos de profundización 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 puedes agregar series múltiples como desglose con este método.

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

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

Saludos cordiales.