ChartJS 图表无法呈现空白页面,但条形图组件可以正常工作

kninwzqo  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(223)

我试图呈现一个简单的图表,它是工作正常的酒吧组件,但当我改变到甜甜圈组件或任何其他组件,然后它呈现一个空白的白色页面

  1. import { Box } from "@chakra-ui/react";
  2. import React from "react";
  3. import { Pie, Bar, Line, Doughnut } from "react-chartjs-2";
  4. function Donutchart() {
  5. return (
  6. <Box maxH={400} maxWidth={600}>
  7. <Doughnut
  8. options={{
  9. responsive: true,
  10. plugins: {
  11. title: {
  12. display: false,
  13. },
  14. },
  15. maintainAspectRatio: false,
  16. }}
  17. data={{
  18. labels: ["Energy", "envi", "retail", "govt"],
  19. datasets: [
  20. {
  21. label: "Sector",
  22. data: [54, 36, 12, 45],
  23. backgroundColor: "rgba(53, 162, 235, 0.5)",
  24. },
  25. ],
  26. }}
  27. height={400}
  28. width={600}
  29. />
  30. </Box>
  31. );
  32. }
  33. export default Donutchart;
kiayqfof

kiayqfof1#

也可以尝试这样导入寄存器

  1. import {
  2. Chart as ChartJS,
  3. CategoryScale,
  4. LinearScale,
  5. BarElement,
  6. Title,
  7. Tooltip,
  8. Legend,
  9. } from 'chart.js';
  10. ChartJS.register(
  11. CategoryScale,
  12. LinearScale,
  13. BarElement,
  14. Title,
  15. Tooltip,
  16. Legend
  17. );

我希望这对你有帮助

展开查看全部

相关问题