ChartJS react-chart-js2 选项不起作用答案

【问题标题】：ChartJS react-chart-js2 Options not workingChartJS react-chart-js2 选项不起作用
【发布时间】：2021-06-18 08:46:55
【问题描述】：

我正在使用“chart.js”：“^3.3.2”和“react-chartjs-2”：“^3.0.3”。我主要尝试修改轴，但它似乎根本不起作用，就像选项组件中没有任何作用一样。我已经看到旧版本有这个问题，但这个问题超过了 V2。要开始使用选项组件，我尝试向轴添加颜色。但是，它不显示颜色。

import React from 'react'
import { Bar } from 'react-chartjs-2';
export const BarChart: React.FC<Props> = (props) => {
       return (
           <Bar
            type='bar'
            data={{
                labels: xaxis,
                datasets: generatedataset()
            }}
            height={400}
            width={600}
            options={{
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        gridLines: {
                            zeroLineColor: '#ffcc33'
                        }
                    }],
                    yAxes: [
                        {
                            ticks: {
                                beginAtZero: false
                            }
                        }
                    ]
                }
            }}

        />)
}`enter code here`

【问题讨论】：

标签： reactjs typescript chart.js react-chartjs

【解决方案1】：

Chart.js V3 有一些重大的重大变化，请阅读迁移指南：https://www.chartjs.org/docs/master/getting-started/v3-migration.html

对于您的问题，您需要删除数组并在 scales 对象中定义每个比例，并以 id 作为键

【讨论】：