react - 覆蓋畫布的樣式

Question

這是當前的用戶界面
我想刪除數字（1-10）的background-color ，即#fff 。

有可能這樣做嗎？

應用程序.tsx

import React from "react";
import {
  Chart as ChartJS,
  RadialLinearScale,
  ArcElement,
  Tooltip,
  Legend
} from "chart.js";
import { PolarArea } from "react-chartjs-2";

ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);

export const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [1, 1, 1, 10, 1, 1],
      backgroundColor: [
        "rgba(255, 99, 132, 0.5)",
        "rgba(54, 162, 235, 0.5)",
        "rgba(255, 206, 86, 0.5)",
        "rgba(75, 192, 192, 0.5)",
        "rgba(153, 102, 255, 0.5)",
        "rgba(255, 159, 64, 0.5)"
      ],
      borderWidth: 1
    }
  ]
};

export function App() {
  return <PolarArea data={data} />;
}

代碼沙盒
https://codesandbox.io/s/autumn-sun-ty6egy?file=/App.tsx

Answer 1

如果您唯一的問題是：

我想刪除背景顏色......可以這樣做嗎？

答案是肯定的。 毫無疑問，這是可能的！

...但是您確定數字上有背景顏色嗎？
它看起來對我來說是透明的......

---

但由於該圖表不是您的代碼，您將不得不依賴他們所擁有的：
https://react-chartjs-2.js.org/components/polar-area

或者，如果您掌握了技能，請修改您正在使用的包的源代碼：
https://github.com/reactchartjs/react-chartjs-2

---

這是一個帶數字的圓圈，沒有背景：

 var c = document.getElementById('canvas').getContext("2d"); c.fillText("88", 45, 15) c.arc(50, 50, 40, Math.PI * 3/2 + 0.2, Math.PI * 3/2 - 0.2) c.stroke()

 <canvas id="canvas"></canvas>

Answer 2

我從 Github 得到了答案

對於 PolarArea 圖表，您需要像這樣設置選項：

export const options = {
  scales: {
    r: {
      ticks: {
        backdropColor: "rgba(0,0,0,0)"
      }
    }
  }
};

例子：
https://codesandbox.io/s/headless-shadow-b9v2kx?file=/App.tsx:243-363