Javascript 海图。系列在向下展开后具有相同的颜色

我对海图有些问题。所以，在我使用相同颜色的深入系列之后，他们从单击的列中扩展了它，官方highchart的jsfidle完美地演示了这种行为（） 在我的配置对象中，我有一个颜色数组，但它只在初始视图中使用它，在深入研究之后，所有的东西都有相同的颜色。我尝试了这个选项，但没有帮助：

chartOptions.plotOptions.column = {
                    colorByPoint: true
                }; 

我也有一个想法，在每次向下搜索时从数组中手动选择随机颜色，但在这种情况下，我对legend的项目颜色有问题。 必须有一些选择来实现它，但也许我错过了一些东西。

---

如果您有任何建议，我们将不胜感激！）

可以通过为每个系列定义

colorByPoint:true

属性来实现。像这样：

Highcharts.chart('container', {
    ...
    drilldown: {
        series: [
            {
                colorByPoint: true,
                name: "Chrome",
                id: "Chrome",
                data: [
                   ...
                ]
            },
            {
                name: "Firefox",
                id: "Firefox",
                colorByPoint: true,
                data: [
                   ...
                ]
            },
            {
                name: "Internet Explorer",
                id: "Internet Explorer",
                colorByPoint: true,
                data: [
                   ...
                ]
            },
            {
                name: "Safari",
                id: "Safari",
                colorByPoint: true,
                data: [
                   ...
                ]
            },
            {
                name: "Edge",
                id: "Edge",
                colorByPoint: true,
                data: [
                   ...
                ]
            },
            {
                name: "Opera",
                id: "Opera",
                colorByPoint: true,
                data: [
                   ...
                ]
            }
        ]
    }
});

检查这把小提琴-

UPD:当在深入查看后动态添加序列时，深入查看事件处理程序应如下所示：

 events: {
    drilldown: function(e) {
      const point = e.point;

      const series = {
        colorByPoint: true, 
        data: [{name: "test", y: 10}, {name: "test2", y: 20}],
      };


      this.addSingleSeriesAsDrilldown(point, series, false)  

      this.applyDrilldown();
    }
  }

---

检查此小提琴-用于动态情况。

您可以为每个向下展开系列设置所需的颜色

演示：

---

API:

嘿，谢谢你的回复。我尝试了你们的解决方案，但由于某些原因，它对我的案例不起作用，唯一的区别是我动态地创建了一个系列用于深入分析，它仍然有相同的颜色。我更新了jsfilde，请看一下。您的深入事件处理程序不正确。我已经更新了答案。嘿！）谢谢你的解决方案。它确实有效，但在我的例子中产生了一个小问题，我需要显示图例，使用此解决方案，我将只看到其中的一项-“系列1”，而不是需要的两项-“测试”，“测试”。所以，我们将继续寻找解决方案。但是，再次感谢您的帮助！）

  drilldown: {
    series: [{
        name: "Chrome",
        id: "Chrome",
        color: 'orange',
        data: [
          ...
        ]
      },
      {
        name: "Firefox",
        color: 'red',
        id: "Firefox",
        data: [
           ...
        ]
      },
      {
        name: "Internet Explorer",
        id: "Internet Explorer",
        color: 'blue',
        data: [
           ...
        ]
      },

    ]
  }