web-dev-qa-db-fra.com

Changer la couleur de police des axes X et Y

Comment puis-je changer la couleur des étiquettes des axes X et Y? J'essayais d'utiliser fontColor dans scaleLabel mais je le faisais peut-être au mauvais endroit?

J'ai essayé de l'appliquer dans scale comme peut être trouvé sur le code source . J'ai aussi essayé sous scales et même dans 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 en ligne

 enter image description here

J'ai vérifié la documentation mais cela ne semble pas très clair pour moi. Et comme chart.js ne fournit pas assez d'exemples, il n'est pas facile de trouver des choses parfois ...

chart.js
11
Alvaro

$(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>

Vous pouvez utiliser fontColor inside ticks/label/legend: labels pour un axe particulier,

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'
                },
            }]
        } 

    }

ou changez le defaultFontColor pour changer la couleur de police des éléments de texte entiers dessinés sur le canevas. 

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

si nous définissons les options comme ci-dessous, la couleur de la police des valeurs des étiquettes des axes change. Par exemple je l'ai essayé sur jsfiddle et cela a fonctionné. La même chose a également fonctionné pour mon graphique dans l'application Rails ....

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

...

0
Rahul