ラベルの色を変更するY軸とX軸chart.js

Question

Y軸とX軸のチャートラベルの色を白に変更しようとしました。私はここで他のスレッドからのfontColourを使ってコードを追加しようとしましたが、うまく動作しません。ここで

は私のコードです：

var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 
    var lineChartData = { 
    labels : ['January','February','March','April','May','June','July'], 
    datasets : [ 
     { 
     label: 'My First dataset', 
     fontColor : '#fff' , 
     backgroundColor : 'rgba(220,220,220,0.2)', 
     borderColor : 'rgba(220,220,220,1)', 
     pointBackgroundColor : 'rgba(220,220,220,1)', 
     pointBorderColor : '#fff', 
     data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
     } 
    ] 
    } 

    var options = { 
    maintainAspectRatio: false, 
    legend: { 
     fontColor: "white", 
    }, 
    scales: { 
     xAxes: [{ 
     ticks: { 
      fontColor: "white", 
     } 
     }], 
     yAxes: [{ 
     ticks: { 
      fontColor: "white", 
      beginAtZero: true, 
      maxTicksLimit: 5, 
      stepSize: Math.ceil(250/5), 
      max: 250 
     } 
     }] 
    } 
    }; 
    var ctx = document.getElementById('canvas-1'); 
    var chart = new Chart(ctx, { 
    type: 'line', 
    data: lineChartData, 
    options: { 
     responsive: true 
    } 
    }); 

Answer 1

あなたがチャートを構築する際に、optionsプロパティにオプションオブジェクトを割り当てる必要があります。

var randomScalingFactor = function() { 
 
    return Math.round(Math.random() * 100) 
 
}; 
 
var lineChartData = { 
 
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 
 
    datasets: [{ 
 
     label: 'My First dataset', 
 
     fontColor: '#fff', 
 
     backgroundColor: 'rgba(220,220,220,0.2)', 
 
     borderColor: 'rgba(220,220,220,1)', 
 
     pointBackgroundColor: 'rgba(220,220,220,1)', 
 
     pointBorderColor: '#fff', 
 
     data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()] 
 
    }] 
 
} 
 

 
var options = { 
 
    responsive: true, 
 
    maintainAspectRatio: false, 
 
    legend: { 
 
     fontColor: "white", 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
     ticks: { 
 
      fontColor: "white", 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     ticks: { 
 
      fontColor: "white", 
 
      beginAtZero: true, 
 
      maxTicksLimit: 5, 
 
      stepSize: Math.ceil(250/5), 
 
      max: 250 
 
     } 
 
     }] 
 
    } 
 
}; 
 

 
var ctx = document.getElementById('canvas-1'); 
 
var chart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: lineChartData, 
 
    options: options //<- assign this 
 
});

canvas { background: #111 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="canvas-1"></canvas>