Highcharts углубиться в детальный график

Question

Я хотел бы создать подробную диаграмму.

Вы можете найти ссылку jsfiddle , которая не работает, но в ней содержатся примеры данных.

data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
                }]
            },
            {
                name: 'B1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
            },
            {
                name: 'C1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, ...
            }

        ]

И наоборот работает здесь :

datanormal = [{
                name: '6',
                data: [{
                    name: 'A1',
                    y: 14,
                    drilldown: 'Details1'
                }, {
                    name: 'B1',
                    y: 19,
                    drilldown: 'Details1'
                }, {
                    name: 'C1',
                    y: 21,
                    drilldown: 'Details1'
                }]
            }, 
            {
                name: '7',
                data: [{
                    name: 'A1',
                    y: 5,
                    drilldown: 'Details1'
                } ...]
            }];
            datadrill = 
            [{
                    id: 'Details1',
                    name: 'Details1',
                    data: [
                        ['D1', 4],
                        ['D2', 2],
                        ['D3', 1],
                        ['D4', 4]
                    ]
            }];

Мне нужно обратное, от основы c до комплекса.

Это изображение основного столбца диаграммы

Это подробное изображение развернутого графика

Answer 1

Не могли бы вы проверить это? Это то, что вы хотите?

Это ссылка jsfiddle => https://jsfiddle.net/burakkp/ytkqzfos/2/

$(document).ready(function() {
var datadrill;
        datadrill = [{
                name: 'A1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, {
                    name: '8',
                    y: 21
                }, {
                    name: '9',
                    y: 34
                }, {
                    name: '10',
                    y: 5
                }, {
                    name: '11',
                    y: 9
                }]
            },
            {
                name: 'B1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, {
                    name: '8',
                    y: 21
                }, {
                    name: '9',
                    y: 34
                }, {
                    name: '10',
                    y: 5
                }, {
                    name: '11',
                    y: 9
                }]
            },
            {
                name: 'C1',
                data: [{
                    name: '6',
                    y: 14
                }, {
                    name: '7',
                    y: 19
                }, {
                    name: '8',
                    y: 21
                }, {
                    name: '9',
                    y: 34
                }, {
                    name: '10',
                    y: 5
                }, {
                    name: '11',
                    y: 9
                }]
            }];




        Highcharts.chart('container', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Highcharts multi-series drilldown'
            },
            subtitle: {
                text: 'The <em>allowPointDrilldown</em> option makes point clicks drill to the whole category'
            },
            xAxis: {
                type: 'category'
            },

            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            series: datadrill

        });

    }); 

Answer 2

Хотели бы вы достичь чего-то подобного? Пожалуйста, проверьте развертку только для первой точки (A1).

Демонстрация: https://jsfiddle.net/BlackLabel/wn65fkxj/

Я сделал некоторые изменения в ваших данных, например:

  datadrill = [{
      id: 'Details1',
      name: 'A1',
      data: [{
        name: '6',
        y: 14
      }, {
        name: '7',
        y: 19
      }, {
        name: '8',
        y: 21
      }, {
        name: '9',
        y: 34
      }, {
        name: '10',
        y: 5
      }, {
        name: '11',
        y: 9
      }]
    },
    {
      id: 'Details2',
      name: 'B1',
      data: [{
        name: '6',
        y: 14
      }, {
        name: '7',
        y: 19
      }, {
        name: '8',
        y: 21
      }, {
        name: '9',
        y: 34
      }, {
        name: '10',
        y: 5
      }, {
        name: '11',
        y: 9
      }]
    },
    {
      id: 'Details3',
      name: 'C1',
      data: [{
        name: '6',
        y: 14
      }, {
        name: '7',
        y: 19
      }, {
        name: '8',
        y: 21
      }, {
        name: '9',
        y: 34
      }, {
        name: '10',
        y: 5
      }, {
        name: '11',
        y: 9
      }]
    }
  ];

Кроме того, я добавил нулевые точки для запуска Различная развертка к каждому.

API: https://api.highcharts.com/highcharts/drilldown.allowPointDrilldown

Answer 3

Если вы посмотрите на рабочий пример, есть другой объект для сверла данных:

datadrill = 
            [{
                    id: 'Details1',
                    name: 'Details1',
                    data: [
                        ['D1', 4],
                        ['D2', 2],
                        ['D3', 1],
                        ['D4', 4]
                    ]
            }]

Вы должны сделать то же самое с вашим кодом.