• 由于项目需要用到,于是去百度了一番,发现先有的demo基本上没有讲解,新手看起来会很复杂。于是想写一篇最简单的使用方法。 老规矩,先上效果图 可以看出来我用MPChart绘制了一个折线图,支持手势缩放 很简单...

    转载请注明本文出处: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

    展开全文
  • 由于Google提供的AChartEngine的功能强大但使用起来较为复杂,MPAndroidChart同样能够实现一些效果较好的直方图,折线图,饼图等绘制,使用也较为简单轻便;介绍MPAndroidChart主要的Api方法: setDescription(String...

    ##由于Google提供的AChartEngine的功能强大但使用起来较为复杂,MPAndroidChart同样能够实现一些效果较好的直方图,折线图,饼图等绘制,使用也较为简单轻便;

    介绍MPAndroidChart

    主要的Api方法:

    • setDescription(String desc) : 设置表格的描述
    • setDescriptionTypeface(Typeface t) :自定义表格中显示的字体
    • setDrawYValues(boolean enabled) : 设置是否显示y轴的值的数据
    • setValuePaintColor(int color) :设置表格中y轴的值的颜色,但是必须设置setDrawYValues(true)
    • setValueTypeface(Typeface t):设置字体
    • setValueFormatter(DecimalFormat format) : 设置显示的格式
    • setPaint(Paint p, int which) : 自定义笔刷
    • public ChartData getDataCurrent() :返回ChartData对象当前显示的图表。它包含了所有信息的显示值最小和最大值等
    • public float getYChartMin() : 返回当前最小值
    • public float getYChartMax() : 返回当前最大值
    • public float getAverage() : 返回所有值的平均值。
    • public float getAverage(int type) : 返回平均值
    • public PointF getCenter() : 返回中间点
    • public Paint getPaint(int which) : 得到笔刷
    • setTouchEnabled(boolean enabled) : 设置是否可以触摸,如为false,则不能拖动,缩放等
    • setDragScaleEnabled(boolean enabled) : 设置是否可以拖拽,缩放
    • setOnChartValueSelectedListener(OnChartValueSelectedListener l) : 设置表格上的点,被点击的时候,的回调函数
    • setHighlightEnabled(boolean enabled) : 设置点击value的时候,是否高亮显示
    • public void highlightValues(Highlight[] highs) : 设置高亮显示
    • saveToGallery(String title) : 保存图表到图库中
    • saveToPath(String title, String pathOnSD) : 保存.
    • setScaleMinima(float x, float y) : 设置最小的缩放
    • centerViewPort(int xIndex, float val) : 设置视口
    • fitScreen() : 适应屏幕

    下面是一个在自己项目上使用的小Demo

    • xml文件中
    <com.github.mikephil.charting.charts.PieChart
            android:layout_marginTop="20dp"
            android:id="@+id/spread_pie_chat"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/Null"
            android:layout_weight="1"
            android:layout_gravity="center_horizontal"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true">
        </com.github.mikephil.charting.charts.PieChart>
    
    • java文件中
    /**
        -    Function:    drawPie()
        -    Description:    绘制饼状图
        **/
       public void drawPie(){
    
           //名字
           ArrayList<String> names=new ArrayList<String>();
           names.add("缺勤");
           names.add("出勤");
           //大小
           ArrayList<Entry> sizes=new ArrayList<Entry>();
           sizes.add(new Entry(10,0));
           sizes.add(new Entry(44,1));
           //颜色
           ArrayList<Integer> colors=new ArrayList<Integer>();
           colors.add(Color.parseColor("#FE4365"));
           colors.add(Color.parseColor("#00FF7F"));
    
           PieDataSet pieDataSet=new PieDataSet(sizes,"");//参数:颜色栏显示颜色目录
           pieDataSet.setValueTextSize(10f);
           //pieDataSet.setDrawValues(true);//是否在块上面显示值以及百分百
           //pieDataSet.setSliceSpace(0f);//块间距
           pieDataSet.setColors(colors);
    
    
           //DisplayMetrics metrics=this.getResources().getDisplayMetrics();
           PieData pieData=new PieData(names,pieDataSet);
    
           pieChart.setHoleRadius(120f);  //半径
           pieChart.setTransparentCircleRadius(50f); // 半透明圈
           //pieChart.setTransparentCircleRadius(0f);//设置大圆里面透明小圆半径,和洞不是一个圆
    
           pieChart.setDrawHoleEnabled(true);
           pieChart.setHoleColorTransparent(true);//设置中心洞是否透明:true为黑,false为白
           pieChart.setHoleRadius(50f);//设置大圆里面的无色圆的半径(洞...)
           pieChart.setCenterText("本次课堂");  //饼状图中间的文字
    
           pieChart.setDescription("");//参数:右下角显示图形描述
    
           //pieChart.setDrawCenterText(false);//不显示图中心文字
           //pieChart.setCenterText("traffic graph");//图中心文字
           pieChart.setRotationEnabled(true);//手动旋转
    
           //pieChart.setDrawMarkerViews(false);
           //pieChart.setDrawSliceText(false);//块的文本是否显示
    
    
    
           pieChart.setData(pieData);
    
           Legend legend=pieChart.getLegend();
           legend.setEnabled(true);//是否显示图形说明,必须要放在setData后,否则出错
           legend.setTextSize(15f);
    
           //两个参数有不同的意思:
           //durationMillisX:每个块运行到固定初始位置的时间
           //durationMillisY: 每个块到绘制结束时间
           pieChart.animateXY(1000, 1000);//设置动画(参数为时间)
       }
       /**
        -   Function:    drawHistogram()
        -   Description:    绘制柱状图
        **/
       public void drawHistogram(){
           //名称
           ArrayList<String> mMonths=new ArrayList<String>();
           mMonths.add("3月3日");
           mMonths.add("3月6日");
           mMonths.add("3月10日");
           mMonths.add("3月13日");
           mMonths.add("3月17日");
           mMonths.add("3月20日");
           mMonths.add("3月24日");
           //大小(高低)
           ArrayList<BarEntry> sizes=new ArrayList<BarEntry>();
           sizes.add(new BarEntry(50,0));
           sizes.add(new BarEntry(51,1));
           sizes.add(new BarEntry(52,2));
           sizes.add(new BarEntry(49,3));
           sizes.add(new BarEntry(54,4));
           sizes.add(new BarEntry(54,5));
           sizes.add(new BarEntry(45,6));
    
           //颜色
           BarDataSet barDataSet=new BarDataSet(sizes,"");
           barDataSet.setValueTextSize(10f);
           ArrayList<Integer> colors = new ArrayList<Integer>();
           for(int i = 0;i < 7 ;i++){
               colors.add(Color.parseColor(color[i]));
           }//颜色设置
           barDataSet.setColors(colors);
           BarData barData=new BarData(mMonths,barDataSet);
           barChart.setDescription("历史出勤统计图");//数据描述
           barChart.setDescriptionTextSize(12f);
           barChart.setNoDataTextDescription("No data for the chart");// 如果没有数据的时候,会显示这个,类似ListView的EmptyView
           barChart.setPinchZoom(false);// 集双指缩放
           barChart.setScaleEnabled(false);//手动缩放效果
           barChart.setPinchZoom(false);//xy轴同时缩放,和setScaleEnabled一起使用
    
           barChart.setDrawGridBackground(false);
           //barChart.setDrawBorders(false);//画布边
           //barChart.setVisibleXRange(7);
           //barChart.setMaxVisibleValueCount(6);
           barChart.setDrawBarShadow(false);//设置矩形阴影不显示
           //barChart.setBackgroundColor(Color.parseColor("#FFFFFF"));//设置背景颜色
    
           //barChart.setMinOffset(0);//=padding
           barChart.setDrawValueAboveBar(true);
    
           barChart.setData(barData);
           barChart.animateXY(1000, 1000);//设置动画
           Legend legend=barChart.getLegend();//取消图形说明
           legend.setEnabled(false);
    
           //获取X轴坐标
           XAxis xAxis=barChart.getXAxis();
           xAxis.setPosition(XAxisPosition.BOTTOM);//X坐标位于图标底部
           xAxis.setDrawGridLines(false);
           xAxis.setSpaceBetweenLabels(2);//设置名字names之间的间距
           //xAxis.
    
           //获取Y轴右坐标
           YAxis yAxisR=barChart.getAxisRight();
           yAxisR.setEnabled(true);
           yAxisR.setDrawGridLines(true);
    
           //获取Y轴左坐标
           YAxis yAxisL=barChart.getAxisLeft();
           yAxisL.setEnabled(true);
           yAxisL.setDrawGridLines(true);
       }
    

    效果图

    这里写图片描述

    对于简单图表需求MPAndroidChart都可以很好的解决,大家可以试试

    在这里插入图片描述

    展开全文
  • MPAndroidChart折线图Demo

    2020-07-09 10:30:02
    Demo对应的博客地址:http://blog.csdn.net/kong_gu_you_lan/article/details/53634368
  • 一个简单的折线图Demo 布局文件 Activity文件 效果展示 参考链接 前言  实验室的项目需要做一个折线图波形,来显示数据。在MATLAB上,只需要一个plot函数就行了,但是在Android上,需要借助一个第三方...


    前言

    实验室的项目需要做一个折线图波形,来显示数据。在MATLAB上,只需要一个plot函数就行了,但是在Android上,需要借助一个第三方开源库MPAndroid来实现。本文是对MPAndroidCharts的一个学习和总结。
      MPAndroidChart是一款基于Android的开源图表库,它能实现很多常用的图表类型,如:线型图、饼图、柱状图和散点图。除此之外,它还提供了一些对图表的操作功能,如拖拽、缩放、显示动画效果等。基本上,该开源库能够满足一般性图表绘制需求。

    开发环境

    开发环境主要包括开源库版本、IDE的环境和操作系统,不同环境会有不同的配置和使用方法,很多技术贴不喜欢在文章开头声明自己所用的开发环境,这样会对人产生很大的误导。

    • Windows 10 Enterprise 64bit
    • Android Studio 3.1.2
    • Gradle 4.1
    • MPAndroidChart 2.2.5

    安装和配置

    在project的build.gradle文件中的buildscript 节点下加入如下代码:

    allprojects {
        repositories {
            maven { url 'https://jitpack.io' }
        }
    }
    

    在APP的build.gradle 文件中的dependencies配置依赖库,我们使用V2.2.5的版本(并不是最新版):

    implementation 'com.github.PhilJay:MPAndroidChart:v2.2.5'
    

    配置完之后,点击Sysnc Now 就行了。

    一个简单的折线图Demo

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/chart1"
            android:layout_width="match_parent"
            android:layout_height="300dp"
             />
    </RelativeLayout>
    

    Activity文件

    
    package com.example.jason.mpandroidchatrsdemo;
    
    import android.graphics.Color;
    import android.graphics.Typeface;
    import android.graphics.drawable.Drawable;
    import android.os.Bundle;
    import android.support.v4.app.FragmentActivity;
    import android.support.v4.content.ContextCompat;
    import android.util.Log;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.view.MotionEvent;
    import android.view.WindowManager;
    import android.widget.SeekBar;
    import android.widget.SeekBar.OnSeekBarChangeListener;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.github.mikephil.charting.animation.Easing;
    import com.github.mikephil.charting.charts.LineChart;
    
    import com.github.mikephil.charting.components.Legend;
    import com.github.mikephil.charting.components.Legend.LegendForm;
    import com.github.mikephil.charting.components.LimitLine;
    import com.github.mikephil.charting.components.LimitLine.LimitLabelPosition;
    import com.github.mikephil.charting.components.XAxis;
    import com.github.mikephil.charting.components.YAxis;
    import com.github.mikephil.charting.data.Entry;
    import com.github.mikephil.charting.data.LineData;
    import com.github.mikephil.charting.data.LineDataSet;
    import com.github.mikephil.charting.highlight.Highlight;
    import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
    import com.github.mikephil.charting.listener.ChartTouchListener;
    import com.github.mikephil.charting.listener.OnChartGestureListener;
    import com.github.mikephil.charting.listener.OnChartValueSelectedListener;
    import com.github.mikephil.charting.utils.Utils;
    import java.util.ArrayList;
    
    public class MainActivity extends FragmentActivity implements OnChartGestureListener, OnChartValueSelectedListener {
    
        private LineChart mChart;
        private TextView tvX, tvY;
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 设置表格的一些属性
            mChart = (LineChart) findViewById(R.id.chart1);
            // 在图表执行动作时,为定制回调设置一个动作监听器。
            mChart.setOnChartGestureListener(this);
            // 为图表设置一个既定的监听器
            mChart.setOnChartValueSelectedListener(this);
            // 把这个设为true来绘制网格背景,如果false则不绘制
            mChart.setDrawGridBackground(false);
    
            // 把这个设置为false,禁用所有手势和图表上的触摸,默认:true
            mChart.setTouchEnabled(false);
    
            // 设置图标拖动为允许
            mChart.setDragEnabled(true);
            // 设置图表缩放为允许
            mChart.setScaleEnabled(true);
            mChart.setScaleXEnabled(true);
            mChart.setScaleYEnabled(true);
    
            mChart.setDescription("");
    
            // 挤压缩放设置为允许,即X轴和Y轴会成比例缩放,如果设置为false,则变成单独缩放
            mChart.setPinchZoom(true);
    
            // 返回代表所有x标签的对象,这个方法可以用来获得XAxis对象并修改它(例如改变标签的位置、样式等)
            XAxis xAxis = mChart.getXAxis();
            // 返回左y轴对象。在水平的柱状图中,这是最上面的轴。
            YAxis leftAxis = mChart.getAxisLeft();
            leftAxis.removeAllLimitLines();
    
            // 使网格线在虚线模式下绘制,例如像这个“------”。只有在硬件加速被关闭的情况下才会起作用。记住,硬件加速会提高性能。
            leftAxis.enableGridDashedLine(10f, 10f, 0f);
            // 将其设置为true,无论是否启用其他网格线,都要画出零线。默认值:假
            leftAxis.setDrawZeroLine(false);
    
            // limit lines are drawn behind data (and not on top)
            // 如果这被设置为true,那么界限就会被绘制在实际的数据后面,否则就在上面。默认值:假
            leftAxis.setDrawLimitLinesBehindData(true);
    
            mChart.getAxisRight().setEnabled(false);
            mChart.getAxisLeft().setEnabled(false);
            mChart.getXAxis().setEnabled(false);
    
            // add data
            // 这是自己设定的添加数据的方法,count设置了数据的个数,range设置了波动范围
            setData(45, 100);
    
            // 调用动画对图表显示进行处理
            mChart.animateX(2500, Easing.EasingOption.EaseInOutQuart);
    
            // get the legend (only possible after setting data)
            // 返回图表的图例对象。这个方法可以用来获得图例的实例,以便定制自动生成的图例。
            Legend l = mChart.getLegend();
            l.setForm(LegendForm.LINE);
        }
    
        @Override
        public void onWindowFocusChanged(boolean hasFocus) {
            super.onWindowFocusChanged(hasFocus);
        }
    
        // 这个应该是设置数据的函数了
        private void setData(int count, float range) {
    
            // 这个应该就是x轴的数据了
            ArrayList<String> xVals = new ArrayList<String>();
            // 从 0 到 count设置x轴的数据
            for (int i = 0; i < count; i++) {
                xVals.add((i) + "");
            }
            // 这个是y轴的数据
            ArrayList<Entry> yVals = new ArrayList<Entry>();
            // 设置y轴的数据,在这里,是用random函数来生成的
            for (int i = 0; i < count; i++) {
    
                float mult = (range + 1);
                float val = (float) (Math.random() * mult) + 3;// + (float)
                // ((mult *
                // 0.1) / 10);
                yVals.add(new Entry(val, i));
            }
            // MPAC自定义的一种类
            // create a dataset and give it a type
            LineDataSet set1 = new LineDataSet(yVals, "BVP - WAVE");
            // set1.setFillAlpha(110);
            // set1.setFillColor(Color.RED);
    
            // set the line to be drawn like this "- - - - - -"
            // 下面是设置线的各种属性
            // 允许在虚线模式下画出线,例如像这个“------”。只有在硬件加速被关闭的情况下才会起作用。记住,硬件加速会提高性能。
            set1.enableDashedLine(10f, 5f, 0f);
            // 允许在虚线模式下画出高光线,例如,像这样“------”
            set1.enableDashedHighlightLine(10f, 5f, 0f);
            set1.setColor(Color.RED);
            set1.setCircleColor(Color.RED);
            set1.setLineWidth(2f);
            set1.setCircleRadius(0f);
            // 把这个设置为true,允许在每个数据圆上画一个洞。
            set1.setDrawCircleHole(false);
            set1.setValueTextSize(0f);
            //
    
            set1.setDrawFilled(false);
    
    
            if(Utils.getSDKInt() >= 18) {
                // fill drawable only supported on api level 18 and above
                //Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
                //set1.setFillDrawable(drawable);
                set1.setFillColor(Color.BLUE);
            } else {
                set1.setFillColor(Color.BLACK);
            }
    
            ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
            dataSets.add(set1); // add the datasets
    
            // create a data object with the datasets
            LineData data = new LineData(xVals,dataSets);
    
            // set data
            mChart.setData(data);
        }
    
        @Override
        public void onChartGestureStart(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
            Log.i("Gesture", "START, x: " + me.getX() + ", y: " + me.getY());
        }
    
        @Override
        public void onChartGestureEnd(MotionEvent me, ChartTouchListener.ChartGesture lastPerformedGesture) {
            Log.i("Gesture", "END, lastGesture: " + lastPerformedGesture);
    
            // un-highlight values after the gesture is finished and no single-tap
            if(lastPerformedGesture != ChartTouchListener.ChartGesture.SINGLE_TAP)
                mChart.highlightValues(null); // or highlightTouch(null) for callback to onNothingSelected(...)
        }
    
        @Override
        public void onChartLongPressed(MotionEvent me) {
            Log.i("LongPress", "Chart longpressed.");
        }
    
        @Override
        public void onChartDoubleTapped(MotionEvent me) {
            Log.i("DoubleTap", "Chart double-tapped.");
        }
    
        @Override
        public void onChartSingleTapped(MotionEvent me) {
            Log.i("SingleTap", "Chart single-tapped.");
        }
    
        @Override
        public void onChartFling(MotionEvent me1, MotionEvent me2, float velocityX, float velocityY) {
            Log.i("Fling", "Chart flinged. VeloX: " + velocityX + ", VeloY: " + velocityY);
        }
    
        @Override
        public void onChartScale(MotionEvent me, float scaleX, float scaleY) {
            Log.i("Scale / Zoom", "ScaleX: " + scaleX + ", ScaleY: " + scaleY);
        }
    
        @Override
        public void onChartTranslate(MotionEvent me, float dX, float dY) {
            Log.i("Translate / Move", "dX: " + dX + ", dY: " + dY);
        }
    
        @Override
        public void onValueSelected(Entry e, int dataSetIndex, Highlight h) {
            Log.i("Entry selected", e.toString());
            Log.i("LOWHIGH", "low: " + mChart.getLowestVisibleXIndex() + ", high: " + mChart.getHighestVisibleXIndex());
            Log.i("MIN MAX", "xmin: " + mChart.getXChartMin() + ", xmax: " + mChart.getXChartMax() + ", ymin: " + mChart.getYChartMin() + ", ymax: " + mChart.getYChartMax());
        }
    
        @Override
        public void onNothingSelected() {
            Log.i("Nothing selected", "Nothing selected.");
        }
    }
    
    
    

    效果展示

    折线图

    本例的GitHub链接

    参考链接

    1. MPAndroidChart的GitHub地址
    2. MPAndroidChart官方文档
    3. 笑谈Android图表-MPAndroidChart
    展开全文
  • 最近公司开发的软件中有大量的数据统计的图,为了开发方便我选取了比较成熟的MpAndroidChart来开发这些折线图,但是在拿到别人的demo到处找都只发现所有的demo都是千篇一律的只有一条折线的demo,而我需求里面需要多...

    最近公司开发的软件中有大量的数据统计的图,为了开发方便我选取了比较成熟的MpAndroidChart来开发这些折线图,但是在拿到别人的demo到处找都只发现所有的demo都是千篇一律的只有一条折线的demo,而我需求里面需要多条折线在同一图中,因此这里我找到了MpAndroidChart官方的demo,这个demo包含了几乎你会遇到的各种情况的图形,当然也有我这里需要的多条折线的demo,这里贴出核心代码:

    ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
    
            for (int z = 0; z < 3; z++) {
    
                ArrayList<Entry> values = new ArrayList<Entry>();
    
                for (int i = 0; i < mSeekBarX.getProgress(); i++) {
                    double val = (Math.random() * mSeekBarY.getProgress()) + 3;
                    values.add(new Entry(i, (float) val));
                }
    
                LineDataSet d = new LineDataSet(values, "DataSet " + (z + 1));
                d.setLineWidth(2.5f);
                d.setCircleRadius(4f);
    
                int color = mColors[z % mColors.length];
                d.setColor(color);
                d.setCircleColor(color);
                dataSets.add(d);
            }
            LineData data = new LineData(dataSets);
            mChart.setData(data);
            mChart.invalidate();

    思路非常清晰将每条线的数据设置放进一个数组里面去,然后全部设置进去就行了。思路解决方法都非常的简单,但是我用的还是老版的MpAndroidChart,因此方法会有一些不同,因此这里我根据原作demo的基础写了老版多条折线的实现,以下是我的核心实现代码:

            String[] xx = {"2", "4", "6", "8", "10", "12", "14", "16", "18"};
            String[][] yy = {{"20", "80", "10", "60", "30", "70", "55", "22", "40"},
                             {"18", "22", "99", "33", "12", "64", "99", "16", "34"},
                             {"64", "19", "34", "81", "16", "46", "33", "46", "19"}};
            ArrayList<String> xVals = new ArrayList<>();
            for (int i = 0; i < xx.length; i++) {
                xVals.add(xx[i]);
            }
    
            for (int i = 0; i < 3; i++) {
                ArrayList<Entry> yVals = new ArrayList<>();
                for (int j = 0; j < yy[i].length; j++) {
                    yVals.add(new Entry(Float.parseFloat(yy[i][j]), j));
                }
                LineDataSet set1 = new LineDataSet(yVals, "DataSet " + (i + 1));
                set1.setDrawCubic(true);  //设置曲线为圆滑的线
                set1.setCubicIntensity(0.2f);
                set1.setDrawFilled(true);  //设置包括的范围区域填充颜色
                set1.setDrawCircles(true);  //设置有圆点
                set1.setLineWidth(2f);    //设置线的宽度
                set1.setCircleSize(5f);   //设置小圆的大小
                int color = mColors[i % mColors.length];
                set1.setHighLightColor(color);
                set1.setColor(color);    //设置曲线的颜色
                set1.setFillColor(color);
                dataSets.add(set1);
            }
            data = new LineData(xVals, dataSets);

    多条折线实现效果图

    希望可以本文可以给那些对MpAndroidChart如何设置多条折线图没有思路或者对源码不是特别了解的小伙伴提供一些帮助。

    展开全文
  • 由于MPAndroidChart开源Demo中的原型过于不太吸引广大用户的眼球,往往在开发过程中需要自定义一些效果,例如现在要讲的高亮效果,以Demo中的BarChart高亮效果为例,只覆盖在Bar所绘制的区域,如果想要改变这个区域...

    MPAndroidChart 是Android开源库中最为著名的一个图标库,功能齐全,拓展性强,在github上start量超过25K,fork量超过6K。
    由于MPAndroidChart开源Demo中的原型过于不太吸引广大用户的眼球,往往在开发过程中需要自定义一些效果,例如现在要讲的高亮效果,以Demo中的BarChart高亮效果为例,只覆盖在Bar所绘制的区域,如果想要改变这个区域,那么我们需要自定义高亮覆盖的区域。
    先来看看高亮效果是怎么绘制出来的:
    MPAndroidChart Api中暴露了一个接口用来设置高亮效果的开关:

    chart.getData().setHighlightEnabled(boolean isEnable)
    

    从getData开始跟踪代码到ChartData类,这个类里面有方法:

    public void setHighlightEnabled(boolean enabled) {
            for (IDataSet set : mDataSets) {
                set.setHighlightEnabled(enabled);
            }
        }
    

    从这段代码可以看到,绘制高亮的控制权掌控在IDataSet里面,也就是我们设置进图表中的数据里面。那么我们看看从数据对象中看看,找到BarChart这个类适配的对象BarData,进到这个类中,貌似并没有发现什么有价值的东西,那么我们再从BarChart中看看,在BarChart中有几个貌似跟Highlight有关的东西:

    protected boolean mHighlightFullBarEnabled = false;
    
    /**
         * Set this to true to make the highlight operation full-bar oriented, false to make it highlight single values (relevant
         * only for stacked). If enabled, highlighting operations will highlight the whole bar, even if only a single stack entry
         * was tapped.
         * Default: false
         *
         * @param enabled
         */
        public void setHighlightFullBarEnabled(boolean enabled) {
            mHighlightFullBarEnabled = enabled;
        }
    /**
         * Set this to true to make the highlight operation full-bar oriented, false to make it highlight single values (relevant
         * only for stacked). If enabled, highlighting operations will highlight the whole bar, even if only a single stack entry
         * was tapped.
         * Default: false
         *
         * @param enabled
         */
        public void setHighlightFullBarEnabled(boolean enabled) {
            mHighlightFullBarEnabled = enabled;
        }
    
        /**
         * @return true the highlight operation is be full-bar oriented, false if single-value
         */
        @Override
        public boolean isHighlightFullBarEnabled() {
            return mHighlightFullBarEnabled;
        }
    

    然而这些对我们来说并没什么用,进入父类看看也是如此,那么进入顶级类中看看,我们会在Chart中发现一个东西:

    protected IHighlighter mHighlighter;
    

    这个是将高亮对象封装到图表适配的数据对象中的:

    /**
         * An array of `Highlight` objects corresponding to the selected xValue and dataSetIndex.
         *
         * @param set
         * @param dataSetIndex
         * @param xVal
         * @param rounding
         * @return
         */
        protected List<Highlight> buildHighlights(IDataSet set, int dataSetIndex, float xVal, DataSet.Rounding rounding) {
    
            ArrayList<Highlight> highlights = new ArrayList<>();
    
            //noinspection unchecked
            List<Entry> entries = set.getEntriesForXValue(xVal);
            if (entries.size() == 0) {
                // Try to find closest x-value and take all entries for that x-value
                final Entry closest = set.getEntryForXValue(xVal, Float.NaN, rounding);
                if (closest != null)
                {
                    //noinspection unchecked
                    entries = set.getEntriesForXValue(closest.getX());
                }
            }
    
            if (entries.size() == 0)
                return highlights;
    
            for (Entry e : entries) {
                MPPointD pixels = mChart.getTransformer(
                        set.getAxisDependency()).getPixelForValues(e.getX(), e.getY());
    
                highlights.add(new Highlight(
                        e.getX(), e.getY(),
                        (float) pixels.x, (float) pixels.y,
                        dataSetIndex, set.getAxisDependency()));
            }
    
            return highlights;
        }
    

    好像除了这些也没什么了。
    难道没办法自定义自己喜欢的样式了吗?
    当然不是,图表绘制时,还有一个渲染器,将数据渲染到图表中,找到相应的渲染器看看。
    果然没让我们失望,在BarChartRenderer这个类中找到一个方法:

    @Override
        public void drawHighlighted(Canvas c, Highlight[] indices) {
    
            //获取数据对象
            BarData barData = mChart.getBarData();
    
            for (Highlight high : indices) {
                //遍历高亮对象,设置高亮属性
                IBarDataSet set = barData.getDataSetByIndex(high.getDataSetIndex());
    
                if (set == null || !set.isHighlightEnabled())
                    continue;
    
                BarEntry e = set.getEntryForXValue(high.getX(), high.getY());
    
                if (!isInBoundsX(e, set))
                    continue;
    
                Transformer trans = mChart.getTransformer(set.getAxisDependency());
    
                mHighlightPaint.setColor(set.getHighLightColor());
                mHighlightPaint.setAlpha(set.getHighLightAlpha());
    
                boolean isStack = (high.getStackIndex() >= 0  && e.isStacked()) ? true : false;
    
                final float y1;
                final float y2;
    
                if (isStack) {
    
                    if(mChart.isHighlightFullBarEnabled()) {
    
                        y1 = e.getPositiveSum();
                        y2 = -e.getNegativeSum();
    
                    } else {
    
                        Range range = e.getRanges()[high.getStackIndex()];
    
                        y1 = range.from;
                        y2 = range.to;
                    }
    
                } else {
                    y1 = e.getY();
                    y2 = 0.f;
                }
                //设置高亮区域
                prepareBarHighlight(e.getX(), y1, y2, barData.getBarWidth() / 2f, trans);
                //绘制高亮区域
                setHighlightDrawPos(high, mBarRect);
    
                c.drawRect(mBarRect, mHighlightPaint);
            }
        }
    protected void prepareBarHighlight(float x, float y1, float y2, float barWidthHalf, Transformer trans) {
    
            float left = x - barWidthHalf;
            float right = x + barWidthHalf;
            float top = y1;
            float bottom = y2;
    
            mBarRect.set(left, top, right, bottom);
    
            trans.rectToPixelPhase(mBarRect, mAnimator.getPhaseY());
        }
    /**
         * Sets the drawing position of the highlight object based on the riven bar-rect.
         * @param high
         */
        protected void setHighlightDrawPos(Highlight high, RectF bar) {
            high.setDraw(bar.centerX(), bar.top);
        }
    

    这个方法专门用户绘制高亮效果,改变mBarRect的区域就可以改变高亮区域了。

    展开全文
  • MPAndroidChart 这个库完全支持图表进行触摸和手势的交互,通过回调方法做出对应的操作。启用/ 禁止 手势交互 setTouchEnabled(boolean enabled) : 启用/禁用与图表的所有可能的触摸交互。 setDragEnabled(boolean ...
  • 附上下载地址http://files.cnblogs.com/files/weijaing/stickyListHeadersListView.zip 转载于:https://www.cnblogs.com/weijaing/p/5834335.html
  • MPAndroidChart Demo

    2020-07-11 23:31:00
    MPAndroidChart柱状图和饼状图
  • 一丶先看效果图   Gif图大小限制,效果不是很清晰,高清效果是特别帅的 二丶先说一下功能点 1.双折线图(平滑曲线),展现对比效果 2.X轴单位,默认显示在1(月) 3.Y轴单位(%)或者其他,但文字写上去总是有点丑...
  • Android MPAndroidChart的LineDataSet代表一条统计图表中统计折线,一张统计图表可以同时存在若干条统计折线,其在内存中存储的模型类型数组,从0开始下标。以下是绘制折线图的主要步骤: 注:已不适用于...
  • 最近项目涉及到这个统计图形,...官方使用RadarChart demo:RadarChartActivitry 2、使用MPAndroidChart,还需要添加 nineoldandroids-2.4.0.jar 官方地址:http://nineoldandroids.com/ 使用的是MPAndroidCh...
  • MPAndroidChartMPAndroidChart是一个开源的图标库,能够实现各种各样的效果,自定义比较容易,在项目中有简单使用,做一个记录。1、柱状图的简单使用效果图: 1、导包,在这用的是两个jar包2、xml文件中配置 ...
  • OpenCodeMpSiChartseeweekend.com Git 开源区 android MPChart 可跨屏幕可滑动 扩展项目 OpenCodeMpSiChart以下是从右向左滑动效果:app 下载扫描二维码下载安装体验:点此查看Git源码 DEMO代码实例: package ...
  • 1 前言 MPAndroidCHart中柱状图的使用与与折线图的使用大致相同,也是通过...下面的这个demo仅仅只是演示了MPAndroidCahrt中柱状图最基本的使用,就只是简单的填充了数据,都是默认的样式 效果图 代码如下 publi...
  • 一丶简介 1.项目初步设计图出来了,很容易注意到的难点就是柱型图,和环型图   2.自定义超出能力范围,网上搜,MPAndroidChart是比较优秀的图表框架,当然GitHub上搜索还有其他的: lecho/hellocharts-android ...
  • 一丶概述 上一篇代码补了这么久,不好意思,今天再说说MPAndroidChart实现饼状图以及文字冲突问题解决。 二丶演示效果 三丶实现功能 1.饼状图实现 2.解决当占比过小,文字重合问题 ...PieChartEntity.Java 设置基本...
  • 一丶慨述 虽然在MPAndroidChart项目实战(一)里面就说了双柱状图的实现,但毕竟那是旧的jar包版,而目前的项目开发,用到的都是新版本,所以还是说一下总结一下 正文:
  • 目录 使用MPAndroidChart实现K线图(1)——基本用法 使用MPAndroidChart实现K线图(2)——自定义XY轴 使用MPAndroidChart实现K线图(3)——自定义柱状图 使用MPAndroidChart实现K线图(4)——图表联动、加载更多 ...
  • MPAndroidChart的基本使用 目录 本文讲述对MPAndroidChart的基本使用 一、添加依赖 ...二、layout布局,我这里实现了三个图形,可以根据自己的需要,添加图形控件 ... 图形横纵坐标默认为float形式,如果想展示文字...
1 2 3 4
收藏数 74
精华内容 29