javascript - 如何在 react 中使用 highcharts 绘制圆环图迷你图？

Question

我想在我的 react 项目中使用 highcharts 绘制 donut spakline 图。
我怎么能在 react 中做到这一点？
这就是我想要显示值的百分比的内容:

Answer 1

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

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