Question

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

示例："10% Need Action"，我需要将10%更改为红色。

我已将文字包含在donutchart中。我正试图改变上面提到的文本颜色。

这是我的代码

$(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的{{1}}。请参阅https://jsfiddle.net/hrv3tfzs/

将此样式添加到CSS

.highcharts-title tspan

Answer 2

作为Pugazh建议的替代方案，您可以执行以下操作：

title: {
    verticalAlign: 'middle',
    floating: true,
    text: "<span style='color: red; font: 15px Arial;'><b>10%</b><br/>Need Action</span>"
    x: 0,
    y: -5, 
    useHTML: true
},

如果您使用useHTML属性，则可以在标题文字中添加简单标记。当图表呈现为SVG时，Highcharts span标记因交换值而臭名昭着，这就是为什么我将样式添加为原始代码中的内联代码与style属性。

请注意您的引用，并避免使用您需要使用的任何其他单引号或双引号。

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

2 个答案: