Question

我正在尝试更改轴标签的颜色。我在网上尝试过不同的教程和技巧。并且来自stackoverflow。但它们似乎都不起作用。关于如何更改颜色的任何想法？

Answer 1

由于重复项对您不起作用，我假设您使用的是 lib 的 v3，在 v3 中，您执行此操作的方式略有改变，因此您使用 color 而不是 fontcolor

  options: {
    scales: {
        y: {
        ticks: {
                    color: 'white'
        }
      },
      x: {
        ticks: {
                    color: 'white'
        }
      }
    }
  }

示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1,
      borderColor: 'white',
      backgroundColor: 'white'
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          color: 'white'
        }
      },
      x: {
        ticks: {
          color: 'white'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

canvas {
  background-color: #000;
}

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

Answer 2

对我来说，这就是我做到的。在您的图表创建中添加比例选项

scales: {
      xAxes: [{
        display: true,
        ticks: {
          fontColor: 'black',
          fontSize: 12,
          beginAtZero: true
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          fontColor: 'black',
          fontSize: 12,
          beginAtZero: true
        }
      }]
    }

如果这不起作用，您能否用您的代码更新您的问题。这样可以更容易地发现问题。

如何更改chart.js 轴标签颜色？

2 个答案: