reactnative报表

来自： http://www.lcode.org/react-native-chart-android/

尊重版权,转载请注明出处
本文来自:江清清的技术专栏-翻译组(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);
}

......

}

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;

5.运行效果截图:


 


在该项目的Sample目录中还有一些例子，大家可以进行下载运行查看具体效果.