为图表向 X-axis 添加名称时出现问题

Question

我正在尝试将名称设置为我的 X 轴，但它没有显示在图表上。我想在图表的 X-axis 中添加标题，以表示在图表

上收到的呼叫

import React from 'react';

import { Card, CardHeader, Divider } from '@mui/material';
import { Bar } from 'react-chartjs-2';

import '../styles.css';

function Calls() {
    const data = {
        labels: [
            'FollowUp',
            'Already Purchased',
            'Customer Picked Up',
            'Auto Wrap Up',
            'Language Barrier',
            'Commercial Vehicle',
            'Car Not Finalized',
        ],
        datasets: [
            {
                label: 'Data',
                data: [650, 438, 578, 377, 100, 30, 0],
                fill: true,
                backgroundColor: 'rgba(0, 0, 183,1)',
            },
        ],
    };
    return (
        <div className='chart-cardLayout'>
            <Card className='chart-card'>
                <CardHeader title='Disposition Code Mix' className='chart-cardHeader' />
                <Divider />
                <div>
                    <Bar data={data} options={{ indexAxis: 'y' }} />
                </div>
            </Card>
        </div>
    );
}

export default Calls;

我已经在选项中尝试了这些，但无法在图表上显示轴名称。我正在尝试 react-chartjs-2 库来表示图表

    scales: {
                                x: [
                                    {
                                        title: {
                                            display: true,
                                            text: 'No. of Calls',
                                        },
                                    },
                                ],
                            },

==================================

title: {
                                    display: true,
                                    text: 'No. of Calls',
                                },

==========================================

scales: {
                xAxes: [
                    {
                        scaleLabel: {
                            display: true,
                            labelString: 'NumberofCalls',
                        },
                    },
                ],

Answer 1

这是因为您试图在 V3 中使用 V2 语法，在 V3 中所有比例都已更改为对象而不是数组，因此您需要这样写：

options: {
  scales: {
    x: {
      title: {
        display: true,
        text: 'Number of calls'
      }
    }
  }
}

为图表向 X-axis 添加名称时出现问题

Problem adding name to X-axis for a chart

reactjs

chart.js

react-chartjs

react-chartjs-2