如何在chart.js中删除图表周围的白色

bfhwhh0e  于 2023-05-06  发布在  Chart.js
关注(0)|答案(1)|浏览(207)

我在div元素中有一个图表,如下所示,它周围有白色。我该如何去除那里的白色?inspected elementchart
我试过了所有的答案: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>
yptwkmov

yptwkmov1#

将半径设置为更大的值REPL

options: {
    ...
    radius: "80%",
},

相关问题