React - React -chartjs-2向线形图添加x和y轴标签

Question

import React from "react";
import { Line } from "react-chartjs-2";
// "chart.js": "^2.9.4",
// "react-chartjs-2": "^2.11.1"
const ext_data = [11, 19, 3, 5, 2, 3, 14, 19];
const ll = Array.from(Array(ext_data.length).keys());
const data = {
labels: ll,
datasets: [
{
label: "Profit$",
data: ext_data,
fill: false,
backgroundColor: "rgb(255, 99, 132)",
borderColor: "rgba(255, 99, 132, 0.4)"
}
]
};
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
};
const LineChart = () => (
<>
<div className="header">
<h1 className="title">Profit Trend</h1>
<div className="links"></div>
</div>
<Line data={data} options={options} />
</>
);
export default LineChart;

我正在尝试添加x轴名称:"时间"y轴名称:"汽车数量"。我查看了文档:https://www.chartjs.org/docs/latest/axes/labelling.html然而，我没能找到有用的东西。谢谢你的宝贵时间。

Answer 1

在react-chartjs-2中，要将标题添加到轴上，只需将其添加到您的yAxes选项数组(options.scales.yAxes[]):

scaleLabel: {
display: true,
labelString: "number of cars",
fontColor: "color you want",
}

你的xAxes也一样。