如何在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'

        }
    });

图表的外观如何，请看下面的图片：

然而，现在字体颜色是黑色的，我该如何更改它的颜色呢？非常感谢您提供任何相关信息。谢谢！

- user7950856

---

你看过https://dev59.com/MmEh5IYBdhLWcg3wWyWr了吗？ - user6443295

是的，我试过了同样的方法，但不起作用。 - user7950856

Answer 1

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

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

工作示例

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。

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

例如：

    fontColor: "white", // set color

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

- Daniel Sihaloho

Answer 3

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

Chart.defaults.color = '#fff';

希望能有所帮助

- Cliff

---

我的上下文是在revealjs中使用chartjs，这对我起作用了。 - Ingvald

Answer 4

抱歉让这件事浮出水面，但尝试了所有的解决方案，只有这个可行。在图表之前创建插件：

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

- Eric Guillemot