Android第三方依赖包:lecho:hellocharts-library 提供了丰富的图表控件,如柱状图、折线图、饼图等,可以极大地方便页面中图表的制作
导入依赖
在项目级build.gradle文件的allprojects字典内的repositories字典内添加maven链接
maven { url "https://jitpack.io"}
在应用级build.gradle文件的dependencies字典内添加lecho依赖包:
implementation 'com.github.lecho:hellocharts-library:1.5.8@aar'
在gradle.properties中添加下列两个属性为true
android.enableJetifier=true android.useAndroidX=true
折线图LineChartView的使用
在layout布局文件中添加控件
<lecho.lib.hellocharts.view.LineChartView android:id="@+id/error_count" android:layout_width="wrap_content" android:layout_height="300dp" android:layout_margin="5dp" android:layout_below="@id/line_bottom"/>
构建点数据类
这里的示例数据类是根据图表的横纵坐标构建的(这里图表的横坐标是日期,纵坐标是次数)
具体类定义如下:
public class ErrorCountBean{ private int count;//纵轴数据 private String time;//横轴时间 public int getCount() { return count; } public void setCount(int count) { this.count = count; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } public ErrorCountBean(int count, String time) { this.count = count; this.time = time; } }
填充数据
这里数据的填充既可以选择从接口获取也可以选择自己定义
1. 从接口获取:
接口示例:http://114.116.54.197:8000/api2/errorlist/
ApiBuilder builder=new ApiBuilder().Url(StringConstant.GET_ERROR_LIST).Headers("Content-Type","application/json"); ApiClient.getInstance().doGetSaveSession(builder, new CallBack<CountBean>() { @Override public void onResponse(CountBean data) { List<Integer>count=data.getCode(); List<String>dates=data.getDate(); for (int i=0;i<count.size();i++){ countBeans.add(new ErrorCountBean(count.get(i),dates.get(i))); } setChartView(); } @Override public void onFail(String msg) { System.out.println(msg); } },CountBean.class,getContext());//在fragment中,所以最后是getContext
需要注意的是接口请求的异步性(请求与请求同级的代码同步进行)
即:如果数据从接口中获取,则需要把封装好的setChartView放在请求内部,不然setChartView中的Line类构造函数的参数PointValue数组为空,App会启动闪退
2. 自定义数据:
for (int i=0;i<10;i++){ countBeans.add(new ErrorCountBean(i,"8月10日")); }
构建图表
构建图表的相关代码已集成到setChartView函数中,具体函数的作用也已在代码中标注。
使用时只需要提供LineChartView对象和填充好的ErrorCountBean数组即可
代码如下:
private void setChartView(LineChartView chartView,ArrayList<ErrorCountBean>countBeans){ //Y轴数据点 List<PointValue> mPointValues = new ArrayList<>(); //X轴时间 List<AxisValue> axisXBottomValues = new ArrayList<>(); ArrayList<Integer>arrayList=new ArrayList<>(); for (int i = 0; i < countBeans.size(); i++) { //数据点 mPointValues.add(new PointValue(i, countBeans.get(i).getCount())); //底部数据点 axisXBottomValues.add(new AxisValue(i).setLabel(countBeans.get(i).getTime())); arrayList.add(countBeans.get(i).getCount()); } //最大值 int max= Collections.max(arrayList); int min=Collections.min(arrayList); Line line = new Line(mPointValues); //存放线条的集合 List<Line> lines = new ArrayList<>(); line.setHasLabels(true);//曲线的数据坐标是否加上备注 line.setShape(ValueShape.DIAMOND); line.setPointRadius(3);//坐标点大小 line.setCubic(true);//曲线是否平滑 line.setFilled(true);//是否填充曲线的面积 line.setHasLines(true);//是否用直线显示。如果为false 则没有曲线只有点显示 line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示 line.setColor(Color.parseColor("#FEB04C")); line.setStrokeWidth(1);//设置线的宽度 lines.add(line); LineChartData data = new LineChartData(); data.setLines(lines); //设置数据的初始值,即所有的数据从baseValue开始计算,默认值为0。 data.setBaseValue(Float.NEGATIVE_INFINITY); //传入底部list数据 Axis axisX = new Axis(); //设置底部标题(自行选择) 只能设置在正中间 axisX.setName("实验日期"); //底部标注是否斜着显示 axisX.setHasTiltedLabels(false); //字体大小 axisX.setTextSize(12); //字体颜色 axisX.setTextColor(Color.parseColor("#666666")); //各标签之间的距离 (0-32之间) axisX.setMaxLabelChars(0); //是否显示坐标线、如果为false 则没有曲线只有点显示 axisX.setHasLines(true); axisX.setValues(axisXBottomValues); data.setAxisXBottom(axisX); //左边参数设置 Axis axisY = new Axis(); //axisY.setMaxLabelChars(6); //最多几个X轴坐标,意思就是你的缩放让X轴上数据的个数 axisY.setTextSize(12); axisY.setTextColor(Color.parseColor("#666666")); axisY.setHasLines(false); //axisY.setValues(axisXLeftValues); //设置坐标轴在左边 data.setAxisYLeft(axisY); //设置行为属性,支持缩放、滑动以及平移 chartView.setInteractive(true); //水平缩放 //lineChart.setZoomType(ZoomType.HORIZONTAL); //是否可滑动 chartView.setScrollEnabled(true); //放入数据源至控件中 chartView.setLineChartData(data); //设置最大缩放比例。默认值20 chartView.setMaxZoom(10); //开始以动画的形式更新图表数据 chartView.startDataAnimation(); //动画时长 chartView.startDataAnimation(3); //取消动画 chartView.cancelDataAnimation(); //图表触摸事件 chartView.setOnValueTouchListener(new LineChartOnValueSelectListener() { @Override public void onValueSelected(int i, int i1, PointValue pointValue) { System.out.println("onValueSelected:" + i + "\n" + i1); System.out.println("X轴:" + pointValue.getX()); System.out.println("Y轴:" + pointValue.getX()); } @Override public void onValueDeselected() { } }); //viewport必须设置在setLineChartData后面,设置一个当前viewport,再设置一个maxviewport, //就可以实现滚动,高度要设置数据的上下限 //设置是否允许在动画进行中或设置完表格数据后,自动计算viewport的大小。如果禁止,则需要可以手动设置。 //lineChart.setViewportCalculationEnabled(true); Viewport v = new Viewport(chartView.getMaximumViewport()); //Y轴最大值为 加上5、防止显示不全 v.top = max + 5; //Y轴最小值 v.bottom = Math.max((min - 5), 0);//最小值 //设置最大化的viewport (chartdata)后再调用 //这2个属性的设置一定要在lineChart.setMaximumViewport(v);这个方法之后,不然显示的坐标数据是不能左右滑动查看更多数据的 chartView.setMaximumViewport(v); //左边起始位置 轴 v.left = 0; //左右滑动 chartView.setCurrentViewport(v); }
效果图展示: