chartjs中不显示左边框

wdebmtf2  于 2024-01-07  发布在  Chart.js
关注(0)|答案(1)|浏览(291)

可见性仅限于正方形的上、右和下边缘,左侧完全隐藏。左侧没有可辨别的特征。我希望在正方形的沿着每一边都包含刺绣,从而将装饰细节延伸到整个正方形。

  1. "use client";
  2. import { useRef, useEffect, } from "react";
  3. import { Chart } from "chart.js/auto";
  4. import { border } from "@chakra-ui/react";
  5. export function IndiceIniquidade() {
  6. const chartRef: any = useRef(null);
  7. useEffect(() => {
  8. if (chartRef.current) {
  9. if (chartRef.current.chart) {
  10. chartRef.current.chart.destroy();
  11. }
  12. const context = chartRef.current.getContext("2d");
  13. const newChart = new Chart(context, {
  14. type: "bar",
  15. data: {
  16. labels: [""],
  17. datasets: [
  18. {
  19. label: "Bom",
  20. data: [{ x: [0, 20], y: "" }],
  21. backgroundColor: ["rgba(219, 96, 116, 1)"],
  22. },
  23. {
  24. label: "Ruim",
  25. data: [{ x: [20, 40], y: 0 }],
  26. backgroundColor: ["rgba(236, 141, 84, 1)"],
  27. borderColor: ["rgba(0, 0, 0, 1)"],
  28. borderWidth:2
  29. },
  30. {
  31. label: "Loading",
  32. data: [{ x: [40, 60], y: "" }],
  33. backgroundColor: ["rgba(254, 227, 119, 1)"],
  34. borderColor: ["rgba(255, 206, 86, 1)"],
  35. },
  36. {
  37. label: "Loading2",
  38. data: [{ x: [60, 80], y: "" }],
  39. backgroundColor: ["rgba(197, 202, 108, 1)"],
  40. borderColor: ["rgba(255, 206, 86, 1)"],
  41. },
  42. {
  43. label: "Loading3",
  44. data: [{ x: [80, 100], y: "" }],
  45. backgroundColor: ["rgba(142, 171, 103, 1)"],
  46. },
  47. ],
  48. },
  49. options: {
  50. indexAxis: "y",
  51. aspectRatio: 3,
  52. scales: {
  53. y: {
  54. beginAtZero: true,
  55. stacked: true,
  56. },
  57. x: {
  58. display: false,
  59. },
  60. },
  61. plugins: {
  62. legend: {
  63. display: false,
  64. },
  65. },
  66. layout: {
  67. padding: 0
  68. },
  69. responsive: true,
  70. },
  71. });
  72. chartRef.current.chart = newChart;
  73. }
  74. }, []);
  75. return (
  76. <div style={{ height: "50px" }}>
  77. <canvas ref={chartRef} />
  78. </div>
  79. );
  80. }

字符串

7kjnsjlb

7kjnsjlb1#

如文档中所述,默认情况下不会绘制水平条的左边框。(BorderSkipped Default='start'
您可以通过为要显示边框的每个栏添加borderSkipped:false来显示边框:

  1. datasets: [
  2. {
  3. label: "Bom",
  4. data: [{ x: [0, 20], y: "" }],
  5. backgroundColor: ["rgba(219, 96, 116, 1)"],
  6. },
  7. {
  8. label: "Ruim",
  9. data: [{ x: [20, 40], y: 0 }],
  10. backgroundColor: ["rgba(236, 141, 84, 1)"],
  11. borderColor: ["rgba(0, 0, 0, 1)"],
  12. borderWidth:2,
  13. borderSkipped: false //Add this line.
  14. },
  15. ...
  16. ]

字符串

展开查看全部

相关问题