[译]React Native 开源图表组件 (react-native-chart-android)[译]React

本文来自:江清清的技术专栏-翻译组(www.lcode.org)

项目介绍

react-native-chart-android提供为android模块添加图表,图表都来自mpandroidchart开源组件库,包括柱状图、折线图、组合图等。

关于MpAndroidChart更多详细,你可以阅读下面的文档:

1.MPAndroidChart:github.com/PhilJay/MPA…

2.MPAndroidChart-Wiki:github.com/PhilJay/MPA…

安装方法

npm install react-native-chart-android --save

添加到Android项目

1.修改android项目中的setting.gradle文件

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

2.修改android项目中build.gradle文件，具体路径为android/app/build.gradle

...
dependencies {
  ...
  compile project(':react-native-chart-android')
}

3.在MainActivity.java中注册该模块

import cn.mandata.react_native_mpchart.MPChartPackage;  // <--- import="" public="" class="" mainactivity="" extends="" activity="" implements="" defaulthardwarebackbtnhandler="" {="" ......="" @override="" protected="" void="" oncreate(bundle="" savedinstancestate)="" super.oncreate(savedinstancestate);="" mreactrootview="new" reactrootview(this);="" mreactinstancemanager="ReactInstanceManager.builder()" .setapplication(getapplication())="" .setbundleassetname("index.android.bundle")="" .setjsmainmodulename("index.android")="" .addpackage(new="" mainreactpackage())="" mpchartpackage())="" <------="" add="" this="" line="" to="" yout="" .setusedevelopersupport(buildconfig.debug)="" .setinitiallifecyclestate(lifecyclestate.resumed)="" .build();="" mreactrootview.startreactapplication(mreactinstancemanager,="" "androidrnsample",="" null);="" setcontentview(mreactrootview);="" }="" }<="" pre="">
4.使用实例
/* @flow */
'use strict';

var React = require('react-native');
var TitleBar=require('./TitleBar');
var {
  BarChart,
  CombinedChart
}=require('../index.android');
var {
  StyleSheet,
  View,
  Text
} = React;

var Component = React.createClass({
  getBarData:function (argument) {
    var data={
      xValues:['1','2','3'],
      yValues:[
        {
          data:[4.0,5.0,6.0],
          label:'test1',
          config:{
            color:'blue'
          }
        },
        {
          data:[4.0,5.0,6.0],
          label:'test2',
          config:{
            color:'red'
          }
        },
        {
          data:[4.0,5.0,6.0],
          label:'test2',
          config:{
            color:'yellow'
          }
        }
      ]
    };  
    return data;
  },
  getRandomData:function (argument) {
    var data={};
    data['xValues']=[];
    data['yValues']=[
      {
        data:[],
        label:'test1',
        config:{
          color:'blue'
        }
      }
    ];
    for (var i = 0; i < 500; i++) {
      data.xValues.push(i+'');
      data.yValues[0].data.push(Math.random()*100);
    };
    return data;
  },
  render: function() {
    return (
      
        
        
          
          
        
      
    );
  }
});

var styles = StyleSheet.create({
  container:{
    flex:1
  },
  chartContainer:{
    flex:1
  },
  chart:{
    flex:1
  }
});

module.exports = Component;
5.运行效果截图:
查看图片查看图片
在该项目的Sample目录中还有一些例子，大家可以进行下载运行查看具体效果.