Question

如何更改X和Y轴标签的颜色？我试图在fontColor内使用scaleLabel，但我可能会在错误的地方使用它？

我尝试在scale内将其应用为can be found on the source code。我也尝试过scales，甚至在xAxes内。

var options = {
type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'red',
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            scaleLabel:{
                fontColor: 'red'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
 };

Reproduction online

我一直在检查the documentation，但对我来说似乎不太清楚。而由于chart.js没有提供足够的例子，有时候发现事情并不容易......

Answer 1

$(function(){
var ctx = document.getElementById("myChart");
//Chart.defaults.global.defaultFontColor='red';
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
       legend:{labels: {fontColor: 'orange'}},
      title: {
            display: true,
            fontColor: 'blue',
            text: 'Custom Chart Title'
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'red'
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor: 'green'
                },
            }]
        } 
        
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

您可以在特定轴的刻度/标签/图例：标签中使用 fontColor ，

options: {
        legend: {
             labels: {
                  fontColor: 'orange'
                 }
              },
        title: {
            display: true,
            fontColor: 'blue',
            text: 'Custom Chart Title'
        }     ,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true,
                    fontColor: 'red'
                },
            }],
          xAxes: [{
                ticks: {
                    fontColor: 'green'
                },
            }]
        } 

    }

或更改 defaultFontColor 以更改画布上绘制的整个文本元素的字体颜色。

 Chart.defaults.global.defaultFontColor='red';

Answer 2

如果我们按如下所示设置选项，则轴标签值的字体颜色会更改。例如，我在jsfiddle上尝试过它，并且有效。同样适用于我在rails应用程序中的图表。 ...

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
                fontColor:'red'
            }
        }]
    }
}

...

Answer 3

我可能回答这个问题很晚，它将对正在寻找答案的其他人很有用。

在Charjs.JS中设置比例标签和刻度的样式，我们可以使用以下设置。

options: {     
           scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {   // To format the scale Lebel
                                display: true,
                                labelString: 'X axe name',
                                fontColor:'#000000',
                                fontSize:10
                            },
                            ticks: {
                               fontColor: "black", // To format the ticks, coming on the axis/lables which we are passing.
                               fontSize: 14
                              }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Y axe name',
                                fontColor: '#000000',
                                fontSize:10
                            },
                            ticks: {
                                  fontColor: "black",
                                  fontSize: 14
                            }
                        }]
                 }
         }

有关所有属性，请参考link。在实施之前研究所有属性。

编码愉快！

Answer 4

要更改图表对象的刻度和坐标轴标签，请执行以下操作：

let changeItemColor = (item) => {
    item.scaleLabel.fontColor = color;
    item.ticks.fontColor = color;
    item.ticks.minor.fontColor = color;
    item.ticks.major.fontColor = color;
};
chart.options.scales.xAxes.forEach((item) => changeItemColor(item));
chart.options.scales.yAxes.forEach((item) => changeItemColor(item));
chart.update();

更改X和Y轴字体颜色

4 个答案: