我正试图将图例从上到下移动,但无法移动位置,因为我正在学习图表,并试图实现它的React需要一些帮助
我也需要改变甜甜圈图表的大小(应该是小/薄),并需要在中心添加c文本
import React from "react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend);
export const data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: "# of Votes",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
],
borderColor: [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
],
borderWidth: 1,
Legend: {
display: true,
position: "bottom",
},
},
],
};
export function App() {
return <Doughnut data={data} />;
}
我尝试添加位置={legend:{position:“bottom”}}
也
const options = {
legend: {
labels: {
padding: 20
}
}
};
1条答案
按热度按时间izkcnapc1#
假设您使用的是Chart.js版本4.n,则需要在
options.plugins.legend
中定义legend
选项。图例可以通过position
选项移动到图表的底部,如下所示: