Javascript 需要帮助将数据标签集中在高图中饼图切片的顶部

您可以将标签放在图表切片的顶部居中，主要更改将在options.plotOptions.pie.dataLabels.distance属性上进行，以控制标签的距离.

因此，固定代码将如下所示:

import Highcharts from "highcharts";
import { each } from "lodash";
import { PureComponent } from "react";
import "./styles.css";

function redrawDatalabels() {
  var chart = this,
    cX = chart.plotWidth / 2,
    cY = chart.plotHeight / 2,
    shapeArgs,
    ang,
    posX,
    posY,
    bBox;

  each(chart.series[0].data, function (point, i) {
    if (point.dataLabel) {
      bBox = point.dataLabel.getBBox();
      shapeArgs = point.shapeArgs;
      ang = (shapeArgs.end - shapeArgs.start) / 2 + shapeArgs.start;
      let labelPos = point.labelPosition.alignment === "right" ? 1 : -1;
      labelPos = (labelPos * bBox.width) / 2;
      posX = cX + (shapeArgs.r / 2) * Math.cos(ang) + labelPos;
      posY = cY + (shapeArgs.r / 2) * Math.sin(ang) - bBox.height / 2;
      point.dataLabel._pos.x = posX;
      point.dataLabel._pos.y = posY;
    }
  });
  chart.series[0].placeDataLabels();
}


const options = {
  chart: {
    animation: false,
    renderTo: "chart1",
    type: "pie",
  },
  legend: {
    enabled: true,
  },
  plotOptions: {
    chart: {
      animation: false,
      renderTo: "chart1",
      type: "pie",
      events: {
        load: redrawDatalabels,
        redraw: redrawDatalabels
      }
    },
    legend: {
      enabled: true
    },
    pie: {
      allowPointSelect: true,
      cursor: "pointer",
      dataLabels: {
        enabled: true,
        connectorWidth: 0,
        format: "{point.percentage:.1f}%",
        distance: -25, // Adjust the distance of labels from the cente
        style: {
          color:
            (Highcharts.theme && Highcharts.theme.contrastTextColor) || "black",
          textOutline: "none", 
        },
      },
      size: "80%",
      innerSize: "65%",
    },
  },
  series: [
    {
      type: "pie",
      name: "Browser share",
      data: [
        ["Firefox", 50],
        ["IE", 10],
        ["Chrome", 30],
        ["Safari", 5],
        ["Opera", 5],
      ],
    },
  ],
};

class App extends PureComponent {
  componentDidMount() {
    this.chart1 = Highcharts.chart(options);
  }

  render() {
    return (
      <div className="App">
        <div id="chart1" />
      </div>
    );
  }
}

export default App;

我在您的Sandbox 上编辑了这段代码，它看起来是这样的: