javascript - 如何更改圆环图中文本的颜色

Question

如何更改圆环图中的特定文本颜色

示例:“10% Need Action”，我需要将 10% 更改为红色。

我已将文字包含在圆环图中。我正在尝试如上所述更改文本的颜色。

这是我的代码

$(function () 
    {
        $('#dc-target-fill-rates').highcharts({
           chart: {
               type: 'pie',

                  },
        credits: {
            enabled: false
        },
        exporting: {
            buttons: {
                contextButtons: {
                    enabled: false,
                    menuItems: null
                }
            },
            enabled: false
        },
        title: {
            verticalAlign: 'middle',
            floating: true,
            text: "<span><b>10%</b><br/>Need Action</span>",
            style: { color: '#60727d', fontSize: '15px', fontFamily: 'Avenir LT Std Light' },
            x: 0,
            y: -5
        },
        subtitle: {
            //text: '3D donut in Highcharts'
        },

        tooltip: {
            style: { fontFamily: 'Avenir LT Std Heavy' },
            shadow: false,
            useHTML: true,
            backgroundColor: 'rgba(255, 255, 255, 0.85)',
            borderColor: '#a9a9a9',
            headerFormat: "",
            pointFormat: '<span style="color: {point.color}">●</span><span style="color: {point.color}">  {point.name}</span> : <b>{point.percentage:.2f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                innerSize: '80%',
                //depth: 45,
                shadow: false,
                dataLabels: {
                    enabled: false,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: 'black'
                    }
                }
            }
        },
        series: [{
            name: 'Brands',
            colorByPoint: true,
            data: [{
                name: 'Need Action',
                y: 5,
                color: '#fc5d45'
            }, {
                name: 'At Risk',
                y: 10,
                color: '#ffd52f'

            }, {
                name: 'On Track',
                y: 50,
                color: '#5db567'
            }]
        }]
    });
});

Answer 1

更改 fill 类 .highcharts-title tspan。引用https://jsfiddle.net/hrv3tfzs/

将此样式添加到您的 CSS

.highcharts-title tspan {
  fill: red;
}