我在 div 元素中有一个图表,如下所示,它周围有空白。我将如何删除那里的空白区域?
我在这里尝试了所有答案:https://stackoverflow.com/questions/41546993/chartjs-is-there-any-way-to-remove-blank-space-around-pie-charts#:~: text=According%20to%20the%20docs%20here,Hope%20this%20helps%20someone!但它们似乎都不适用于最新版本的 chartjs(我在 4.2.1)。
图表代码:
import { Chart } from "chart.js/auto"
import { curvePlugin, textPlugin } from "./plugins"
type ChartGauge = typeof Chart
export interface Props {
// may add more prop vals later
value: number
}
export const addChart = (node: HTMLElement, params: Props): ChartGauge => {
const text = textPlugin(params)
const curve = curvePlugin()
return new Chart(node, {
type: "doughnut",
data: {
datasets: [
{
//label: params.caption,
data: [params.value, 100 - params.value],
backgroundColor: ["#056DFF", "#D9D9D9"],
borderColor: ["rgba(255, 255, 255 ,1)"],
borderWidth: 0,
},
],
},
options: {
rotation: -90,
cutout: "85%",
circumference: 180,
radius: "50%",
responsive: false
},
plugins: [text, curve],
})
}
显示代码:
<div>
<canvas
id="chart"
use:addChart={{value}}
>
</canvas>
</div>