Chartjs:我只想在饼图中左右填充
Chartjs: I only want left and right padding in pie chart
我在工作中有一个案例想使用饼图。为此,我使用 Chart.js(使用 react-chartjs-2 库作为包装器)。
我想在 canvas 中左右填充,但出于某种原因,在这种情况下我总是得到顶部填充,即使我专门键入 top: 0。有谁知道为什么发生这种情况,只有左右填充的方法是什么?
const options = {
layout: {
padding: {
left: 100,
right: 100,
top: 0,
}
}
}
代码如下,同时添加了代码沙箱:
https://codesandbox.io/s/exciting-stallman-x18qku?file=/src/App.js:0-1120
import "./styles.css";
import { Box } from "@mui/material";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } 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
}
]
};
const options = {
layout: {
padding: {
left: 100,
right: 100,
top: 0,
}
}
}
export default function App() {
return (
<Box>
<Pie data={data} options={options} />
</Box>
);
}
将 maintainAspectRatio 设置为 false。
const options = {
maintainAspectRatio: false,
layout: {
padding: {
left: 100,
right: 100
}
}
}
我在工作中有一个案例想使用饼图。为此,我使用 Chart.js(使用 react-chartjs-2 库作为包装器)。
我想在 canvas 中左右填充,但出于某种原因,在这种情况下我总是得到顶部填充,即使我专门键入 top: 0。有谁知道为什么发生这种情况,只有左右填充的方法是什么?
const options = {
layout: {
padding: {
left: 100,
right: 100,
top: 0,
}
}
}
代码如下,同时添加了代码沙箱:
https://codesandbox.io/s/exciting-stallman-x18qku?file=/src/App.js:0-1120
import "./styles.css";
import { Box } from "@mui/material";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Pie } 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
}
]
};
const options = {
layout: {
padding: {
left: 100,
right: 100,
top: 0,
}
}
}
export default function App() {
return (
<Box>
<Pie data={data} options={options} />
</Box>
);
}
将 maintainAspectRatio 设置为 false。
const options = {
maintainAspectRatio: false,
layout: {
padding: {
left: 100,
right: 100
}
}
}