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


效果图

  • 用的是3.1.0的依赖

依赖
allprojects {repositories {jcenter()maven { url "https://jitpack.io" }}} //依赖dependencies{ implementation 'com.github.philjay:mpandroidchart:v3.1.0'}
activity.xml<?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.linechartandroid:id="@+id/linechart"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff"android:layout_margin="15dp"/></relativelayout>
mainactivityprivate linechart linechart;@overrideprotected 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、defaultlegend.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) {//获取数据1set1 = (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:图例名称setvalueformatterset1 = 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));//设置数据2set2 = 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 = https://baike.zhangchenghui.com/517283/new linedata(datasets);// 添加到图表中linechart.setdata(data);//绘制图表linechart.invalidate();}}private void initxy() {arraylist 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() {@overridepublic 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轴, 默认是truelinechart.setscalexenabled(false); //是否可以缩放 仅x轴linechart.setscaleyenabled(false); //是否可以缩放 仅y轴linechart.setpinchzoom(false);//设置x轴和y轴能否同时缩放 。默认是否linechart.setdoubletaptozoomenabled(false);//设置是否可以通过双击屏幕放大图表 。默认是truelinechart.sethighlightperdragenabled(true);//能否拖拽高亮线(数据点与坐标的提示线),默认是truelinechart.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 chartlinechart.setmarker(mv);//自定义的markerview对象//mymarkerview mv = new mymarkerview(this, r.layout.item);//mv.setchartview(linechart);//linechart.setmarker(mv);}
mymarkerview 自定义classpublic class markerviews extends markerview {private textview tvcontent;//自己定义的xmllinechart 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=https://baike.zhangchenghui.com/517283/xvalue;}@overridepublic 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);}@overridepublic mppointf getoffset() {return new mppointf(-(getwidth() / 2), -getheight());}}
maekertextview .xml<?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"><textviewandroid: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>
常用属性
  • 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() : 适应屏幕
【Android画图实现MPAndroidchart折线图示例详解】以上就是android画图实现mpandroidchart折线图示例详解的详细内容,更多关于android mpandroidchart折线图的资料请关注www.887551.com其它相关文章!
-- 展开阅读全文 --

    推荐阅读