Chart.js 标签颜色-前端问题

Chart.js label color(Chart.js 标签颜色)

本文介绍了Chart.js 标签颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 chart.js 创建条形图，但似乎无法更改标签颜色或图例颜色.我想出了如何更改刻度颜色，但我不确定在哪里放置scaleFontColor"，如果这确实是我需要使用的.

这里是它现在的样子的链接.http://imgur.com/nxaH1mk

这是我的代码:

var ctx = document.getElementById("myChart");var myChart = new Chart(ctx, {scaleFontColor: "白色",类型:酒吧"，数据: {标签:<?php echo json_encode($timeSlice);?>,数据集:[{标签:一个标签"，背景颜色:rgba(159,170,174,0.8)"，边框宽度:1，hoverBackgroundColor: "rgba(232,105,90,0.8)",hoverBorderColor: "橙色",scaleStepWidth: 1,数据:<?php echo json_encode($myCount);?>}]},选项: {传奇: {字体颜色:白色"},秤:{y轴:[{滴答声:{字体颜色:白色"，步长:1，beginAtZero: 真}}]}}});

任何帮助将不胜感激.

解决方案

嗯，我解决了，抱歉这个问题.但我想我会留下答案，以防其他人遇到我的问题.

var ctx = document.getElementById("barChart");var myChart = new Chart(ctx, {类型:酒吧"，数据: {标签:[标签 1"，标签 2"]，数据集:[{标签:我的标签"，背景颜色:rgba(159,170,174,0.8)"，边框宽度:1，hoverBackgroundColor: "rgba(232,105,90,0.8)",hoverBorderColor: "橙色",scaleStepWidth: 1,数据:[4, 5]}]},选项: {传奇: {标签: {字体颜色:蓝色"，字体大小:18}},秤:{y轴:[{滴答声:{字体颜色:绿色"，字体大小:18，步长:1，beginAtZero: 真}}],x轴:[{滴答声:{字体颜色:紫色"，字体大小:14，步长:1，beginAtZero: 真}}]}}});

 <!-- chart.js 最近发布了新版本 v3.x与 v2.x 不向后兼容--><!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>--><!-- 上面的链接为您提供最新版本的 chart.js(现在为 v3.3.2)因此片段不再正常工作:-(--><script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script><!-- 上面的链接为您提供 v2.9.4和片段再次工作:-)--><canvas id="barChart" height="140"></canvas></div>

I'm using chart.js to create a bar chart and can't seem to change the label colors or the legend colors. I figured out how to change the tick colors, but I'm not sure where to put the 'scaleFontColor', if that is indeed what I need to be using.

Here is a link to what it looks like now. http://imgur.com/nxaH1mk

And here is my code:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    scaleFontColor: "white",
    type: "bar",
    data: {
        labels: <?php echo json_encode($timeSlice); ?>, 
        datasets: [{
            label: "A Label",
            backgroundColor: "rgba(159,170,174,0.8)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(232,105,90,0.8)",
            hoverBorderColor: "orange",
            scaleStepWidth: 1,
            data: <?php echo json_encode($myCount); ?>
        }]
    },
    options: {
        legend: {
            fontColor: "white"
        },
        scales: { 
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    stepSize: 1,
                    beginAtZero: true
                }
            }]
        }
    }
});

Any help would be greatly appreciated.

解决方案

Guh I solved it, sorry about the question. But I guess I'll leave an answer in case anyone else runs into my problem.

var ctx = document.getElementById("barChart");
    var myChart = new Chart(ctx, {
        type: "bar",
        data: {
            labels: ["label 1", "label 2"], 
            datasets: [{
                label: "My Label",
                backgroundColor: "rgba(159,170,174,0.8)",
                borderWidth: 1,
                hoverBackgroundColor: "rgba(232,105,90,0.8)",
                hoverBorderColor: "orange",
                scaleStepWidth: 1,
                  data: [4, 5]
            }]
        },
        options: { 
            legend: {
                labels: {
                    fontColor: "blue",
                    fontSize: 18
                }
            },
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "green",
                        fontSize: 18,
                        stepSize: 1,
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontColor: "purple",
                        fontSize: 14,
                        stepSize: 1,
                        beginAtZero: true
                    }
                }]
            }
        }
    });

   <!-- Edit:
   chart.js recently released new version v3.x
   which is not backwards compatible with v2.x
   -->

<!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->

   <!-- above link gets you latest version of chart.js (at v3.3.2 now)
        hence snippet didn't work propperly anymore :-(
   -->

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4"></script>

   <!-- above link gets you v2.9.4
        and snippet works agian  :-)
   -->

<div>
    <canvas id="barChart" height="140"></canvas>
</div>

这篇关于Chart.js 标签颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

问题描述

基础教程推荐