React Native ：为React Native应用程序创建图表和图形视图

yc0p9oo0 于 2022-11-25 发布在 React

关注(0)|答案(2)|浏览(135)

我有一个项目，需要在移动的应用程序上创建一个图表视图。我已经研究了一些库，但仍然没有找到任何解决方案。有人知道一些好的库运行在React原生？请帮助让我知道，提前感谢！

react-native

来源：https://stackoverflow.com/questions/66864602/react-native-create-diagram-and-graph-view-for-react-native-app

2条答案

按热度按时间

toiithl61#

我发现了这个图书馆

https://www.npmjs.com/package/react-native-svg-charts

首先，安装此库

npm i react-native-svg-charts
npm i react-native-svg

第二个

cd ios
pod install

创建如下新屏幕，

import React from 'react';
import {BarChart, XAxis} from 'react-native-svg-charts';
import {View} from 'react-native';
import * as scale from 'd3-scale';

class App extends React.PureComponent {
  render() {
    const data = [14, 80, 100, 55];

    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <View
          style={{
            height: 200,
            width: '80%',
          }}>
          <BarChart
            style={{flex: 1}}
            data={data}
            gridMin={0}
            svg={{fill: 'rgb(134, 65, 244)'}}
          />
          <XAxis
            style={{marginTop: 10}}
            data={data}
            scale={scale.scaleBand}
            formatLabel={(value, index) => index}
            labelStyle={{color: 'black'}}
          />
        </View>
      </View>
    );
  }
}

export default App;

赞(0）回复(0）举报 2022-11-25

yduiuuwa2#

您可以查看以下列表，找到最适合您的：

赞(0）回复(0）举报 2022-11-25