无法更改 react-chartjs-2 中标签的默认颜色和字体大小

Question

所以我想在我的网站上呈现一个简单的条形图，我正在使用 react-chartjs-2，但我似乎无法更改默认字体大小，甚至无法更改 x 标签和 ylabels 的颜色.我已经阅读了其他答案，但其中 none 对我有用。我已经处理了最后 2 个小时，但我仍然无法弄清楚问题是什么。

这是我的代码

import React from 'react'
import './model.css'
import {Bar} from 'react-chartjs-2'

function Model() {
    const data = {
        labels: ['red', 'blue', 'white', 'green'],
        datasets: [
          {
            label: '# of days',
            data: [6, 7, 2, 14],
            backgroundColor: [
              'rgba(255, 99, 132, 0.4)',
              'rgba(54, 162, 235, 0.4)',
              'rgba(255, 206, 86, 0.4)',
              'rgba(75, 192, 192, 0.4)',
              
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              
            ],
            borderWidth: 1,
          },
        ],
      };
     const options= { 
        legend: {
            labels: {
                fontColor: "blue",
                fontSize: 18
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 18,
                    stepSize: 1,
                    beginAtZero: true
                }
            }],
            xAxes: [{
                ticks: {
                    fontColor: "white",
                    fontSize: 14,
                    stepSize: 1,
                    beginAtZero: true
                }
            }]
        }
    }
     

    return (
        <div className="model-container">
            
            <Bar
                data={data}
                options={options}   
            />
        </div>
        
    )
}

export default Model

Answer 1

我假设您使用的是 v3，在 v3 中，比例尺在您编写它们的方式上进行了重新设计，您可以阅读 migration guide 中的所有更改，以明确知道将选项放在哪里以及如何放置名字是你可以检查文档本身

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
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      y: {
        ticks: {
          color: 'red',
          font: {
            size: 14,
          }
        }
      },
      x: {
        ticks: {
          color: 'red',
          font: {
            size: 14
          }
        }
      }
    }
  }
}

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

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

无法更改 react-chartjs-2 中标签的默认颜色和字体大小

Can't change the default color and font size of labels in react-chartjs-2

reactjs

chart.js

react-chartjs-2