[譯]React Native開源圖表組件

尊重版權,轉載請注明出處

本文來自:江清清的技術專欄-翻譯組(http://www.lcode.org)

開源項目地址: https://github.com/hongyin163/react-native-chart-android

項目介紹

react-native-chart-android提供為android模塊添加圖表,圖表都來自mpandroidchart開源組件庫,包括柱狀圖、折線圖、組合圖等。

關于MpAndroidChart更多詳細,你可以閱讀下面的文檔:

1.MPAndroidChart: https://github.com/PhilJay/MPAndroidChart/

2.MPAndroidChart-Wiki: https://github.com/PhilJay/MPAndroidChart/wiki

安裝方法

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())
  .addPackage(new MPChartPackage()) // <------ add this line to yout MainActivity class
  .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 (
      <View style={styles.container}>
        <TitleBar/>
        <View style={styles.chartContainer}>
          <BarChart style={{flex:1}} data={this.getBarData()}/>
          <BarChart 
            style={{flex:1}} 
            data={this.getRandomData()}
            visibleXRange={[0,30]}
            maxVisibleValueCount={50} 
                xAxis={{drawGridLines:false,gridLineWidth:1,position:"BOTTOM"}}
                yAxisRight={{enable:false}} 
                yAxis={{startAtZero:false,drawGridLines:false,position:"INSIDE_CHART"}}
                drawGridBackground={false}
                backgroundColor={"WHITE"} 
                description={"測試"}
                legend={{enable:true,position:'ABOVE_CHART_LEFT',direction:"LEFT_TO_RIGHT"}}
            />
        </View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container:{
    flex:1
  },
  chartContainer:{
    flex:1
  },
  chart:{
    flex:1
  }
});
module.exports = Component;</pre> 
 
5.運行效果截圖:

   
在該項目的Sample目錄中還有一些例子，大家可以進行下載運行查看具體效果.
 </div>