react-native-charts-wrapper, React native图表包装( 支持 android & ios )

分享于 

10分钟阅读

GitHub

  繁體 雙語
an react native charts wrapper (support android & ios)
  • 源代码名称:react-native-charts-wrapper
  • 源代码网址:http://www.github.com/wuxudong/react-native-charts-wrapper
  • react-native-charts-wrapper源代码文档
  • react-native-charts-wrapper源代码下载
  • Git URL:
    git://www.github.com/wuxudong/react-native-charts-wrapper.git
    Git Clone代码到本地:
    git clone http://www.github.com/wuxudong/react-native-charts-wrapper
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/wuxudong/react-native-charts-wrapper
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    本机图表包装器

    这个库是流行原生图表库 MPAndroidChart图表库的原生包装器。

    简介

    react-native-mp-android-chartreact-native-ios-charts激发。

    基于 MPAndroidChart ( v3.0.3 ) &图表( v3.1.1 ) 构建了原生图表包装器,支持 android & iOS。

    ANDROID

    IOS

    支持的图表类型

    • 栏( 堆栈,组)
    • 线条
    • 散点图
    • 气泡
    • 扇形
    • 雷达
    • 组合
    • K 线图

    设置

    一步一步的教程来建立一个新项目可以在这里找到

    可以使用NPM轻松安装库:

    npm install --save react-native-charts-wrapper

    由于库使用本机代码,需要额外的设置。

    ANDROID

    1添加 Maven 存储库

    android/build。gradle

    
    allprojects {
    
    
     repositories {
    
    
    . . .
    
    
    
     maven { url"https://jitpack.io" }//used for MPAndroidChart
    
    
     }
    
    
    }
    
    
    
    
    2添加 Maven 依赖项
    • 自动安装自动安装 react

      
      react-native link react-native-charts-wrapper
      
      
      
      
    • 手动安装

    安卓/设置。gradle

    
    include ':react-native-charts-wrapper'
    
    
    project(':react-native-charts-wrapper').projectDir = new File(
    
    
     rootProject.projectDir,
    
    
     '../node_modules/react-native-charts-wrapper/android'
    
    
    )
    
    
    
    

    android/app/build.gradle

    
    dependencies {
    
    
    . . .
    
    
     compile project(':react-native-charts-wrapper')
    
    
    }
    
    
    
    

    MainApplication.java

    在导入的顶部:

    importcom.github.wuxudong.rncharts.MPAndroidChartPackage;

    getPackages 方法中添加软件包:

    protectedList<ReactPackage> getPackages() {
     returnArrays.<ReactPackage>asList(
     newMainReactPackage(),
     newMPAndroidChartPackage() // <----- Add this );
    }
    • 额外设置

    将下面的代码添加到 MainApplication.java的rn> = 0.54,检查 #229 和android示例中的代码。

    ReadableNativeArray.setUseNativeAccessor(true);ReadableNativeMap.setUseNativeAccessor(true);

    IOS

    版本 0.4.3使用图表( v3.1.1 ) & Swift 4.1

    版本 0.4.2使用图表( v3.0.3 ) & Swift 3

    你可能对contributor插件提供的本文详细指南感兴趣,但是其中一些配置已经过时,就像在桥头中缺少 #import"React/RCTFont.h" 一样。

    1添加源文件

    在项目顶层创建一个组,并在目录 node_modules/react-native-charts-wrapper/ios/ReactNativeCharts 下添加文件

    2添加桥接文件

    当你添加文件时,应该提示你创建一个桥头标头,否则你可以创建空 Swift 文件。 创建桥接头并导入 RCTViewManager.h.,它应该像这样。

    
     #import"React/RCTBridge.h"
    
    
     #import"React/RCTViewManager.h"
    
    
     #import"React/RCTUIManager.h"
    
    
     #import"React/UIView+React.h"
    
    
     #import"React/RCTBridgeModule.h"
    
    
     #import"React/RCTEventDispatcher.h"
    
    
     #import"React/RCTEventEmitter.h"
    
    
     #import"React/RCTFont.h"
    
    
    
    

    应确保在目标-> 生成设置-> Swift 编译器- 常规-> 对象c 桥接标头中设置这里文件

    3添加图表和 SwiftyJSON
    • 自动安装

    使用以下内容将 Podfile 添加到你的ios目录。 然后运行 pod install 并从现在在xcode中打开生成的。xcworkspace。

    
    use_frameworks!
    
    
    
    target 'MyApp' do
    
    
     pod 'SwiftyJSON', '3.1.4' # 4.0.0
    
    
     pod 'Charts', '3.0.3' # 3.1.1
    
    
    end
    
    
    
    post_install do |installer|
    
    
     installer.pods_project.targets.each do |target|
    
    
     target.build_configurations.each do |config|
    
    
     config.build_settings['SWIFT_VERSION'] = '3.0' # 4.0
    
    
     end
    
    
     end
    
    
    end
    
    
    
    
    • 手动安装

    用法

    有 8个支持的图表,有许多配置选项。 基本MPAndroidChart库中几乎所有可用的配置都可以通过这个。 可以在他们的上找到关于可用配置的更多细节。

    如何使用图表以及如何应用配置的示例可以在示例中找到。

    约定

    Android和IOS有不同的约定:

    • 在安卓中的颜色是 0,在ios是 -1
    • android中的百分比为 0 -100,ios为 0
    • MpAndroidChart中的animation.duration 是毫秒,图表中是秒。
    • 它们的enum 案例 NAME 总是不同的,例如 XAxisPosition,在MpAndroidChart中是 BOTH_SIDED,在图表中是 bothSided。

    在这里,我们使用了安卓惯例

    总是使用processColor来设置颜色

    数据格式

    • 完整表单

      
       data : {
      
      
      . . .
      
      
       dataSets: [
      
      
       {
      
      
       values: [
      
      
       {x: 5, y: 90},
      
      
       {x: 10, y: 130},
      
      
       {x: 50, y: 2000, marker:"eat more"},
      
      
       {x: 80, y: 9000, marker:"eat less"}
      
      
       ]
      
      
       },
      
      
      . . .
      
      
       ]
      
      
       }
      
      
      
      

    如果省略标记,则标记是可选的,索引将被使用。

    • 简化表单

      
       data: {
      
      
      . . .
      
      
       dataSets: [
      
      
       {
      
      
       values: [5, 40, 77, 81, 43]
      
      
       },
      
      
      . . ..
      
      
       ]
      
      
       }
      
      
      
      

    索引将用作x。

    检查 Example-> TimeSeriesLineChart了解详细信息

    回调

    支持值选择回调。

    你可以随心所欲,甚至弹出你自己的模式,或者跳到另一页。

    支持手势回调。

    检查 Example-> MultipleChart了解详细信息。

    直接函数调用

    支持直接函数调用。

    你可以直接使用 chart.moveViewToX(...) 或者其他函数。

    检查 Example-> MovingWindowChart了解详细信息。

    自定义标记内容

    支持自定义标记内容。

    检查 Example-> TimeSeriesLineChart了解详细信息。

    通知

    删除了设置。

    • fontFamily & fontStyle

    在 android & ios中,字体有些不同,我不知道如何以同样的方式在js中配置它。

    图表的

    你可以将图表设置为固定宽度&高度或者 flex:1

    需要帮助

    我花了几天学习 Swift 和 ios,但是我还是很新的。

    将源文件复制到项目中并不十分优雅,但是我不知道如何将它的构建为像其他框架一样的框架。

    下面是stackoverflow中的问题

    如果你能回答这个问题或者创建一个问题/公关,那是很感激的。

    许可证

    麻省理工学院许可证

    版权所有( c ) 2017 wuxudong

    版权所有( c ) 2016 Martin Skec

    版权所有( c ) 2016 E。 Padilla

    若要在取得该软件副本时免费授予任何人,如有下列条件的软件,请免费授予该软件的副本,并与相关的文档文件("软件") 进行许可,包括不受限制的权利,包括以下条件:

    上述版权声明和本许可声明须包括在所有的副本或实质性部分的软件。

    软件是"是",没有任何保证,表示或者隐含,包括但不限于销售,适合特定用途和 NONINFRINGEMENT。 作者或者版权持有人在合同。侵权或者它的他与软件或者它的他用户交易的行为。


    SUP  WRAP  换行  react  NAT  CHAR  
    相关文章