向下钻取时的堆叠条形图颜色（单击折线图打开）

Question

我对 HighCharts 的向下钻取 API 没有什么问题，我在其中创建了一个折线图，然后单击向下钻取到堆积条形图，到目前为止我取得了成功但每列的堆叠颜色相同。

向下钻取列是完全动态的，所以我无法手动指定每个系列的颜色，它应该像简单的堆积条形图一样自动分配。
我已经重现了这个问题，请查看 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

我找到了一个答案，只需在 drill-down 的每个系列中添加 color: null 并删除 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: []
    }
  });

});

向下钻取时的堆叠条形图颜色（单击折线图打开）

Stacked bar chart colors in case of Drilldown (open on click of Line chart)

javascript

angular

charts

highcharts

angular2-highcharts