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

How to Change the color of the text in donut chart

本文关键字:颜色 文本 中文 何更改 圆环图      更新时间:2023-09-26

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

示例:"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'
            }]
        }]
    });
});

更改类.highcharts-title tspanfill。参考https://jsfiddle.net/hrv3tfzs/

将此样式添加到您的CSS

.highcharts-title tspan {
  fill: red;
}

作为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属性,则可以在标题文本中添加简单标记。Highcharts span标记因在图表呈现为SVG时交换值而臭名昭著,这就是为什么我将样式添加为内联代码而不是原始代码中的style属性。

只需注意你在这里的引号,并避免使用任何额外的单引号或双引号。