android 开源图表库MPChart最简单使用方法示例教程Demo--折线图 柱状图

来源:互联网 发布:拓扑优化方面的书籍 编辑:程序博客网 时间:2024/05/20 15:58

转载请注明本文出处:http://blog.csdn.net/wingichoy/article/details/50428246


MPChart是android上一款强大的图表开源库,他可以轻松的绘制折线图 柱状图 饼状图等等..


由于项目需要用到,于是去百度了一番,发现先有的demo基本上没有讲解,新手看起来会很复杂。于是想写一篇最简单的使用方法。


老规矩,先上效果图



可以看出来我用MPChart绘制了一个折线图,支持手势缩放 很简单好用!

废话不多说,直接开始今天的内容:

一、需要原料:

1.MPChart的库。

2.Android Studio

3.程序猿一只

二、步骤:

1.先从git上面clone下来所需要的项目依赖,复制MPChartLib到我们的项目中(与app)同级。

      2.打开settings.gradle 输入

include 'MPChartLib'
打开app.build.gradle 输入

compile project (':MPChartLib')

3.在布局文件中加入LineChart

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.wingsofts.mpchartdemo.MainActivity">   <com.github.mikephil.charting.charts.LineChart       android:id="@+id/lineChart"       android:layout_width="match_parent"       android:layout_height="match_parent">   </com.github.mikephil.charting.charts.LineChart></RelativeLayout>
4.在代码中操作数据集。这里介绍一下涉及到的类

XAxis 为 X轴的类

Entry 为每个点的类

DataSet 一组Y轴上面的数据

Linedata 整个Y轴的数据

有了这些涉及到的类,在看代码应该很好理解了,直接上代码:

public class MainActivity extends AppCompatActivity {    private LineChart mLineChart;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mLineChart = (LineChart) findViewById(R.id.lineChart);        XAxis xAxis = mLineChart.getXAxis();        //设置X轴的文字在底部        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);        //设置描述文字        mLineChart.setDescription("7天走势图");        //模拟一个x轴的数据  12/1 12/2 ... 12/7        ArrayList<String> xValues = new ArrayList<>();        for (int i = 1; i < 8; i++) {            xValues.add("12/" + i);        }        Log.e("wing", xValues.size() + "");        //模拟一组y轴数据(存放y轴数据的是一个Entry的ArrayList) 他是构建LineDataSet的参数之一        ArrayList<Entry> yValue = new ArrayList<>();        for (int i = 0; i < 7; i++) {            yValue.add(new Entry(i, i));        }        //构建一个LineDataSet 代表一组Y轴数据 (比如不同的彩票: 七星彩  双色球)        LineDataSet dataSet = new LineDataSet(yValue, "双色球");        //模拟第二组组y轴数据(存放y轴数据的是一个Entry的ArrayList) 他是构建LineDataSet的参数之一        ArrayList<Entry> yValue1 = new ArrayList<>();        yValue1.add(new Entry(7, 0));        yValue1.add(new Entry(17, 1));        yValue1.add(new Entry(3, 2));        yValue1.add(new Entry(5, 3));        yValue1.add(new Entry(4, 4));        yValue1.add(new Entry(3, 5));        yValue1.add(new Entry(7, 6));        Log.e("wing", yValue.size() + "");        //构建一个LineDataSet 代表一组Y轴数据 (比如不同的彩票: 七星彩  双色球)        LineDataSet dataSet1 = new LineDataSet(yValue1, "七星彩");        dataSet1.setColor(Color.BLACK);        //构建一个类型为LineDataSet的ArrayList 用来存放所有 y的LineDataSet   他是构建最终加入LineChart数据集所需要的参数        ArrayList<LineDataSet> dataSets = new ArrayList<>();        //将数据加入dataSets        dataSets.add(dataSet);        dataSets.add(dataSet1);        //构建一个LineData  将dataSets放入        LineData lineData = new LineData(xValues, dataSets);        //将数据插入        mLineChart.setData(lineData);    }}

好了,快运行一下看看效果吧,其他的折线图啊等等,都是一样的,只需要比着葫芦画瓢就可以了。

如果你有兴趣还可以看看简易图表 自定义View 系列。

求关注 求评论 求star

https://github.com/githubwing

5 0