如何删除 chart.js 中图表周围的空白区域

问题描述 投票:0回答:0

我在 div 元素中有一个图表,如下所示,它周围有空白。我将如何删除那里的空白区域? inspected element chart

我在这里尝试了所有答案: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>
typescript canvas chart.js svelte
© www.soinside.com 2019 - 2024. All rights reserved.