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

【问题标题】：Stacked bar chart colors in case of Drilldown (open on click of Line chart)向下钻取时的堆叠条形图颜色（单击折线图打开）
【发布时间】：2018-12-20 07:02:35
【问题描述】：

我在HighCharts 的向下钻取 API 上几乎没有问题，我在其中创建了一个折线图，并在它的点单击向下钻取到堆叠条形图，到目前为止我取得了成功，但每个堆叠的颜色都是相同的柱子。

下钻列是完全动态的，所以我不能手动指定每个系列的颜色，它应该像简单的堆叠条形图一样自动分配。
我已经重现了这个问题，请查看 JSFiddle 并记住所有向下钻取系列都是动态的。

Here is my 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: []
    }
  });

});

【问题讨论】：

标签： javascript angular charts highcharts angular2-highcharts

【解决方案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: []
    }
  });

});

【讨论】：