最近在学习react-native和QT

react-native 报表组件react-native-chart-android的应用

reactnative jackton 713℃ 0评论

react-native-chart-android来自mpandroidchart开源组件库,包括柱状图、折线图、组合图等。https://github.com/hongyin163/react-native-chart-android

 

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

1、利用这个组件开发出了关于外汇和贵金属的行情显示 列表图如下

2、分时图

分时图主要设置参数

data[‘dec’] = dec;

data[‘xValues’]=[];  //X轴的值
data[‘yValues’]=[
{
data:[],     //Y轴的值 这里是数组 可以设置多组折线
label:’1分钟’,
config:{
color:’blue’, //折线颜色
drawValues:false,//是否显示Y值
drawCircles:false,//是否显示小圆圈
drawStepped:false,//是否平步划线
}
}
];

<LineChart
style={styles.chart} //样式
data={this.state.data}//X,Y值
visibleXRange={[0,120]}//显示范围
maxVisibleValueCount={240} //最大显示多少组数据
xAxis={{drawGridLines:false,gridLineWidth:1,position:”BOTTOM”}}//X轴设置
yAxisRight={{enable:false}} //是否显示右边Y轴
yAxis={{startAtZero:false,drawGridLines:true,position:”INSIDE_CHART”}}//坐标Y轴设置
drawGridBackground={false}
backgroundColor={“WHITE”} //背景色
description={“分时图”}
legend={{enable:true,position:’ABOVE_CHART_LEFT’,direction:”LEFT_TO_RIGHT”}}//描述
/>

3、K线图

K线图主要设置参数

kdata={
data:klinedata,//K线数据
label:””,
config:{
visbleRange:[0,50],//显示范围
color:’WHITE’,
drawValues:true,
shadowColor:”GRAY”,
shadowWidth:1,
decreasingColor:’#006030′,
decreasingPaintStyle:”FILL”,
increasingColor:’#A50B31′,
increasingPaintStyle:”FILL”
}
}

<CombinedChart
style={styles.chart}
chartPadding={“50 50″}
visibleXRange={[0,50]}
scaleYEnabled={false}
maxVisibleValueCount={150}
xAxis={{drawGridLines:false,gridLineWidth:0,position:”BOTTOM”}}
yAxisRight={{enable:false}}
yAxis={{startAtZero:false,drawGridLines:true,position:”INSIDE_CHART”,ValueFormatter:4}}
drawGridBackground={false}
backgroundColor={“WHITE”}
description={“日K线图”}
legend={{enable:true,position:’ABOVE_CHART_LEFT’,direction:”LEFT_TO_RIGHT”}}>
<CombinedChart.Chart chartType={“candle”} dec={dec} data={this.getKLineData()} />
<CombinedChart.Chart chartType={“line”} dec={dec} data={this.getAvgData()} />
</CombinedChart>

4、开发过程遇到的坑

因为开发这个组件的作者没有完整的说明文档 而且实例不是很详细 很多功能都要去自己摸索,应为是来自mpandroidchart所以有很多功能我们需要自己去修改原生组件代码

第一坑:Y刻度最小单位的设置  应为是外汇 数值比较小但是组件默认的最小值是1所以小数点刻度基本不显示  要设置有两个关键函数setGranularity()和setValueFormatter()

setGranularity是设置最小单位

setValueFormatter是设置Y刻度值显示方式

修改react-native-chart-android目录下面的java文件MPCombinedChartManager.java和MPLineChartManager.java

在public void setData(CombinedChart chart,ReadableMap rm)函数里添加

YAxis yAxis = chart.getAxisLeft();
if(rm.hasKey(“dec”)) {
int yDec=rm.getInt(“dec”);
double dDec=1/Math.pow(10, yDec);
float fDec=(float)dDec;
String strFmt=String.format(“%%.%df”,yDec);
yAxis.setGranularity(fDec);
yAxis.setValueFormatter(new CustomYAxisValueFormatter(strFmt));
}else{
yAxis.setGranularity(0.01f);
yAxis.setValueFormatter(new CustomYAxisValueFormatter(“%.2f”));
}
dec是我自己添加的属性小数点的位数 ,在组件数据data属性里面添加例如:

var data={};
data[‘dec’] = dec;
data[‘xValues’]=[];
data[‘yValues’]=[];

setValueFormatter是设置Y轴显示的格式

第二坑:就是位图显示的时候从左到右显示而且是从第一组数据开始 但是K线数据一般都是显示最新数据 所以要移动到最后一组数据

在public void setData(CombinedChart chart,ReadableMap rm)函数里添加

if(chartData.getXValCount() >0)
{
long nIndex=chartData.getXValCount()-1;
chart.moveViewToX(nIndex);
}

 

转载请注明:Coding » react-native 报表组件react-native-chart-android的应用

喜欢 (0)

您必须 登录 才能发表评论!