android客户端动态折线图

标签: 折线图 LineChart
12人阅读 评论(0) 收藏 举报
分类:

1.添加依赖

compile ‘com.github.PhilJay:MPAndroidChart:v3.0.2’

2.在布局文件中添加RelativeLayout,相当于一个容器,目的是可以在界面动态刷新数据

    <RelativeLayout
        android:id="@+id/line_chat_rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

3.初始化控件

RelativeLayout line_chat_rl = (RelativeLayout) findViewById(R.id.line_chat_rl);

在加载数据前,判断是否当前界面第一次加载折线数据,目的是清除上一次的请求的数据

private boolean isloadChatLineData = false;//是否当前界面加载过折线数据
private List<Integer> list = new ArrayList<>();//数据集合
private List<String> names = new ArrayList<>();// 折线名字集合
private List<Integer> colour = new ArrayList<>();//折线颜色集合
 if (isloadChatLineData) {
            line_chat_rl.removeAllViews();
            names.clear();
            colour.clear();
        }
        //设置折线图表格的宽(屏幕的款)和高(800px)
LineChart  lineChart = new LineChart(this);
        lineChart.getAxisRight().setEnabled(false);//去除表右边值
        lineChart.setMinimumWidth(screenWidth);
        lineChart.setMinimumHeight(800);
        line_chat_rl.addView(lineChart);

    //折线的名字
        names.add("收入");
        names.add("支出");
        names.add("利润");
        //折线颜色
        colour.add(Color.RED);
        colour.add(Color.GREEN);
        colour.add(Color.BLUE);
        //折线初始化
       MyLineChartManager myLineChartManager = new MyLineChartManager(lineChart, names, colour);

4.请求数据,显示折线图

根据自己的服务器设计的需求来,这是我项目设计的接口

    error_no:       @int, 返回状态码, 0-表示接口返回正常
    error_msg:      @str, error_no不为0时的错误提示信息
    data: {
        month_income:       @str, 本月收入
        month_spending:     @str, 本月支出
        month_profits:      @str, 本月利润
        date_list: [{
            day:                    @str, 日期
            income:                 @float, 收入
            spending:               @float, 支出
            profits:                @float, 利润
        },...]
    }

获取数据之后,进行解析,获取收入,支出,利润三个值的最大值和最小值,这个过程需要你自己来进行计算,然后折线图进行再次设置

myLineChartManager.setYAxis("y轴最大值", "轴最小值",y轴设置点的个数);

折线图添加数据

 //一次一次追加数据,折线也是追加,并清除上一次的集合,说白了,就是不断遍历者一个月同一天的收入,支出,利润3个数据添加list中
                                    for (int k = 0; k < monthDataBean.data.date_list.size(); k++) {
                                        list.add((int) (monthDataBean.data.date_list.get(k).income));
                                        list.add((int) (monthDataBean.data.date_list.get(k).spending));
                                        list.add((int) (monthDataBean.data.date_list.get(k).profits));
                                        myLineChartManager.addEntry(list, k + 1 + "日");
                                        list.clear();
                                    }

//是否当前界面加载过折线数据,设置为true
                                    isloadChatLineData = true;

5.折线入的封装

public class MyLineChartManager {

    private LineChart lineChart;
    private YAxis leftAxis;
    private YAxis rightAxis;
    private XAxis xAxis;
    private LineData lineData;
    private LineDataSet lineDataSet;
    private List<ILineDataSet> lineList = new ArrayList<>();
    private SimpleDateFormat df = new SimpleDateFormat("ss");//设置日期格式
    private List<String> timeList = new ArrayList<>(); //存储x轴的时间
    private Entry entry;


    //多条曲线构造
    public MyLineChartManager(LineChart mLineChart, List<String> lineNames, List<Integer> lineColors) {
        this.lineChart = mLineChart;
        leftAxis = lineChart.getAxisLeft();
        rightAxis = lineChart.getAxisRight();
        xAxis = lineChart.getXAxis();
        initLineChart();//初始化表格
        initLineDataSet(lineNames, lineColors);//初始化线

        //leftAxis.setValueFormatter(new CustomYValueFormatter(true));
        //rightAxis.setValueFormatter(new CustomYValueFormatter(true));
    }


    /**
     * 初始化LineChar
     */
    private void initLineChart() {

        lineChart.setDrawGridBackground(true);//显示背景
        lineChart.setDrawBorders(true);//显示边界


        //折线图例 标签 设置
        Legend legend = lineChart.getLegend();
        legend.setForm(Legend.LegendForm.LINE);
        legend.setTextSize(11f);

        //显示位置
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        legend.setDrawInside(false);

        //X轴设置显示位置在底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        xAxis.setGranularity(1f);
        xAxis.setLabelCount(10);

        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return timeList.get((int) value % timeList.size());
            }
        });

        //保证Y轴从0开始,不然会上移一点
        leftAxis.setAxisMinimum(0f);
        rightAxis.setAxisMinimum(0f);
    }


    /**
     * 初始化折线(多条线)
     *
     * @param lineNames
     * @param lineColors
     */
    private void initLineDataSet(List<String> lineNames, List<Integer> lineColors) {


        for (int i = 0; i < lineNames.size(); i++) {//遍历线的集合
            lineDataSet = new LineDataSet(null, lineNames.get(i));//逐一创建新的线,线的属性值集合
            lineDataSet.setColor(lineColors.get(i));
            lineDataSet.setLineWidth(1f);
            lineDataSet.setCircleRadius(3f);
            lineDataSet.setColor(lineColors.get(i));

            lineDataSet.setHighlightEnabled(false);//去除十字高亮
            // lineDataSet.setDrawHighlightIndicators(false);


            lineChart.setScaleEnabled(false);
            lineDataSet.setDrawFilled(false);
            lineDataSet.setCircleColor(lineColors.get(i));
            //  lineDataSet.setHighLightColor(lineColors.get(i));//高亮颜色
            // lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);//默认折线
            lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT);//标注
            lineDataSet.setValueTextSize(0f);
            lineList.add(lineDataSet);//添加线的集合

        }
        //添加一个空的 LineData
        lineData = new LineData();
        lineChart.setData(lineData);
        lineChart.invalidate();

    }


    /**
     * 动态添加数据(多条折线图)
     *
     * @param threeSingleLineList
     */
    public void addEntry(List<Integer> threeSingleLineList, String days) {

        if (lineList.get(0).getEntryCount() == 0) {//y值的集合
            lineData = new LineData(lineList);
            lineChart.setData(lineData);
        }

        timeList.add(days);
        for (int i = 0; i < threeSingleLineList.size(); i++) {
            entry = new Entry(lineDataSet.getEntryCount(), threeSingleLineList.get(i));//获取单个线
            lineData.addEntry(entry, i);//单个线逐渐加点
            lineData.notifyDataChanged();//单个点追加,刷新
            lineChart.notifyDataSetChanged();
            lineChart.setVisibleXRangeMaximum(6);
            lineChart.moveViewToX(0);//显示的位置
            //lineChart.moveViewToX(lineData.getEntryCount() - 5);
        }
    }

    /**
     * 设置Y轴值
     *
     * @param max
     * @param min
     * @param labelCount
     */
    public void setYAxis(float max, float min, int labelCount) {
        if (max < min) {
            return;
        }

        leftAxis.setAxisMaximum(max);
        leftAxis.setAxisMinimum(min);
        leftAxis.setLabelCount(labelCount, false);

        rightAxis.setAxisMaximum(max);
        rightAxis.setAxisMinimum(min);
        rightAxis.setLabelCount(labelCount, false);

        lineChart.invalidate();

    }

    /**
     * 设置高限制线
     *
     * @param high
     * @param name
     */
    public void setHightLimitLine(float high, String name, int color) {
        if (name == null) {
            name = "高限制线";
        }
        LimitLine hightLimit = new LimitLine(high, name);
        hightLimit.setLineWidth(4f);
        hightLimit.setTextSize(10f);
        hightLimit.setLineColor(color);
        hightLimit.setTextColor(color);
        leftAxis.addLimitLine(hightLimit);
        lineChart.invalidate();
    }

    /**
     * 设置低限制线
     *
     * @param low
     * @param name
     */
    public void setLowLimitLine(int low, String name) {
        if (name == null) {
            name = "低限制线";
        }
        LimitLine hightLimit = new LimitLine(low, name);
        hightLimit.setLineWidth(4f);
        hightLimit.setTextSize(10f);
        leftAxis.addLimitLine(hightLimit);
        lineChart.invalidate();
    }

    /**
     * 设置描述信息
     *
     * @param str
     */
    public void setDescription(String str) {
        Description description = new Description();
        description.setText(str);
        lineChart.setDescription(description);
        lineChart.invalidate();
    }
}
查看评论

JavaAndroid客户端和C#服务端Web Api接口开发

-
  • 1970年01月01日 08:00

JFreeChart生成动态折线图

JFreeChart生成动态折线图
  • WSKinght
  • WSKinght
  • 2017-10-20 14:34:48
  • 911

AChartEngine图表库之动态折线图(一条)

习惯先上图 使用Android图表引擎AChartEngine来实现 具体实现 1 设置XYMultipleSeriesDataset private XYMultipleSeriesDat...
  • huiling815
  • huiling815
  • 2016-10-10 17:55:54
  • 696

highcharts折线图动态数据展示

highcharts折线图动态数据展示:
  • gslzydwgh
  • gslzydwgh
  • 2017-07-18 12:17:20
  • 1552

android源代码-canvas绘制动态折线图

  • 2015年07月08日 10:17
  • 1.39MB
  • 下载

winform chart动态跟进式折线图

  • 2016年01月03日 22:07
  • 4.8MB
  • 下载

js动态折线图

  • 2014年07月19日 16:50
  • 9KB
  • 下载

QtCharts动态的显示折线图

本本提供一个可以动态绘制折线图的接口Graph,该接口只提供了每次加入一个点的方法,其他方法可以在此基础上添加。绘制曲线图等类似。 QT版本:QT5.7或以上 QT5.5或5.6可以按照如下方法部署Q...
  • tianya_team
  • tianya_team
  • 2017-09-12 11:20:20
  • 933

动态折线图-Android篇

有时候我们在项目中会遇到使用折线图等图形,Android的开源项目中为我们提供了很多插件,如但是很多时候我们需要根据具体项目自定义这些图表,这一篇文章我们一起来看看如何在Android中使用Canva...
  • guomutian911
  • guomutian911
  • 2014-11-16 22:34:53
  • 881

achartengine折线图和动态折线图

  • 2013年07月01日 08:57
  • 1.47MB
  • 下载
    个人资料
    等级:
    访问量: 1719
    积分: 178
    排名: 103万+
    文章存档