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

编程问答 2022-04-23

问题描述

我正在使用“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`

解决方法

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

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

react-chartjsreactjsreactjsreactjsreactjstypescripttypescripttypescript