chartjs中不显示左边框

wdebmtf2  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(200)

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

"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>
  );
}

字符串

7kjnsjlb

7kjnsjlb1#

如文档中所述,默认情况下不会绘制水平条的左边框。(BorderSkipped Default='start'
您可以通过为要显示边框的每个栏添加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 //Add this line.
    },
    ...
]

字符串

相关问题