Android的图表世界?如何使用MPAndroidChart

最新推荐文章于 2024-08-09 07:08:28 发布
最新推荐文章于 2024-08-09 07:08:28 发布
阅读量988 收藏
点赞数


2015-05-02 23:55

Android的图表世界?如何使用MPAndroidChart

应用中常常需要展现一部分数据给用户，选择通过带有动画的统计图来替代简单的表格式布局往往会给用户带来不错的体验，这篇教程主要讲解如何使用一款非常受欢迎的第三方图形库MPAndroidChart：https://github.com/PhilJay/MPAndroidChart


我们今天要实现的效果：

1，将MPAndroidChart添加进Android Project
  • 新建AndroidChartDemo
  • 从GitHub下载所需的mpandroidchartlibrary-2-0-9.jar(https://github.com/PhilJay/MPAndroidChart/releases)
  • 将下载好的jar包添加进工程下的libs文件夹下，并鼠标右键 Add as Libary
    2，完成主界面布局

    主界面布局是几个比较简单的button，代码如下：

    layout->activity_main.xml

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="4dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_linechart"
            android:text="@string/linechart"
            android:textColor="#ffffff"
            android:textSize="18sp"
            android:background="#8CEBFF"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
        <Button
            android:id="@+id/btn_barchart"
            android:text="@string/barchart"
            android:textColor="#ffffff"
            android:textSize="18sp"
            android:background="#8CEBFF"
            android:layout_marginRight="5dp"
            android:layout_marginLeft="5dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>
    <Button
        android:id="@+id/btn_horizontalchart"
        android:text="@string/horizontalchart"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:background="#C5FF8C"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_combinedchart"
        android:text="@string/combinedchart"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:background="#FF6600"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_piechart"
        android:text="@string/piechart"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:background="#FF6600"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_scatterchart"
        android:text="@string/scatterchart"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:background="#FF6600"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_candlechart"
        android:text="@string/candlechart"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:background="#FF6600"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/btn_radarchart"
        android:text="@string/radarchart"
        android:textColor="#ffffff"
        android:textSize="18sp"
        android:background="#FF6600"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="50dp"
        android:layout_marginRight="50dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    </LinearLayout>

    布局效果： 
    这里写图片描述

    3，实现MainActivity.java

    将每个Button实例化，通过点击button跳转到相应的Activity，这部分代码比较简单：

    MainActivity.java

    public class MainActivity extends ActionBarActivity implements View.OnClickListener {
private Button btn_linechart;
private Button btn_barchart, btn_horizonalbarchart;
private Button btn_combinedchart;
private Button btn_piechart;
private Button btn_scatterchart;
private Button btn_candlechart;
private Button btn_radarchart;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    btn_linechart = (Button) findViewById(R.id.btn_linechart);
    btn_barchart = (Button) findViewById(R.id.btn_barchart);
    btn_horizonalbarchart = (Button) findViewById(R.id.btn_horizontalchart);

    btn_combinedchart = (Button) findViewById(R.id.btn_combinedchart);

    btn_piechart = (Button) findViewById(R.id.btn_piechart);
    btn_scatterchart = (Button) findViewById(R.id.btn_scatterchart);
    btn_candlechart = (Button) findViewById(R.id.btn_candlechart);
    btn_radarchart = (Button) findViewById(R.id.btn_radarchart);

    btn_linechart.setOnClickListener(this);

    btn_barchart.setOnClickListener(this);
    btn_horizonalbarchart.setOnClickListener(this);
    btn_combinedchart.setOnClickListener(this);
    btn_piechart.setOnClickListener(this);
    btn_scatterchart.setOnClickListener(this);
    btn_candlechart.setOnClickListener(this);
    btn_radarchart.setOnClickListener(this);

}


@Override
public void onClick(View view) {
    Intent intent = null;
    switch (view.getId()) {
        case R.id.btn_linechart:
            intent = new Intent(MainActivity.this, LineChartActivity.class);
            break;
        case R.id.btn_barchart:
            intent = new Intent(MainActivity.this, BarChartActivity.class);
            break;
        case R.id.btn_horizontalchart:
            intent = new Intent(MainActivity.this, HorizontalChart.class);
            break;
        case R.id.btn_combinedchart:
            intent = new Intent(MainActivity.this, CombinedChartActivity.class);
            break;
        case R.id.btn_piechart:
            intent = new Intent(MainActivity.this, PieChartActivity.class);
            break;
        case R.id.btn_scatterchart:
            intent = new Intent(MainActivity.this, ScatterChartActivity.class);
            break;
        case R.id.btn_candlechart:
            intent = new Intent(MainActivity.this, CandleChart.class);
            break;
        case R.id.btn_radarchart:
            intent = new Intent(MainActivity.this, RadarChartActivity.class);
            break;
    }
    startActivity(intent);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    return super.onOptionsItemSelected(item);
}
}
    4，实现对应的各个图表Activity

    这才是我们需要真正使用MPAndroid的部分

    在开始编写这部分代码之前，我们先来分析一下一个图表需要哪些要素：

  • 需要一个数据集DataSet，即我们需要绘制在图中的数据
  • 需要设定X、Y坐标对应显示什么
  • 通过一个Chart对象将它们显示出来

    事实上，任何一个图形库实现绘图功能的逻辑也是这么设计的；

    MPAndroidChart的使用：

    在这里我们使用倒推摸索的方法来实现绘制一个图表： 
    首先我们需要知道如何将chart绘制到界面中，有两种方法：

  • 在布局文件中 
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    然后在Activity或Fragment中

    LineChart chart=(LineChart)findViewById(R.id.chart);

    直接在代码中使用 ：

    LinearChart chart=new LineChart(Context context);
