React-native 面积图

Question

是否可以使用任何现有的图表库在react-native中实现类似的功能？

我尝试查看react-native-gifted-charts、react-native-chart-kit和react-native-echarts的文档，但没有成功。 Echarts似乎是最可定制的，但我仍然无法得到那个结果

Answer 1

这可以通过 react-native-gifted-charts 库轻松实现。要渲染上面的图表，您可以按照以下步骤操作-

1. 渲染

   <LineChart>

   组件并添加

   areaChart

   属性以使其成为面积图。您可以使用

   curved

   道具使其弯曲（而不是直线）。
2. 使用

   data

   和

   data2

   属性传递两行数据。
3. 使用

   color

   和

   color2

   道具为线条添加颜色。使用

   startFillColor

   和

   startFillColor2

   道具将区域填充为红色和绿色。
4. 最后添加道具

   intersectionAreaConfig

   ，为两个图表之间的交叉部分着色，颜色与图表的背景颜色相匹配，使交叉区域不可见。

这是一个例子-

上图的代码是-

<LineChart
  areaChart
  curved
  data={data}
  data2={data2}
  color="red"
  color2="green"
  startFillColor="orange"
  startFillColor2="cyan"
  intersectionAreaConfig={{fillColor: '#fafafa'}}
  hideDataPoints
  spacing={30}
/>