关于react-native中的图表

Question

我正在开发一个项目，我在其中使用react-native图表。我正在使用的“甜甜圈图表”默认为完成圆圈100％。我尝试了“进步圈”，其中完成特定圈的进度为“1”。是否有任何替代方法可以更改这些图表的进度值来设置我想要的自定义值？

enter image description here

下面我给出了进度圆样本图像，其中只有1作为进展i，e。完成一个圈子enter image description here

Answer 1

您可以使用React-Native ART在React Native中渲染形状

Import { Art } from 'react-native';
const { Shape, Group Surface } = ART;

您可以使用'd3-shape'npm包https://github.com/d3/d3-shape/blob/master/README.md创建形状。

D3形状将为您提供“路径”。例如：

var arc = d3.arc()
.innerRadius(0)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2);

当您执行此功能时，它将返回一长串字母和数字，可用于绘制您的形状。

简单地说，将它放入React-Native ART的形状中就像这样：

render() {
    return (
        <Surface>
           <Group>
              <Shape d={arc()} /.
           </Group>
        </Surface>
     )
   }

这也是一篇好文章：https://hswolff.com/blog/react-native-art-and-d3/