愿所有的美好和期待都能如约而至

如何在chart.js中更改标签颜色?

发布时间:  来源:互联网  作者:匿名  标签:chart.js css error How to change the label color in chart.js? exception IT资讯 jav  热度:37.5℃

本文介绍了如何在chart.js中更改标签颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的饼图定义如下

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'

        }
    });

图表外观

但是,这是将标签的字体颜色设置为黑色,我如何更改此颜色。任何关于这一点的建议都将受到高度赞赏。谢谢!

推荐答案

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

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

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

数据-lang=”js”数据-隐藏=”假”数据-控制台=”假”数据-巴贝尔=”假”>

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>

这篇关于如何在chart.js中更改标签颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP