如何更改 chart.js 中的标签颜色？

Question

我有一个像这样定义的饼图，

var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: data.labels,
            datasets: [{
                data: data.values,
                backgroundColor: [
                'rgb(255, 99, 132)',
                'rgb(54, 162, 235)',
                'rgb(255, 206, 86)',
                'rgb(75, 192, 192)',
                'rgb(153, 102, 255)',
                'rgb(255, 159, 64)',
                'rgb(204, 255, 64)',
                'rgb(64, 159, 255)',
                'rgb(175, 64, 255)'
                ],
                options: {
                    responsive : true,
                }
            }],
            fontColor : '#FFFFFF'

        }
    });

图表的外观，

然而，这将标签的字体颜色设置为黑色，我该如何更改这种颜色。 对此的任何指示都将受到高度赞赏。 谢谢！

Answer 1

您可以通过以下方式更改 legend标签的字体颜色...

options: {
   legend: {
      labels: {
         fontColor: 'white'
      }
   },
   ...
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

 var chart = new Chart(ctx, { type: 'doughnut', data: { labels: ['A', 'B', 'C', 'D', 'E'], datasets: [{ data: [1, 1, 1, 1, 1], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 206, 86)', 'rgb(75, 192, 192)', 'rgb(153, 102, 255)' ] }] }, options: { legend: { labels: { fontColor: 'white' //set your desired color } } } });

 canvas{background: #222}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> <canvas id="ctx"></canvas>

Answer 2

要使用 Chart.js 更改标签颜色，您必须设置 fontColor。

通过在选项对象属性中设置 fontColor 来设置标签的 fontColor。

例如;

    fontColor: "white", // set color

或者您可以访问以下链接： https ://thewebdev.info/2022/06/27/how-to-change-label-color-with-chart-js-and-javascript/

Answer 3

很抱歉将其解开，但尝试了任何解决方案，只有这样才有效。 在图表之前创建插件：

Chart.plugins.register({
    beforeDraw: function(c) {
        c.legend.options.labels.fontColor = 'hsl(0,0%,85%)';
    }
});
var chart = new Chart(ctx, {
....