Chartjs:在饼图中只需要左填充和右填充

klr1opcd  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(250)

我在工作中有一个案例,我想使用饼图,为此我使用Chart.js(用react-chartjs-2库作为 Package 器)。
我希望在画布的左右两边都有填充,但由于某种原因,在这种情况下,我总是得到顶部填充,即使我专门键入top:有没有人知道为什么会发生这种情况,以及什么是一种只有左右填充的方法?

  1. const options = {
  2. layout: {
  3. padding: {
  4. left: 100,
  5. right: 100,
  6. top: 0,
  7. }
  8. }
  9. }

代码如下所示,同时添加了代码沙盒:
https://codesandbox.io/s/exciting-stallman-x18qku?file=/src/App.js:0-1120

  1. import "./styles.css";
  2. import { Box } from "@mui/material";
  3. import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
  4. import { Pie } from "react-chartjs-2";
  5. ChartJS.register(ArcElement, Tooltip, Legend);
  6. export const data = {
  7. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  8. datasets: [
  9. {
  10. label: "# of Votes",
  11. data: [12, 19, 3, 5, 2, 3],
  12. backgroundColor: [
  13. "rgba(255, 99, 132, 0.2)",
  14. "rgba(54, 162, 235, 0.2)",
  15. "rgba(255, 206, 86, 0.2)",
  16. "rgba(75, 192, 192, 0.2)",
  17. "rgba(153, 102, 255, 0.2)",
  18. "rgba(255, 159, 64, 0.2)"
  19. ],
  20. borderColor: [
  21. "rgba(255, 99, 132, 1)",
  22. "rgba(54, 162, 235, 1)",
  23. "rgba(255, 206, 86, 1)",
  24. "rgba(75, 192, 192, 1)",
  25. "rgba(153, 102, 255, 1)",
  26. "rgba(255, 159, 64, 1)"
  27. ],
  28. borderWidth: 1
  29. }
  30. ]
  31. };
  32. const options = {
  33. layout: {
  34. padding: {
  35. left: 100,
  36. right: 100,
  37. top: 0,
  38. }
  39. }
  40. }
  41. export default function App() {
  42. return (
  43. <Box>
  44. <Pie data={data} options={options} />
  45. </Box>
  46. );
  47. }
6mzjoqzu

6mzjoqzu1#

将maintainAspectRatio设置为false。

  1. const options = {
  2. maintainAspectRatio: false,
  3. layout: {
  4. padding: {
  5. left: 100,
  6. right: 100
  7. }
  8. }
  9. }

相关问题