如何在chart.js中改变标签颜色？

06odsfpq 于 2022-11-06 发布在 Chart.js

关注(0)|答案(4)|浏览(296)

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

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'

        }
    });

图表的外观

不过这是设置字体颜色的标签为黑色，我怎么能改变这个颜色。任何指针在这是高度赞赏。谢谢！

chart.js

来源：https://stackoverflow.com/questions/45139949/how-to-change-the-label-color-in-chart-js

4条答案

按热度按时间

wgeznvg71#

您可以更改图例标签的字体颜色，方法如下：

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

第一个

赞(0）回复(0）举报 2022-11-06

ljo96ir52#

要使用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/

赞(0）回复(0）举报 2022-11-06

2vuwiymt3#

抱歉，但尝试任何解决方案，只有这个作品unbury这。创建插件之前图表：

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

赞(0）回复(0）举报 2022-11-06

6psbrbz94#

我找到的解决这个问题的唯一方法是下面这行代码。