Highcharts更改Pie切片的颜色

lg40wkob  于 9个月前  发布在  Highcharts
关注(0)|答案(1)|浏览(94)

更新:
我能够得到的百分比显示,也是一个传奇。但仍然不能改变颜色。

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

原文:
我有一个饼图从一个HTML表与DataTables生成。我正在查看一列STATUS,它显示成功、失败或中止。该图表正在计算每个事件的发生次数并绘制一个Pie。
我想饼图是绿色的成功,红色的失败和fushcia的流产。
我还想切片显示各自的百分比馅饼。
这是我创建图表的代码,它直接取自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]
    }));
}

我已经看了一些帖子,并试图添加颜色的系列,但还没有喜悦。
thanks in advance
R

zpqajqem

zpqajqem1#

这是因为你使用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

相关问题