Chartjs：我只想在饼图中左右填充

Question

我在工作中有一个案例想使用饼图。为此，我使用 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>
  );
}

Answer 1

将 maintainAspectRatio 设置为 false。

const options = {
  maintainAspectRatio: false,
  layout: {
    padding: {
      left: 100,
      right: 100
    }
  }
}

Chartjs：我只想在饼图中左右填充

Chartjs: I only want left and right padding in pie chart

reactjs

charts

chart.js

react-chartjs

react-chartjs-2