可见性仅限于正方形的上、右和下边缘,左侧完全隐藏。左侧没有可辨别的特征。我希望在正方形的沿着每一边都包含刺绣,从而将装饰细节延伸到整个正方形。
"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>
);
}
字符串
1条答案
按热度按时间7kjnsjlb1#
如文档中所述,默认情况下不会绘制水平条的左边框。(
BorderSkipped Default='start'
)您可以通过为要显示边框的每个栏添加
borderSkipped:false
来显示边框:字符串