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