如何在vue-chartjs中添加字体颜色

Question

我在js中有以下代码，

import { Bar } from 'vue-chartjs'


export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#ffff',
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ],
    }, {responsive: true, maintainAspectRatio: false})
  }
}

我想改变字体的颜色，因为默认颜色是灰色的。

Answer 1

您应该在选项中执行此操作... this.renderChart的第二个参数。

只需放置fontColor选项：

...
mounted () {
   // Overwriting base render method with actual data.
   this.renderChart({
      labels: [...],
      datasets: [
          ...
      ],
   }, 
   {
       responsive: true, 
       maintainAspectRatio: false,
       legend: {
          ...,
          fontColor: 'white'
       },
       ...
       scales: {
          yAxes: [{
            ticks: {
                ...
                fontColor: 'white'
            }
          }],
          xAxes: [{
            ticks: {
                ...
                fontColor: 'white',
            }
          }]
       }
   })
}