Цвета гистограммы с накоплением в случае детализации (открыть по щелчку линейного графика)

Question

У меня есть небольшая проблема с API-интерфейсом детализации HighCharts, в котором я создал линейную диаграмму и в ней щелкнул по детализации до столбчатой ​​диаграммы с накоплением, пока у меня есть успех, но цвет с накоплением одинаков для каждогоколонка.

Столбец развертки является полностью динамическим, поэтому я не могу указать цвет каждой серии вручную, он должен назначаться автоматически, как простая столбчатая диаграмма с накоплением.
Я воспроизвел проблему, пожалуйста, посмотрите вJSFiddle и помните, что все серии разверток являются динамическими.

Вот мой JSFiddle

Вот мой код

$(function () {
    // Create the chart
    Highcharts.chart('container', {
    chart: {
      type: 'line',
      zoomType: 'xy',
      borderColor: '#EBBA95',
      borderWidth: 2,
      events: {
        drilldown: function (e) {
          if (!e.seriesOptions) {
            const chart = this;
            const drilldowns = {
              'level': {
                colorByPoint: true,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [123, 345],
                level: 1
              },
              'level1': {
                colorByPoint: true,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [948, 456],
                level: 2
              }
            };
            const series = [drilldowns['level'], drilldowns['level1']];

            chart.addSingleSeriesAsDrilldown(e.point, series[0]);
            chart.addSingleSeriesAsDrilldown(e.point, series[1]);
            chart.applyDrilldown();
          }
        }
      }
    },
    title: {
      text: 'Limit',
      align: 'left'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      max: 11
    },
    yAxis: {
      type: 'logarithmic',
      title: {
        text: '',
        align: 'high'
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    series: [
      {
        name: 'Installation',
        visible: true,
        data: [
          {
            name: 'level1',
            y: 43934,
            drilldown: true
          },
          {
            name: 'level2',
            y: 52503,
            drilldown: true
          }
        ]
      }
    ],
    drilldown: {
      series: []
    }
  });

});

Answer 1

Я нашел ответ, просто добавьте color: null в каждую серию drill-down и удалите colorbypoint: true

Вот ссылка на GitHub для решения

Здесьобновляется JSFiddle

Вот обновленный код:

$(function () {
    // Create the chart
    Highcharts.chart('container', {
    chart: {
      type: 'line',
      zoomType: 'xy',
      borderColor: '#EBBA95',
      borderWidth: 2,
      events: {
        drilldown: function (e) {
          if (!e.seriesOptions) {
            const chart = this;
            const drilldowns = {
              'level': {
                color:null,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [123, 345],
                level: 1
              },
              'level1': {
                color:null,
                type: 'column',
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                data: [948, 456],
                level: 2
              }
            };
            const series = [drilldowns['level'], drilldowns['level1']];

            chart.addSingleSeriesAsDrilldown(e.point, series[0]);
            chart.addSingleSeriesAsDrilldown(e.point, series[1]);
            chart.applyDrilldown();
          }
        }
      }
    },
    title: {
      text: 'Limit',
      align: 'left'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      max: 11
    },
    yAxis: {
      type: 'logarithmic',
      title: {
        text: '',
        align: 'high'
      }
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    series: [
      {
        name: 'Installation',
        visible: true,
        data: [
          {
            name: 'level1',
            y: 43934,
            drilldown: true
          },
          {
            name: 'level2',
            y: 52503,
            drilldown: true
          }
        ]
      }
    ],
    drilldown: {
      series: []
    }
  });

});