javascript - real - highcharts grafica

HighCharts: desglose a una columna apilada

Question

¡Hola a todos! Estoy tratando de crear un determinado HighChart , pero no estoy seguro de cómo debo formatear mis datos de drilldown y no puedo encontrar ningún ejemplo en Internet.

Este JSfiddle muestra lo lejos que he llegado: http://jsfiddle.net/ma50685a/37/ .

HighChart se supone que visualiza los comentarios que se han eliminado. Las primeras dos barras son cantidades medias de comentarios filtrados. Cuando el desglose esté activado, habría apilado columnas de sitios web y cuatro categorías de por qué se ha filtrado un comentario (comentarios desagradables, correo no deseado, etc.).

¿Podría alguien ayudarme con esto o tener un ejemplo de cómo formatear los datos de investigación?

Answer 1

Acaba de olvidarse de incluir el drilldown js ( http://jsfiddle.net/ma50685a/38/ )

Agregue el siguiente script después de highstock: <script src="https://code.highcharts.com/modules/drilldown.js"></script>

EDITAR: Perdón por no haber leído la pregunta correctamente ... Esto funciona: http://jsfiddle.net/ma50685a/39/

Encontrado aquí: http://www.semantia.com.au/articles/highcharts-drill-down-stacked-columns/

Answer 2

Para tener una columna apilada necesita varias series, para tener varias series después del desglose debe agregar la serie de forma dinámica, por ejemplo, en un evento de desglose.

Cada propiedad del objeto a continuación representa una serie y está asociada con el nombre de la serie de nivel superior. El objeto ''1'' aparecerá después de hacer clic en la primera columna y abarcará 4 categorías.

var drilldowns = {
          1: {
            stacking: ''normal'',
            name: ''facebook'',
            color: Highcharts.getOptions().colors[0],
            data: [
              [''nasty comments'', 2],
              [''spam'', 3],
              [''category-3'', 10],
              [''category-4'', 15]
            ]
          },

          66: {
            name: ''second-column-drilldown'',
            data: [
              [''second-column-drilldown-point'', 10]
            ]
          }
        };

El siguiente objeto ''1'' se apilará con los datos del objeto drilldowns.1 :

var drilldowns2 = {
          1: {
            color: Highcharts.getOptions().colors[1],
            colorIndex: 1,
            stacking: ''normal'',
            name: ''youtube'',
            data: [
              [''nasty comments'', 5],
              [''spam'', 10],
              [''category-3'', 10],
              [''category-4'', 15]
            ]
          }
        };

Y finalmente la serie debe ser agregada y se inicia el desglose.

var series = drilldowns[e.point.name],
            series2 = drilldowns2[e.point.name],
            series3 = drilldowns3[e.point.name];

        this.addSingleSeriesAsDrilldown(e.point, series);
        this.addSingleSeriesAsDrilldown(e.point, series2);
        this.addSingleSeriesAsDrilldown(e.point, series3);
        this.applyDrilldown();

ejemplo: https://jsfiddle.net/ahjkouuh/