如何使用CSS构建一个弧形/径向样式的仪表？

Question

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

​

​

其中黑条从0开始，并在0-100之间设置动画到所需的%。

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

我发现了几个开放源码的图形库，它们做了类似的事情，但还不够接近。关于如何在我的react应用程序中使用css构建这种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将其与react一起使用。下面是一个例子：

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'} />

小心使用，这是未经测试的