javascript - 如何在React apexcharts中将数据标签移动到中心

Question

如何将饼图数据标签放置在中心。

这是我的饼图的样子。

数据标签值粘在图表的边框上。我怎样才能将它们移到中心一点？

这是我的代码。

import React from "react";
import Chart from "react-apexcharts";

const TopAttackVector = () => {
  return (
    <div className="font">
      <Chart
        className="mx-96"
        type="pie"
        width={450}
        height={250}
        series={[30, 30, 30]}
        options={{
          labels: [
            "Stolen Credentials",
            "Business Disruption",
            "Data Compromise",
          ],
          colors: ["#ce9f2c", "#062341", "#00BFFF", "#229466"],
          dataLabels: {
            enabled: true,
            offsetX: 30,
            style: {
              fontSize: "16px",
              fontFamily: "Helvetica, Arial, sans-serif",
              fontWeight: "bold",
            },
          },
          stroke: {
            width: 0,
          },
          legend: {
            fontSize: "14px",
            fontWeight: "bold",
            itemMargin: "left",
          },
        }}
      />
    </div>
  );
};

export default TopAttackVector;

Answer 1

更改plotOptions中的dataLabels 偏移https://apexcharts.com/docs/options/plotoptions/pie/#dataLabelsOffset

plotOptions: {
  pie: {
    dataLabels: {
      offset: -50,
    }, 
  }
}