Highcharts如何为饼图数据和向下钻取数据制作一组颜色答案

【问题标题】：Highcharts how to make a set number of colors for pie chart data and drilldown dataHighcharts如何为饼图数据和向下钻取数据制作一组颜色
【发布时间】：2021-05-22 16:16:52
【问题描述】：

我正在使用 Highcharts 并使用饼图，特别是具有向下钻取的饼图

这是我使用的一个示例图表，它具有向下钻取功能

https://www.highcharts.com/demo/pie-drilldown

我正在使用有时具有一个系列项目、有时是两个系列或更多系列的数据渲染我的饼图，这意味着饼图有时会有一个切片、两个切片或更多，我希望始终使用某种颜色在具有最高值的数据上。我还希望切片始终是颜色数组中的任何颜色。

我还希望 highcharts 向下钻取数据始终是特定范围的颜色。所以当我们点击其中一个切片时，那里的数据应该总是在一定范围内的颜色，这与饼图系列数据上的特征相似，但我希望颜色与饼图不同系列数据。

我怎样才能做到这一点？

谢谢

【问题讨论】：

标签： css highcharts pie-chart

【解决方案1】：

Highcharts 颜色选项可以添加到图表定义中的特定系列。所以它也可以添加到特定的钻取系列中：

drilldown: {
  series: [
    {
      name: "Chrome",
      id: "Chrome",
      colors: [
        '#db03fc',
        '#03e3fc',
        ...
      ],
      ...
    }
  ]
}

我不知道 Highcharts 中有任何方法可以轻松地为特定的饼图着色。默认情况下，colors 数组中的颜色将按照提供数据的相同顺序填充切片。如果可能的话，通过对向下钻取数据进行排序来控制颜色可能会有所帮助，以确保可预测地用colors 数组中的第一种颜色填充最高值。

文档：Highcharts colours

【讨论】：

【解决方案2】：

我一直发现，当我想用 Highcharts 和颜色做非常具体的事情时，您需要使用 color 属性预先设置您的数据。因此，假设您已经以 Highcharts 能够理解的方式构建了数据：

// Data formatted so it can be dropped directly into
// a Highcharts pie-chart
let top_data = [
    {
        name: "Internet Explorer",
        y: 7.23,
        drilldown: "Internet Explorer"
    },{
        name: "Chrome",
        y: 62.74,
        drilldown: "Chrome"
    },{
        name: "Firefox",
        y: 10.57,
        drilldown: "Firefox"
    },{
        name: "Safari",
        y: 5.58,
        drilldown: "Safari"
    },{
        name: "Edge",
        y: 4.02,
        drilldown: "Edge"
    },{
        name: "Opera",
        y: 1.92,
        drilldown: "Opera"
    },{
        name: "Other",
        y: 7.62,
        drilldown: null
    }];

现在您需要确保最大的类别获得特定的颜色，因此我们将继续对数据进行排序：

// Sort in descending order 
// (this makes sure the 0th entry is the largest)
top_data.sort(function(a,b) {return b.y-a.y});

现在，您可以将color 属性添加到您的每个块中：

// Color for largest slice
let top_color = 'blue';
// Color array for the rest of the colors
let colors = Highcharts.getOptions().colors;
top_data.forEach((dat,d) => {
  if (d==0) {
    // Assign first (largest) entry to dedicated color  
    dat['color'] = top_color;
  } else {
    // Assign slice to next color in list
    dat['color'] = colors[(d-1)%colors.length];
  }
});

现在您将其作为数据对象传递给图表配置的系列参数。

为了为向下钻取切片创建唯一的颜色列表，您可以在图表的colors 参数中设置颜色数组。这些颜色将传播到向下钻取饼图切片（不会覆盖您为顶级饼图切片指定的任何唯一颜色）。最终图表将具有以下形式：

// Create the chart
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    colors: ['blue', 'green', 'red'], // Or any other unique list of colors

    /* All your other config parameters ... */

    series: [
        {
            name: "Browsers",
            colorByPoint: true,
            data: top_data
        }
    ],
    /* And the rest, like your drilldown data */
});

【讨论】：