高图。系列在钻取后具有相同的颜色答案

【问题标题】：Highcharts. Series have same color after drilldown高图。系列在钻取后具有相同的颜色
【发布时间】：2025-12-27 04:50:16
【问题描述】：

我在使用 highcharts 时遇到了一些问题。所以，在我做钻取系列具有相同的颜色之后，它们从被点击的列中扩展它，官方 highchart 的 jsfidle 完美地展示了这种行为（https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-drilldown）在我的配置对象中，我有颜色数组，但它仅将其用于初始视图，并且在向下钻取之后，所有内容都具有相同的颜色。我试过这个选项，但没有帮助：

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

还有一个想法，可以在每次下钻时从数组中手动选择随机颜色，但在这种情况下，我对图例的项目颜色有疑问。必须有一些选择来实现它，但也许我错过了一些东西。将不胜感激任何建议！）

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您可以通过为每个系列定义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: [
                   ...
                ]
            }
        ]
    }
});

检查这个小提琴 - https://jsfiddle.net/30o1genk/

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();
    }
  }

检查这个小提琴 - https://jsfiddle.net/1fpdckn5/ 的动态案例。

【讨论】：

您好，谢谢您的回复。我尝试了您的解决方案，但由于某种原因，它不适用于我的情况，唯一的区别是我为向下钻取动态创建系列并且它仍然具有相同的颜色。我更新了jsfilde，请看一下。 jsfiddle.net/jnf842zd
您的向下钻取事件处理程序不正确。我已经更新了答案。
嘿！）感谢您的解决方案。它确实有效，但在我的情况下会产生一个小问题，我需要显示图例，使用此解决方案我将只看到其中一项 - “系列 1”，而不是需要的两项 - “测试”、“测试” ”。因此，将继续寻找解决方案。但是，再次感谢您的帮助！）

【解决方案2】：

您可以为每个向下钻取系列设置所需的颜色。

演示：https://jsfiddle.net/BlackLabel/1vbyp53w/

  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: [
           ...
        ]
      },

    ]
  }

API：https://api.highcharts.com/highcharts/drilldown.series

【讨论】：