高图改变饼图切片的颜色

Question

更新：

我能够获得要显示的百分比以及图例。但还是无法改变颜色。

chart: {
        type: 'pie',
        styledMode: true
    },
    tooltip: {
         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    theme: {
          colors: [
                    'green',
                    'red',
                    'fushcia'
                  ]
    },
    plotOptions: {
        pie: {
          colors: [
                    'green',
                    'red',
                    'fushcia'
                  ],
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels:  {
                     enabled: false
                     },
                   showInLegend: true
           }

    },
    title: {
        text: 'Rundeck Jobs Stats'
    },
    series: [
        {
            data: chartData(table)
        }

原帖：

我有一个使用 DataTables 从 HTML 表生成的饼图。我正在查看一列“状态”，它显示成功、失败或中止。该图表正在计算每个事件出现的次数并绘制一个饼图。

我希望饼图绿色表示成功，红色表示失败，紫红色表示失败。

我还希望切片显示它们各自占饼图的百分比。

这是我用于创建图表的代码，它直接取自https://datatables.net/examples/api/highcharts.html

的示例

    // Create DataTable
const table = new DataTable('#example');
 
// Create chart
const chart = Highcharts.chart('demo-output', {
    chart: {
        type: 'pie',
        styledMode: true
    },
    title: {
        text: 'Rundeck Jobs Stats'
    },
    series: [
        {
            data: chartData(table)
        }
    ]
});
 
// On each draw, update the data in the chart
table.on('draw', function () {
    chart.series[0].setData(chartData(table));
});
 
function chartData(table) {
    var counts = {};
 
    // Count the number of entries for each position
    table
        .column(3, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });
 
    return Object.entries(counts).map((e) => ({
        name: e[0],
        y: e[1]
    }));
}

我看过很多帖子并尝试为该系列添加颜色，但到目前为止还没有任何乐趣。

提前致谢

R

Answer 1

那是因为你正在使用

styledMode

:

styledMode：布尔值

是否应用样式模式。处于样式模式时，无演示 属性或 CSS 应用于图表 SVG。相反，CSS 规则是 需要设置图表样式。默认样式表可从 https://code.highcharts.com/css/highcharts.css.

您可以按如下所示禁用它或在 CSS 中设置图表样式。

chart: {
  ...,
  styledMode: false
}

---

实例：https://jsfiddle.net/BlackLabel/hm5nb2o4/

API 参考： https://api.highcharts.com/highcharts/chart.styledMode

文档： https://www.highcharts.com/docs/chart-design-and-style/style-by-css