时间戳

首页 > 解决方案 > react-chartjs-2 chart.js：如何使甜甜圈图表的笔画宽度变薄？

javascript - react-chartjs-2 chart.js：如何使甜甜圈图表的笔画宽度变薄？

问题描述

我正在使用 react-chart.js-2 chart.js 在 react js 中实现一个圆环图，但是我想根据我的要求对其进行自定义，我已经进行了一些自定义，但是我需要做的是，图表的宽度很薄。

当前图像

在此处输入图像描述

所需图片

在此处输入图像描述

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;

标签： javascriptreactjschart.jsreact-chartjsreact-chartjs-2

解决方案

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

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

cutoutPercentage：图表从中间切出的百分比（默认值为50）。

推荐阅读