Android画图实现MPAndroidchart折线图示例详解

    allprojects {
        repositories {
            jcenter()
            maven { url "https://jitpack.io" }
        }
    }
 //依赖
dependencies{
 implementation 'com.github.philjay:mpandroidchart:v3.1.0'
}

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".mainactivity">
    <com.github.mikephil.charting.charts.linechart
        android:id="@+id/linechart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:layout_margin="15dp"/>
</relativelayout>

  private linechart linechart;
    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);
         linechart = (linechart) findviewbyid(r.id.linechart);
        //创建描述信息
        description description = new description();
        description.settext("测试图表");
        description.settextcolor(color.red);
        description.settextsize(20);
        linechart.setdescription(description);//设置图表描述信息
        linechart.setnodatatext("没有数据哦");//没有数据时显示的文字
        linechart.setnodatatextcolor(color.blue);//没有数据时显示文字的颜色
        linechart.setdrawgridbackground(false);//chart 绘图区后面的背景矩形将绘制
        linechart.setdrawborders(false);//禁止绘制图表边框的线
        //linechart.setbordercolor(); //设置 chart 边框线的颜色。
        //linechart.setborderwidth(); //设置 chart 边界线的宽度，单位 dp。
        //linechart.setlogenabled(true);//打印日志
        //linechart.notifydatasetchanged();//刷新数据
        //linechart.invalidate();//重绘
        initdate();
        initxy();
    }
