将名称添加到图表的X轴时出现问题

Question

我试图将名称设置为X轴，但它没有显示在图表上。我想在图表的X轴上添加标题，以表示在图表上收到的呼叫

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-chattjs-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'
}
}
}
}