如何使用CSS构建弧/径向式仪表？

Question

在我的React应用程序中，我需要构建一个UI组件，它是一个弧形/径向加载仪表，如下图所示：

黑条从0开始并在0-100之间动画到所需的％。

灰色条是静态的，就像背景一样。

我找到了几个开源图形库，它们做了类似但不够近的工作。关于如何在我的反应应用程序中构建此类UI的任何建议？此外，如果您知道支持此UI的React库，请告诉我们。

Answer 1

查看https://gionkunz.github.io/chartist-js/或https://gist.github.com/emiloberg/ee549049ea0f6b83e25f1a1110947086

所有人都至少拥有一些你可以完全使用或部分使用的东西。

如果你很懒：https://gionkunz.github.io/chartist-js/examples.html#simple-gauge-chart

- 编辑 -

您可以使用react-chartist进行反应。一个例子是：

import React from 'react';
import ChartistGraph from 'react-chartist';

const gaugeChartData = {
  series: [
    series: [20, 10, 30, 40]
  ]
};

const gaugeChartOptions = {
  donut: true,
  donutWidth: 60,
  startAngle: 270,
  total: 200,
  showLabel: false
}

<ChartistGraph data={gaugeChartData} options={} type={'Pie'} />

谨慎使用，未经测试