可见性仅限于正方形的上边、右边和底边,左侧保持完全隐藏.左边没有明显的特征.我希望广场的每一面都有刺绣,这样就可以把装饰细节延伸到整个广场周围

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

推荐答案

如文档by default中所提到的,将不绘制水平条的左边界.(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.
    },
    ...
]

Reactjs相关问答推荐

在一个地方调用函数会影响其他地方调用该函数

如何通过浏览器路由在单独的.jsx文件中使用MUI抽屉?

根据另一个Select中的选定值更改Select中的值

React中的useEffect钩子

每次单击按钮时,Reaction组件都会重新生成

更改滑块标记的文本 colored颜色 ./Reaction/MUI 5

在transformResponse中使用来自其他查询的缓存

为什么在页面重新加载时Location.State变得未定义?

使用获取的数据更新状态,但在try console.log 时它给出未定义

修改React数据表扩展组件

使用D3.js绘制和展示弦图的右下方象限

CORS策略:对预检请求的响应未通过访问控制判断:没有Access-Control-Allow-Origin

根据其中的值不同地react setState 更新状态

即使配置了 webpack.config.js,html-loader 也不起作用

位于组件material-ui中的TextField中的 map 功能不起作用

将 useState 设置为组件内部的值

React Final Form - 单选按钮在 FieldArray 中不起作用

我正在try 使用 cypress 测试我的下拉列表,它 Select 值但不提交它们(手动工作)

Cypress ,重试不再附加到 DOM 的元素

将鼠标悬停在仅适用于该类的第一个实例的 p5.js 类上