【问题标题】:React Native: Create Diagram and Graph view for React Native appReact Native:为 React Native 应用程序创建图表和图形视图
【发布时间】:2021-06-26 02:17:58
【问题描述】:

我有一个项目需要在移动应用上创建图表视图。我研究了一些库,但仍然找不到任何解决方案。任何人都知道一些在 react native 上运行的好库吗?请帮忙告诉我,提前谢谢!

【问题讨论】:

  • 图表和图表是模棱两可的术语。您在寻找条形图还是节点边图?
  • react-native 的图形支持很差,尤其是交互式图形。这是由于平台抽象和缺少低级图形层。因此,很难找到任何非静态的东西。
  • 嗨@Sebastian,感谢您的帮助。我正在寻找节点边缘图。你知道有没有可以创建像 JointJS 这样的图表的 react native 库

标签: react-native mobile diagram


【解决方案1】:

我找到了这个库

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;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-08-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-01
    • 2022-10-07
    • 2016-09-25
    • 2020-05-01
    相关资源
    最近更新 更多