chartjs 中未出现左边框

Question

可见性仅限于正方形的上边缘、右边缘和下边缘，左侧完全隐藏。左边没有明显的特征。我希望在正方形的每一边都加入刺绣，从而将装饰细节扩展到整个正方形。

"use client";
import { useRef, useEffect, } from "react";
import { Chart } from "chart.js/auto";
import { border } from "@chakra-ui/react";

export function IndiceIniquidade() {
  const chartRef: any = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      if (chartRef.current.chart) {
        chartRef.current.chart.destroy();
      }

      const context = chartRef.current.getContext("2d");

      const newChart = new Chart(context, {
        type: "bar",
        data: {
          labels: [""],
          datasets: [
            {
              label: "Bom",
              data: [{ x: [0, 20], y: "" }],
              backgroundColor: ["rgba(219, 96, 116, 1)"],
            },
            {
              label: "Ruim",
              data: [{ x: [20, 40], y: 0 }],
              backgroundColor: ["rgba(236, 141, 84, 1)"],
              borderColor: ["rgba(0, 0, 0, 1)"],
              borderWidth:2
              
            },
            {
              label: "Loading",
              data: [{ x: [40, 60], y: "" }],
              backgroundColor: ["rgba(254, 227, 119, 1)"],
              borderColor: ["rgba(255, 206, 86, 1)"],
            },
            {
              label: "Loading2",
              data: [{ x: [60, 80], y: "" }],
              backgroundColor: ["rgba(197, 202, 108, 1)"],
              borderColor: ["rgba(255, 206, 86, 1)"],
            },
            {
              label: "Loading3",
              data: [{ x: [80, 100], y: "" }],
              backgroundColor: ["rgba(142, 171, 103, 1)"],
            },
          ],
        },
        options: {
          indexAxis: "y",
          aspectRatio: 3,
          scales: {
            y: {
              beginAtZero: true,
              stacked: true,
            },
            x: {
              display: false,
            },
            
          },
          plugins: {
            legend: {
              display: false,
            },
          },
          layout: {
            padding: 0
          },
          responsive: true,
        },
      });

      chartRef.current.chart = newChart;
    }
  }, []);

  return (
    <div style={{ height: "50px" }}>
      <canvas ref={chartRef} />
    </div>
  );
}

Answer 1

默认情况下，左边框将被跳过。

您可以通过为要显示边框的每个栏添加

borderSkipped:false

来显示边框：

datasets: [
    {
      label: "Bom",
      data: [{ x: [0, 20], y: "" }],
      backgroundColor: ["rgba(219, 96, 116, 1)"],
    },
    {
      label: "Ruim",
      data: [{ x: [20, 40], y: 0 }],
      backgroundColor: ["rgba(236, 141, 84, 1)"],
      borderColor: ["rgba(0, 0, 0, 1)"],
      borderWidth:2,
      borderSkipped: false
    },
    ...
]