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.