分享一款适用于react-native的图表组件

逃离我推掉我的手 2021-12-10 04:34 517阅读 0赞

转载自：https://blog.csdn.net/daniel1227/article/details/95972996

在github上找了很多图表类的插件，大多都是直方图之类的显示完好，到了饼图都差强人意。因为react-native版本更新的快，用不同的版本必须适配不同的第三方库，所以很多repo维护的都比较慢（或者类似于[react-native-chart][]就直接不更新了），如果你非得用某个第三方库，在你当前版本不适合的情况下，要么换库，要么就降级react-native版本。这导致在开发上非常棘手，因为是团队项目，不可能去降级react-native版本的啊，在找适合的第三方库的过程中也是一度陷入了绝望之中。直到在react-native-chart的readme中发现了[victory-native][]。什么鬼。。。。。和我平常在git-hub上搜索的套路完全不一致啊。。。

项目地址：[https://github.com/FormidableLabs/victory-native][https_github.com_FormidableLabs_victory-native]

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmllbDEyMjc_size_16_color_FFFFFF_t_70][]

## 安装victory-native ##

首先，先要安装[react-native-svg][]，对应你的react-native版本号进行安装。

react-native-svg >= 3.2.0 only supports react-native >= 0.29.0
    react-native-svg >= 4.2.0 only supports react-native >= 0.32.0
    react-native-svg >= 4.3.0 only supports react-native >= 0.33.0
    react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0
    react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0
    react-native-svg >= 5.1.8 only supports react-native >= 0.44.0 and react == 16.0.0-alpha.6
    react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12
    react-native-svg >= 5.3.0 only supports react-native >= 0.46.0 and react == 16.0.0-alpha.12
    react-native-svg >= 5.4.1 only supports react-native >= 0.47.0 and react == 16.0.0-alpha.12
    react-native-svg >= 5.5.1 only supports react-native >= 0.50.0 and react == 16.0.0

之后link一下

react-native link react-native-svg

重新打包安装

react-native run-ios
    // or
    react-native run-android

然后安装victory-native

yarn add victory-native

## 使用 ##

先引入，这里只讨论折线图，不过很多参数都是共同的，其他的见[官方文档][Link 1]

import { VictoryLine, VictoryChart, VictoryTheme } from 'victory-native';

使用组件（[moment][]组件是一个专门用来计算日期的js组件）

<VictoryChart theme={VictoryTheme.material} minDomain={
       { y: 0 }}>
                    <VictoryLine
                      style={
       { data: { stroke: '#c43a31' } }}
                      data={[
                        {
                          x: moment()
                            .subtract(6, 'days')
                            .format('MM-DD'),
                          y: this.state.sevenDayConutData ? this.state.sevenDayConutData[0] : 0
                        },
                        {
                          x: moment()
                            .subtract(5, 'days')
                            .format('MM-DD'),
                          y: this.state.sevenDayConutData ? this.state.sevenDayConutData[1] : 0
                        },
                        {
                          x: moment()
                            .subtract(4, 'days')
                            .format('MM-DD'),
                          y: this.state.sevenDayConutData ? this.state.sevenDayConutData[2] : 0
                        },
                        {
                          x: moment()
                            .subtract(3, 'days')
                            .format('MM-DD'),
                          y: this.state.sevenDayConutData ? this.state.sevenDayConutData[3] : 0
                        },
                        {
                          x: moment()
                            .subtract(2, 'days')
                            .format('MM-DD'),
                          y: this.state.sevenDayConutData ? this.state.sevenDayConutData[4] : 0
                        },
                        {
                          x: moment()
                            .subtract(1, 'days')
                            .format('MM-DD'),
                          y: this.state.sevenDayConutData ? this.state.sevenDayConutData[5] : 0
                        },
                        {
                          x: moment().format('MM-DD'),
                          y: this.state.sevenDayConutData && this.state.sevenDayConutData ? this.state.sevenDayConutData[6] : 0
                        }
                      ]}
                      labels={datum => (datum.y > 0 ? datum.y : '')}
                      scale="time"
                    />
                  </VictoryChart>

### 参数 ###

看下官方文档，写的非常详尽。

## 参考资料 ##

1.  [react-native-svg repo 地址][react-native-svg]
2.  [victory-native repo 地址][victory-native repo]
3.  [victory官方文档][victory]
4.  [moment官网][moment]

[react-native-chart]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2Ftomauty%2Freact-native-chart
[victory-native]: https://link.jianshu.com?t=https%3A%2F%2Fgithub.com%2FFormidableLabs%2Fvictory-native
[https_github.com_FormidableLabs_victory-native]: https://github.com/FormidableLabs/victory-native
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhbmllbDEyMjc_size_16_color_FFFFFF_t_70]: /images/20211209/c1bd0ad73a954121abbe8b58480d9626.png
[react-native-svg]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2Freact-native-community%2Freact-native-svg
[Link 1]: https://formidable.com/open-source/victory/docs/victory-line
[moment]: http://momentjs.cn/
[victory-native repo]: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2FFormidableLabs%2Fvictory-native
[victory]: https://link.jianshu.com/?t=https%3A%2F%2Fformidable.com%2Fopen-source%2Fvictory%2Fdocs%2Fnative%2F