setContentView(chart);

    接下来通过下面的方法设置图表需要显示的数据

        chart.setData(LineData||BarData之类);//设置显示数据

    那看来又需要一个构造出一个XXData对象

     LineData data=new LineData(List<String> xVals,LineDataSet dataSet);//对应横坐标标签和数据集

    看来我们还需要创建dataSet

    LineDataSet dataSet=new LineDataSet(List<Entry> yVals,String label);//对应纵坐标条目和对数据集的描述

    现在只需要创建ArrayList<Entry> yVals即可；

    这样的话我们已经把chart的基本过程搞清楚了，我们以一个公司的利润报表为例，以1-12月为横坐标标签，以每个月的利润为yVals，每个月的利润为了方便我是用一个随机数代替，下面看看具体的代码：

        public class BarChartActivity extends Activity {

    private Random random;//用于产生随机数

    private BarChart chart;
    private BarData data;
    private BarDataSet dataSet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置显示图表
        chart = new BarChart(getApplicationContext());
        setContentView(chart);


        /**图表具体设置*/
        ArrayList<BarEntry> entries = new ArrayList<>();//显示条目
        ArrayList<String> xVals = new ArrayList<String>();//横坐标标签
        random=new Random();//随机数
        for(int i=0;i<12;i++){
            float profit= random.nextFloat()*1000;
            //entries.add(BarEntry(float val,int positon);
            entries.add(new BarEntry(profit,i));
            xVals.add((i+1)+"月");
        }
        dataSet = new BarDataSet(entries, "公司年利润报表");
        dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
        data = new BarData(xVals, dataSet);
        chart.setData(data);
        //设置Y方向上动画animateY(int time);
        chart.animateY(3000);
        //图表描述
        chart.setDescription("公司前半年财务报表(单位：万元)");

    }
    }

    实现效果： 
    这里写图片描述

    在这里以另一个典型的LineChart为例，大家可以对比与BarChart有什么区别：

    LineChartActivity.java

    public class LineChartActivity extends Activity {

    private LineChart chart;
    private LineData data;
    private ArrayList<String> xVals;
    private LineDataSet dataSet;
    private ArrayList<Entry> yVals;
    private Random random;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        chart=new LineChart(this);
        setContentView(chart);
        xVals=new ArrayList<>();
        yVals=new ArrayList<>();
        random=new Random();
        for(int i=0;i<12;i++){
            float profix=random.nextFloat();
            yVals.add(new Entry(profix,i));
            xVals.add((i+1)+"月");
        }
        dataSet=new LineDataSet(yVals,"公司年度利润");
        dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
        data=new LineData(xVals,dataSet);
        chart.setData(data);
        chart.setDescription("公司年度利润");
        chart.animateY(3000);
    }
    }

    实现效果 
    这里写图片描述

    可以看到其他Chart的实现方式和BarChat大同小异，只是Data和DataSet子类不同而已，只要掌握了上面所讲的基本步骤，就可以实现其他Chart了，故不再赘述。下面是其他一些常用的方法：

        chart.saveToGallery("mychart.jpg", 85); // 保存图表，85 is the quality of the image
    LimitLine line = new LimitLine(10f);
    data.addLimitLine(line);//添加图表的限制线
    dataset.setColors(ColorTemplate.COLORFUL_COLORS);//让数据集显示不同的颜色

    各图表实现后效果 
    这里写图片描述 这里写图片描述 这里写图片描述 这里写图片描述

    总结：

    这里只是抛砖引玉，讲解了MPAndroidChart的基本用法，大家可以举一反三，研究下源码，根据自己的需求实现更加复杂和多变的Chart，英文好的同学也可以去研究下文档(https://github.com/PhilJay/MPAndroidChart/wiki)

    作为检验，你可以试着用今天所学的实现下面天气变化的效果：

    这里写图片描述

huangjiamingboke
关注
专栏目录
详解Android图表 MPAndroidChart折线图
08-31
MPAndroidChart是一款强大的Android图表库，它允许开发者轻松地在应用程序中展示各种图表类型，包括折线图、柱状图、饼图等。本篇文章主要聚焦于如何在Android项目中使用MPAndroidChart来创建折线图。 首先，要集成...
Android的图表世界–如何使用MPAndroidChart
热门推荐
CatTalk
05-02 1万+
Android的图表世界–如何使用MPAndroidChart 应用中常常需要展现一部分数据给用户，选择通过带有动画的统计图来替代简单的表格式布局往往会给用户带来不错的体验，这篇教程主要讲解如何使用一款非常受欢迎的第三方图形库MPAndroidChart：https://github.com/PhilJay/MPAndroidChart 感谢PhilJay 我们今天要实现的效果
图表MAPAndroidChart(模板)
chuyouyinghe的专栏
02-23 1096
Android之图表MAPAndroidChart(模板) 有点多，但是都是模板，复制粘贴即可用 mirrors / PhilJay / MPAndroidChart · GitCode 一、圆饼图 二、柱状图 三、折线图 四、网状图 1，添加依赖 implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha' 添加：maven { url "https://jitpack.io" }如下 a...
推荐开源项目：AndroidCharts - 简单易用的Android图表库
最新发布
gitblog_00870的博客
08-09 896
推荐开源项目：AndroidCharts - 简单易用的Android图表库 AndroidChartsAn easy-to-use Android charts library with animation.项目地址:https://gitcode.com/gh_mirrors/an/AndroidCharts 在数据可视化日益重要的今天，一个简洁且功能强大的图表库对于开发者来说是必不可少的。...
使用Android创建一个波形图，可以显示峰值
weixin_35755640的博客
01-06 404
可以使用 Android 的图表库 MPAndroidChart 来创建一个波形图。首先，在项目的 build.gradle 文件中添加 MPAndroidChart 的依赖： implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0' 然后，在布局文件中添加 LineChart 控件： <com.github.mikephil.ch...
Android的MPAndroidChart使用方式。条形图使用方法
qq_36570506的博客
03-04 883
Android的MPAndroidChart使用方式。条形图使用方法
【Android -- 开源库】绘制图表 MPAndroidChart 的基本使用
Kevin Learn Android
07-07 5595
Android 平台绘图的开源库有好几个，最成熟最出名的就属于 MPAndroidChart 了，他能帮我们实现曲线图、折线图、柱状图、饼状图，分布图等等。同时还可以实现混合图表。
Android利用MPAndroidChart绘制曲线图表的基础教程
01-05
前言 最近看了一下 Android 上的图表控件，去年做过一款应用也已上架了，也用到了图表控件，但是只是...基本上 start 从高到低的图表控件就是 MPAndroidChart、hellocharts-android、WilliamChart、XCL-Charts、EazeGra
Android-MPAndroidChart:使用 MPAndroidChart 将图表添加到您的 Android 应用程序
06-24
Tuts+ 教程：使用 MPAndroidChart 将图表添加到您的 Android 应用程序 讲师：Hathibelagal Ashraff 如果您的应用处理大量数据，那么如果您选择使用图表而不是表格来显示这些数据，您的用户将会喜欢您。 有许多可...
android 图表 MPAndroidChart demo
04-29
在"android 图表 MPAndroidChart demo"中，你可以找到如何使用MPAndroidChart的实例代码和演示。通过这个Demo，开发者可以了解如何配置图表、设置数据、定制图表样式以及交互功能。以下是一些关键知识点的详细说明：...
Android最火的框架系列（十三）MpAndroidChart
zhaojun的博客
03-23 6839
本系列篇主要介绍下Android非常火爆的三方图表库MpAndroidChart的使用。可能在大多数情况下，我们很少会在Android端去开发图表，一般情况下图表都会在PC端用H5去展示。但如果说做一些金融财经类、工厂类、统计类、大数据类等的app，肯定会涉及到到数据可视化分析，那么你绝对会用到MpAndroidChart。
Android 图表开发开源库 MPAndroidChart 使用总结
三翼鸟数字化平台的技术实践分享
05-30 1959
MPAndroidChart 集成使用过程详解
MPAndroidChart 教程：概述，熬夜整理2024最新Android高级笔试题
m0_60667406的博客
03-19 885
该图标库支持。
Android MPAndroid chart图表案例
shi450561200的博客
02-05 2812
由于有关于Android mpAndroidchart使用文章网上较多，本文就不一一列举使用步骤，只涉及案例。
MPAndroidChart 教程：设置数据，设置颜色(1)，Android开发必看
m0_60147147的博客
03-30 1183
该类封装有预定义的颜色整数数组（例如）和便利的从资源加载颜色的方法。类的源码/***//***//***//**@return*//**@param r@return*//**colors.@return*/当时自从 MPAndroidChart V1.4.0 之后，这个类就不再重要了。我们可以直接通过DataSet对象进行指定颜色，从而可以区分每个DataSet的 Style。
【Android Studio】第三方库 图表（MPAndroidChart）使用
涛涛子的博客
03-31 3917
该类是 Chart 图表的 Y 轴，但 Chart 中有左右两个 Y 轴，分别由 chart.getAxisLeft()、chart.getAxisRight()可以在该监听函数中实现点击不同的数据在另一个 Chart 中展现对应的不同的数据。​ 该类是图表的控件，类似于按键、图片，是从 xml 文件中通过 id 获取到的。​ 该类是 Chart 的限制线，作用是呈现一些特殊的信息，像边界、约束等。​ 该类是 Chart 图表的 X/Y 轴的基类。​ 该类是一个 Chart 类的标题。
android MpAndroidChart 统计图使用
qq_35491100的博客
03-15 873
Mpandroidchart 使用
Android绘制地图
清风哥哥的专栏
02-26 3189
谨遵项目要求，在项目中添加地图：中国地图和世界地图。 中国地图在网上找到了对应的开源Demo，根据自己的需求做相应的修改即可，具体如何实现，可以参考开源Demo中的详细解说。 世界地图的实现，在网上没有找到相应的开源数据，运用相同的原理，将地图绘制在UI上。 第一：准备数据源。使用svg数据来绘制地图，首先准备好svg数据 &lt;?xml version="1.0" encoding="...
使用DashPathEffect绘制一条动画曲线
Data的博客
03-22 1238
引言 以前在做曲线图的时候，一直想实现曲线动态绘制的效果。类似于js图表库中的效果：http://www.highcharts.com/demo/spline-symbols 那个时候没有安卓中没有任何一个原声的图表库实现了这种效果。不管是aChartEngine，还是后来的MPAndroidChart，HelloCharts都没有在曲线图方面做到很好的展示效果。 HelloCharts以及
使用MPAndroidChart实现支付宝月账单视图
本文主要介绍了如何在Android应用中使用MPAndroidChart库实现支付宝风格的月账单视图，通过展示柱状图或饼状图来呈现用户的消费数据。首先，文章强调了并非自定义View的开发，而是利用开源项目简化实现过程。 1. **...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值