更改标签颜色Y和X轴chart.js

时间:2017-08-03 09:15:18

标签: javascript chart.js

我尝试更改为Y轴和X轴将图表标签颜色更改为白色。我尝试在stackoverflow上添加来自其他线程的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
    }
  });

1 个答案:

答案 0 :(得分:1)

在构建图表时,您需要将选项对象分配给 [Fri Aug 04 02:10:27.471889 2017] [cgi:error] [pid 2231] [client 127.0.0.1:48724] AH01215: DBI connect('dbname=postgres;host=127.0.0.1;','postgres',...) failed: could not connect to server: Permission denied [Fri Aug 04 02:10:27.471959 2017] [cgi:error] [pid 2231] [client 127.0.0.1:48724] AH01215: \tIs the server running on host "127.0.0.1" and accepting [Fri Aug 04 02:10:27.471975 2017] [cgi:error] [pid 2231] [client 127.0.0.1:48724] AH01215: \tTCP/IP connections on port 5432? at /var/www/cgi-bin/cc.cgi line 14. 属性。



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
});
&#13;
canvas { background: #111 }
&#13;
&#13;
&#13;