Изменение цвета шрифта X и Y

Как я могу изменить цвет меток осей X и Y? Я пытался использовать fontColor в scaleLabel но я мог бы сделать это не в том месте?

Я попытался применить его в scale как можно найти в исходном коде. Я также пробовал под 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
                }
            }]
        }
    }
 };

Воспроизведение онлайн

enter image description here

Я проверял документацию, но она мне не очень понятна. И поскольку chart.js не предоставляет достаточного количества примеров, иногда нелегко найти что-то...

Ответы

Ответ 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>

Ответ 2

если мы установим параметры, как показано ниже, то цвет шрифта значений меток осей изменится. Например, я попробовал это на jsfiddle, и это сработало. То же самое сработало и для моего графика в приложении rails....

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

...

Ответ 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
                            }
                        }]
                 }
         }

Пожалуйста, обратитесь по ссылке для всех свойств. Изучите все свойства до реализации.

Удачного кодирования!

Ответ 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();