如何在反应中使用 highcharts 绘制圆环图迷你图？

如何解决如何在反应中使用 highcharts 绘制圆环图迷你图？

我想在我的 React 项目中使用 highcharts 绘制甜甜圈 spakline 图。 我怎么能在反应中做到这一点？

这是我想要显示值的百分比的内容：

解决方法

您只需要使用 solid-gauge 系列类型。为了更轻松地在 React 中使用 Highcharts，请使用 highcharts-react-official 包装器。

import Highcharts from "highcharts";
import HCMore from "highcharts/highcharts-more";
import solidGauge from "highcharts/modules/solid-gauge";
import HighchartsReact from "highcharts-react-official";

HCMore(Highcharts);
solidGauge(Highcharts);

const App = () => {
  const [options] = useState(...);

  return <HighchartsReact highcharts={Highcharts} options={options} />;
};

---

现场演示： https://codesandbox.io/s/highcharts-react-demo-forked-wq2eg?file=/demo.jsx

Highcharts 演示： https://www.highcharts.com/demo/gauge-solid