private void initdate() {
        /**
         * entry 坐标点对象  构造函数 第一个参数为x点坐标 第二个为y点
         */
        arraylist<entry> values1 = new arraylist<>();
        arraylist<entry> values2 = new arraylist<>();
        values1.add(new entry(1, 10));
        values1.add(new entry(2, 15));
        values1.add(new entry(3, 20));
        values1.add(new entry(4, 5));
        values1.add(new entry(5, 30));
        values1.add(new entry(6, 15));
        values1.add(new entry(7, 6));
        values2.add(new entry(1, 20));
        values2.add(new entry(2, 15));
        values2.add(new entry(3, 13));
        values2.add(new entry(4, 8));
        values2.add(new entry(5, 9));
        values2.add(new entry(6, 12));
        values2.add(new entry(7, 15));
        //linedataset每一个对象就是一条连接线
        linedataset set1;
        linedataset set2;
//设置图例
//获取图例
legend legend=mchart.getlegend();
//是否开启设置图例
legend.setenabled(true);
//设置图例文字大小
legend.settextsize(50f);
//设置图例文字颜色
legend.settextcolor(color.blue);
//如果设置为true，那么当图例过多或者过长一行显示不下的时候就会自适应换行
legend.setwordwrapenabled(true);
//设置表格的最大相对大小，默认为0.95f(95%)
legend.setmaxsizepercent(0.95f);
//设置图例位置
legend.setposition(legend.legendposition.above_chart_left);
//设置图例形状:如square、circle、line、default
legend.setform(legend.legendform.circle);
//设置图例xy方向的间隔宽度
legend.setxentryspace(20f);
legend.setyentryspace(20f);
//设置图例标签到文字之间的距离
legend.setformtotextspace(20f);
//设置文本包装
legend.setwordwrapenabled(true);
        //判断图表中原来是否有数据
        if (linechart.getdata() != null && linechart.getdata().getdatasetcount() > 0) {
            //获取数据1
            set1 = (linedataset) linechart.getdata().getdatasetbyindex(0);
            set1.setvalues(values1);
            set2 = (linedataset) linechart.getdata().getdatasetbyindex(1);
            set2.setvalues(values2);
            //刷新数据
            linechart.getdata().notifydatachanged();
            linechart.notifydatasetchanged();
        } else {
            //设置数据1  参数1：数据源 参数2：图例名称setvalueformatter
            set1 = new linedataset(values1, "测试数据1");
            set1.setcolor(color.blue);//两个点之间的距离连接线
            set1.setcirclecolor(color.white);//数据展示的圆点颜色
            set1.setlinewidth(3f);//设置线宽
            set1.setcircleradius(3f);//设置焦点圆心的大小
            set1.enabledashedhighlightline(2f, 5f, 0f);//点击后的高亮线的显示样式
            set1.sethighlightlinewidth(1f);//设置点击交点后显示高亮线宽
            set1.sethighlightenabled(true);//是否禁用点击高亮线
            set1.sethighlightcolor(color.yellow);//设置点击交点后显示交高亮线的颜色
            set1.setvaluetextsize(9f);//设置显示值的文字大小
            set1.setmode(linedataset.mode.cubic_bezier);//直线 变成 曲线
            set1.setdrawvalues(false);  //不显示数值
//            set1.setvalueformatter(new largevalueformatter("℃"));//显示数值的样式
            //阴影填充
//            set1.setdrawfilled(true);//设置禁用范围背景填充 阴影
//            set1.setfilldrawable(getresources().getdrawable(r.drawable.line_gradient_bg_shape));
            //设置数据2
            set2 = new linedataset(values2, "测试数据2");
            set2.setcolor(color.gray);//两个点之间的距离连接线
            set2.setcirclecolor(color.white);//数据展示的圆点颜色
            set2.setlinewidth(3f);//设置线宽
            set2.setcircleradius(3f);//设置焦点圆心的大小
            set2.enabledashedhighlightline(2f, 5f, 0f);//点击后的高亮线的显示样式
            set2.sethighlightlinewidth(1f);//设置点击交点后显示高亮线宽
            set2.sethighlightenabled(true);//是否禁用点击高亮线
            set2.sethighlightcolor(color.yellow);//设置点击交点后显示交高亮线的颜色
            set2.setvaluetextsize(9f);//设置显示值的文字大小
            set2.setmode(linedataset.mode.cubic_bezier);//直线 变成 曲线
            set2.setdrawvalues(false);  //不显示数值
            //阴影填充
//            set2.setdrawfilled(true);//设置禁用范围背景填充 阴影
//            set2.setfilldrawable(getresources().getdrawable(r.drawable.line_gradient_bg_shape2));
            //保存linedataset集合
            arraylist<ilinedataset> datasets = new arraylist<>();
            datasets.add(set1); // 添加数据集
            datasets.add(set2);// 添加数据集
            //创建linedata对象 属于linechart折线图的数据集合
            linedata data = new linedata(datasets);
            // 添加到图表中
            linechart.setdata(data);
            //绘制图表
            linechart.invalidate();
        }
    }
   private void initxy() {
        arraylist<string> xvalue=new arraylist<>();//x轴时间
        xvalue.add("10-1");//当然这样可以把x轴的数据随便设置成啥都行。
        xvalue.add("10-2");
        xvalue.add("10-3");
        xvalue.add("10-4");
        xvalue.add("10-5");
        xvalue.add("10-6");
        xvalue.add("10-7");
        //获取此图表的x轴
        xaxis xaxis = linechart.getxaxis();
        xaxis.setenabled(true);//设置轴启用或禁用 如果禁用以下的设置全部不生效
        xaxis.setdrawaxisline(true);//是否绘制轴线
        xaxis.setdrawgridlines(true);//设置x轴上每个点对应的线
        xaxis.setdrawlabels(true);//绘制标签  指x轴上的对应数值
        xaxis.setposition(xaxis.xaxisposition.bottom);//设置x轴的显示位置
        xaxis.setgranularity(1);//让x轴上自定义的值和折线上相对应
        xaxis.setaxislinecolor(r.color.white);//设置横轴线的颜色
        xaxis.settextcolor(r.color.white);//设置横轴字体颜色
        xaxis.setvalueformatter(new valueformatter() {
            @override
            public string getaxislabel(float value, axisbase axis) {
                return xvalue.get((int) value - 1);
            }
        });
//        xaxis.setlabelstoskip(0);
        //xaxis.settextsize(20f);//设置字体
        //xaxis.settextcolor(color.black);//设置字体颜色
        //设置竖线的显示样式为虚线
        //linelength控制虚线段的长度
        //spacelength控制线之间的空间
//        xaxis.enablegriddashedline(0f, 0f, 0f);
//        xaxis.setaxisminimum(0f);//设置x轴的最小值
//        xaxis.setaxismaximum(10f);//设置最大值
//        xaxis.setavoidfirstlastclipping(true);//图表将避免第一个和最后一个标签条目被减掉在图表或屏幕的边缘
//        xaxis.setlabelrotationangle(0f);//设置x轴标签的旋转角度
//        设置x轴显示标签数量  还有一个重载方法第二个参数为布尔值强制设置数量 如果启用会导致绘制点出现偏差
//        xaxis.setlabelcount(10);
//        xaxis.settextcolor(color.blue);//设置轴标签的颜色
//        xaxis.settextsize(24f);//设置轴标签的大小
//        xaxis.setgridlinewidth(10f);//设置竖线大小
//        xaxis.setgridcolor(color.red);//设置竖线颜色
//        xaxis.setaxislinecolor(color.green);//设置x轴线颜色
//        xaxis.setaxislinewidth(5f);//设置x轴线宽度
//        xaxis.setvalueformatter();//格式化x轴标签显示字符
        /**
         * y轴默认显示左右两个轴线
         */
        //获取右边的轴线
        yaxis rightaxis=linechart.getaxisright();
        //设置图表右边的y轴禁用
        rightaxis.setenabled(false);
        //获取左边的轴线
        yaxis leftaxis = linechart.getaxisleft();
        //设置网格线为虚线效果
        leftaxis.enablegriddashedline(0f, 0f, 0f);
        //是否绘制0所在的网格线
        leftaxis.setdrawzeroline(false);
        leftaxis.setenabled(true);//设置轴启用或禁用 如果禁用以下的设置全部不生效
        leftaxis.setdrawaxisline(true);//是否绘制轴线
        leftaxis.setdrawgridlines(true);//设置x轴上每个点对应的线
        leftaxis.setdrawlabels(true);//绘制标签  指x轴上的对应数值
        leftaxis.setgranularity(1);//让y轴上自定义的值和折线上相对应
        leftaxis.setaxislinecolor(r.color.white);//设置纵轴线的颜色
        leftaxis.settextcolor(r.color.white);    //设置纵轴字体颜色
        linechart.settouchenabled(true); // 设置是否可以触摸
        linechart.setdragenabled(false); // 是否可以拖拽
        linechart.setscaleenabled(false);// 是否可以缩放 x和y轴, 默认是true
        linechart.setscalexenabled(false); //是否可以缩放 仅x轴
        linechart.setscaleyenabled(false); //是否可以缩放 仅y轴
        linechart.setpinchzoom(false);  //设置x轴和y轴能否同时缩放。默认是否
        linechart.setdoubletaptozoomenabled(false);//设置是否可以通过双击屏幕放大图表。默认是true
        linechart.sethighlightperdragenabled(true);//能否拖拽高亮线(数据点与坐标的提示线)，默认是true
        linechart.setdragdecelerationenabled(false);//拖拽滚动时，手放开是否会持续滚动，默认是true（false是拖到哪是哪，true拖拽之后还会有缓冲）
        linechart.setdragdecelerationfrictioncoef(0.99f);//与上面那个属性配合，持续滚动时的速度快慢，[0,1) 0代表立即停止。
        linechart.getxaxis().setdrawgridlines(false);//设置网格线
        linechart.getaxisleft().setdrawgridlines(false);//去掉左右边线
        linechart.getaxisright().setdrawgridlines(false);//去掉左右边线
        final markerviews mv = new markerviews(this, r.layout.maekertextview,linechart,xvalue);
        mv.setchartview(linechart);
        // set the marker to the chart
        linechart.setmarker(mv);
        //自定义的markerview对象
//        mymarkerview mv = new mymarkerview(this, r.layout.item);
//        mv.setchartview(linechart);
//        linechart.setmarker(mv);
    }

public class markerviews extends markerview {
    private textview tvcontent;//自己定义的xml
    linechart linechart;//图表控件
    arraylist<string> xvalue;//x轴数据源
    /**
     * constructor. sets up the markerview with a custom layout resource.
     *
     * @param context
     * @param layoutresource the layout resource to use for the markerview
     */
    public markerviews(context context, int layoutresource, linechart linechart,arraylist<string> xvalue) {
        super(context,layoutresource);
        tvcontent = (textview) findviewbyid(r.id.tvcontent1);
        this.linechart=linechart;
        this.xvalue=xvalue;
    }
    @override
    public void refreshcontent(entry e, highlight highlight) {//重写refreshcontent方法（注意，在  //mpandroidchart早期版本里这里有三个参数，这里有两个，我这是mpandroidchart 3.0.2版本
        //下面这里是关键的
        linedata linedata=linechart.getlinedata();//得到已经绘制成型的折线图的数据
        linedataset set=(linedataset)linedata.getdatasetbyindex(0);//获取第一条折线图y轴数据
        linedataset set1=(linedataset)linedata.getdatasetbyindex(1);//获取第二条折线图y轴数据
        int datasetindex=highlight.getdatasetindex();//获取点击的是哪条折线上的交叉点，0就是第一条，以此类推
        int index;
        if (datasetindex==0){
            index= set.getentryindex(e);//根据点击的该条折线的点，获取当前y轴数据对应的index值，
        }else {
            index= set1.getentryindex(e);//根据点击的该条折线的点，获取当前y轴数据对应的index值，
        }
        //根据index值，分别获取当前x轴上对应的两条折线的y轴的值
        log.i("x,y轴","/"+xvalue.get(index)+"/"+e.gety());
        tvcontent.settext("时间："+xvalue.get(index)+"\n在线人数："+e.gety());
        super.refreshcontent(e, highlight);
    }
    @override
    public mppointf getoffset() {
        return new mppointf(-(getwidth() / 2), -getheight());
    }
}

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/white"
    >
    <textview
        android:id="@+id/tvcontent1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerhorizontal="true"
        android:layout_margintop="7dp"
        android:layout_marginleft="5dp"
        android:layout_marginright="5dp"
        android:text=""
        android:singleline="false"
        android:textsize="12dp"
        android:textcolor="@android:color/black"
        android:textappearance="?android:attr/textappearancesmall" />
</relativelayout>