Android hellocharts应用——图表的绘制

ysxAshore

已于 2022-09-30 12:04:35 修改

阅读量392

点赞数 1

分类专栏： # Android_Java 文章标签： android java android studio

于 2022-08-28 15:15:01 首次发布

本文链接：https://blog.csdn.net/weixin_53966032/article/details/126569213

版权

Android_Java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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);
}