react-chartjs-2 chart.js：如何使圆环图的笔划宽度变细？

Question

我正在使用react-chart.js-2 chart.js在react js中实现一个甜甜圈图，但我想根据我的要求定制它，我已经做了一些定制，但是我需要做的是，将图表的宽度变细。

当前图片

enter image description here

需要图片

enter image description here

import React from "react";
import { Doughnut } from "react-chartjs-2";
const data = {
  
  datasets: [
    {
      data: [8, 25, 2, 4, 3, 21, 2],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56",
        "black",
        "blue",
        "red",
        "purple",
      ],
      borderColor: "transparent",
    
    },
  ],
};

function App() {
  return (
    <div className="App">
      {" "}
      <h2>Doughnut Example</h2>
      <Doughnut
        data={data}
        options={{
          responsive: true,
          maintainAspectRatio: false,
          tooltips: false,
          height: "2",
        }}
      />
    </div>
  );
}

export default App;

Answer 1

您需要在图表选项中定义 cutoutPercentage 选项，如下所示：

<Doughnut
    data={data}
    options={{
      responsive: true,
      cutoutPercentage: 80,
      ...
    }}
  />

cutoutPercentage: The percentage of the chart that is cut out of the middle (default value is 50).

Answer 2

在选项中编辑剪切图属性


let options = {
  responsive: true,
  cutout:"80%",
  legend: {
    display: false,
  },
  layout: {
    padding: 10,
  },
};

react-chartjs-2 chart.js：如何使圆环图的笔划宽度变细？

react-chartjs-2 chart.js: How to make strokewidth of dougnut chart thin?

javascript

reactjs

chart.js

react-chartjs

react-chartjs-2