Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >android详解_MPAndroidChart

android详解_MPAndroidChart

作者头像
全栈程序员站长
发布于 2022-09-20 10:55:59
发布于 2022-09-20 10:55:59
1.3K00
代码可运行
举报
运行总次数:0
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

在开发当中曲线图用的时候太多了,之前都是自己手写,之后发现太累还丑不符合需求

MPAndroidChart

先介绍LineChart

0.效果图

首先依赖 1. implementation ‘com.github.PhilJay:MPAndroidChart:v3.0.3’

2.xml布局

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/multi_line_Gl_chart"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginStart="17.5dp" />

3.逻辑代码

我这里的需求是获取24小时电量,不允许滑动缩放,X 24小时轴是只显示偶数

Y轴数据精确到小数点两位,Y轴最大值为获取数据集合最大值,最大值小于1的时候最大值进1加0.1。大于1的时候最大值增加20%。。。。大概就是这样 //左图具有描述设置,默认有描述,我这里是之前有这个需求现在没啦

最后的最后我这个是双曲线,至于单曲线或者多个曲线,增加删除就可以

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释 
* Description description = new Description(); description.setText(""); description.setTextAlign(Paint.Align.CENTER); description.setTextSize(16); description.setPosition(200, 150); description.setTextColor(ContextCompat.getColor(this, android.R.color.holo_blue_bright)); multiLineGlChart.setDescription(description); multiLineGlChart.setHighlightPerTapEnabled(false);//隐藏图表内的点击十字线 multiLineGlChart.setHighlightPerDragEnabled(false); //设置是否后台绘制 multiLineGlChart.setDrawGridBackground(false); //设置支持触控手势 multiLineGlChart.setTouchEnabled(false); //设置缩放 multiLineGlChart.setDragEnabled(true); //设置推动 multiLineGlChart.setScaleEnabled(false); //如果禁用,扩展可以在x轴和y轴分别完成 multiLineGlChart.setPinchZoom(false); Matrix m = new Matrix(); m.postScale(1, 1f);//两个参数分别是x,y轴的缩放比例。例如:将x轴的数据放大为之前的1.5倍,《这个地方是在设置能滑动的时候编辑的,假如X轴最多展示5条但是呢有10条数据,那么这里就是2,1》 multiLineGlChart.getViewPortHandler().refresh(m, multiLineGlChart, true);//将图表动画显示之前进行缩放 multiLineGlChart.animateX(1000); // 动画,x轴 //设置图例 Legend legend = multiLineGlChart.getLegend(); legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);//设置显示在顶部 legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);//设置图例的显示位置为居中 legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);//设置图例显示的布局为横线排列 legend.setTextSize(10f);//设置图例文本的字体大小,根据界面显示自行调配 //配置X轴 XAxis xAxis = multiLineGlChart.getXAxis(); xAxis.setAxisMinimum(0);//X轴最大值最小值, xAxis.setGranularity(1);//设置X轴每个点之间数据的间隔 xAxis.setLabelCount(5, false);//设置标签个数 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //设置x标签显示的在底部 xAxis.setDrawGridLines(false);//不画X轴网格线 xAxis.setDrawAxisLine(false); xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) {//switch是当知道X轴有多少个的时候,下一个是不知道X轴数据数量的情况 switch (index) { case 1: label = "00"; break; case 2: label = ""; break; case 3: label = "02"; break; case 4: label = ""; break; case 5: label = "04"; break; case 6: label = ""; break; case 7: label = "06"; break; case 8: label = ""; break; case 9: label = "08"; break; case 10: label = ""; break; case 11: label = "10"; break; case 12: label = ""; break; case 13: label = "12"; break; case 14: label = ""; break; case 15: label = "14"; break; case 16: label = ""; break; case 17: label = "16"; break; case 18: label = ""; break; case 19: label = "18"; break; case 20: label = ""; break; case 21: label = "20"; break; case 22: label = ""; break; case 23: label = "22"; break; case 24: label = ""; break; case 25: label = "24"; break; default: label = ""; break; } int index = (int) value; if (value==time.size()&&(int) value % time.size()==0){//假如没有这个if会造成的后果是,当数据为40条的时候会出现最后一条数据取得值是第一条数据,so String tradeDate = time.get(time.size()-1).substring(11,16); return tradeDate; }else{ String tradeDate = time.get((int) value % time.size()).substring(11,16); return tradeDate; } } }); xAxis.setTextColor(ContextCompat.getColor(this, R.color.text_color));//设置标签的文本颜色 YAxis axisRight = multiLineGlChart.getAxisRight(); axisRight.removeAllLimitLines(); axisRight.setDrawAxisLine(false);//设置不画左边线的第一条线 axisRight.setDrawGridLines(true); YAxis leftAxis = multiLineGlChart.getAxisLeft(); leftAxis.removeAllLimitLines(); leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); List<Double> list=new ArrayList<>();//以下的代码是最大值的设置,个人最大值设置方法,也是需求,so,可以自己更改 for (int i = 0; i < last.size(); i++) { try { list.add(Double.valueOf(last.get(i))); } catch (NumberFormatException e) { e.printStackTrace(); } } double max = Collections.max(list)/1000; double min = Collections.min(list); List<Double> listNow=new ArrayList<>(); for (int i = 0; i < now.size(); i++) { try { listNow.add(Double.valueOf(now.get(i).replaceAll("\\-","0"))); } catch (NumberFormatException e) { e.printStackTrace(); } } double minNow = Collections.min(listNow); double maxNow = Collections.max(listNow)/1000; if (max>maxNow){ // leftAxis.setAxisMaximum((float)Math.ceil(max*1.2));//设置最大值 if (max>1){ leftAxis.setAxisMaximum((float) Math.ceil(max*1.2));//设置最大值 }else{ leftAxis.setAxisMaximum((float) (max+0.1));//设置最大值 } }else{ // leftAxis.setAxisMaximum((float) Math.ceil(maxNow*1.2));//设置最大值 if (maxNow>1){ leftAxis.setAxisMaximum((float) Math.ceil(maxNow*1.2));//设置最大值 }else{ leftAxis.setAxisMaximum((float) (maxNow+0.1));//设置最大值 } } leftAxis.setAxisMinimum(0f);//设置最小值 leftAxis.setLabelCount(4,true);//设置标签的个数 leftAxis.setDrawAxisLine(false);//设置不画左边线的第一条线 //设置坐标轴标签文字样式 leftAxis.setTypeface(Typeface.DEFAULT_BOLD); //设置此轴网格线颜色 leftAxis.setGridColor(Color.parseColor("#1A00CAE3")); //设置此轴网格线宽度 leftAxis.setGridLineWidth(0.5f); //设置坐标轴的颜色 leftAxis.setAxisLineColor(Color.parseColor("#1A00CAE3")); //设置坐标轴的宽度 leftAxis.setAxisLineWidth(1f); //使用虚线组成的网格线 //参数:linelength:虚线长度 // spacelength:虚线间隔长度 // phase:虚线出发点(从第一根虚线的哪里出发) leftAxis.enableGridDashedLine(5f, 10f, 20f); leftAxis.setDrawGridLines(true); //自定义标签显示 leftAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { // int val = (int) value;//这里是设置是否是显示成小数或者整数 String val; DecimalFormat df = new DecimalFormat("#0.00"); val = df.format(value); return val + ""; } }); //设置标签文本颜色 leftAxis.setTextColor(ContextCompat.getColor(this, R.color.text_color)); multiLineGlChart.getAxisRight().setEnabled(false);//设置右侧Y轴不显示 //第二条线 List<Entry> values2 = new ArrayList<>(); // for (int i = 0; i < now.size(); i++) { // values2.add(new Entry((i+1), 120)); // values2.add(new Entry((i+1), (Float.valueOf(String.valueOf(now.get(i))))/1000)); values2.add(new BarEntry((i + 1),(Float.valueOf(String.valueOf(now.get(i))))/1000)); } LineDataSet lineDataSet2 = new LineDataSet(values2, ""); /* LINEAR,直线 STEPPED, CUBIC_BEZIER, HORIZONTAL_BEZIER */ lineDataSet2.setMode(LineDataSet.Mode.CUBIC_BEZIER);//设置折线图的显示模式,可以自行设置上面的值进行查看不同之处 lineDataSet2.setColor(ContextCompat.getColor(this, R.color.color29ca5a));//设置线的颜色 lineDataSet2.setLineWidth(1.5f);//设置线的宽度 lineDataSet2.setDrawCircles(false); lineDataSet2.setDrawCircleHole(false); lineDataSet2.setAxisDependency(YAxis.AxisDependency.LEFT);//设置线数据依赖于左侧y轴 lineDataSet2.setDrawFilled(false);//设置不画数据覆盖的阴影层 lineDataSet2.setDrawValues(false);//不绘制线的数据 lineDataSet2.setValueTextColor(ContextCompat.getColor(this, R.color.text_color));//设置数据的文本颜色,如果不绘制线的数据 这句代码也不用设置了 lineDataSet2.setValueTextSize(15f);//如果不绘制线的数据 这句代码也不用设置了 lineDataSet2.setCircleRadius(4f);//设置每个折线点的大小 lineDataSet2.setFormSize(0f);//设置当前这条线的图例的大小 lineDataSet2.setForm(Legend.LegendForm.CIRCLE);//设置图例显示为线 lineDataSet2.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { // int val = (int) value; String val; DecimalFormat df = new DecimalFormat("#0.00"); val = df.format(value); return val + ""; } }); //第三条线 List<Entry> values3 = new ArrayList<>(); for (int i = 0; i < last.size(); i++) { // values3.add(new Entry((i+1), 110)); values3.add(new BarEntry((i + 1), (Float.valueOf(String.valueOf(last.get(i))))/1000)); } LineDataSet lineDataSet3 = new LineDataSet(values3, ""); /* LINEAR,直线 STEPPED, CUBIC_BEZIER, HORIZONTAL_BEZIER */ lineDataSet3.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);//设置折线图的显示模式,可以自行设置上面的值进行查看不同之处 lineDataSet3.setColor(ContextCompat.getColor(this, R.color.colorFFC738));//设置线的颜色 lineDataSet3.setLineWidth(1.5f);//设置线的宽度 lineDataSet3.setDrawCircles(false); lineDataSet3.setDrawCircleHole(false); lineDataSet3.setAxisDependency(YAxis.AxisDependency.LEFT);//设置线数据依赖于左侧y轴 lineDataSet3.setDrawFilled(false);//设置不画数据覆盖的阴影层 lineDataSet3.setDrawValues(false);//不绘制线的数据 lineDataSet3.setValueTextColor(ContextCompat.getColor(this, R.color.text_color));//设置数据的文本颜色,如果不绘制线的数据 这句代码也不用设置了 lineDataSet3.setValueTextSize(15f);//如果不绘制线的数据 这句代码也不用设置了 lineDataSet3.setCircleRadius(4f);//设置每个折线点的大小 lineDataSet3.setFormSize(0f);//设置当前这条线的图例的大小 lineDataSet3.setForm(Legend.LegendForm.CIRCLE);//设置图例显示为线 lineDataSet3.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { String val; DecimalFormat df = new DecimalFormat("#0.00"); val = df.format(value); return val + ""; } }); //初始化一个LineDataSet集合来装每个线的数据 List<ILineDataSet> lineDataSetList = new ArrayList<>(); if (chbGlJr.isChecked() && chbGlZr.isChecked()) { lineDataSetList.add(lineDataSet3); lineDataSetList.add(lineDataSet2); } else if (chbGlJr.isChecked() && !chbGlZr.isChecked()) { lineDataSetList.add(lineDataSet2); } else if (!chbGlJr.isChecked() && chbGlZr.isChecked()) { lineDataSetList.add(lineDataSet3); } //将多条线的数据全部给LineData LineData lineData = new LineData(lineDataSetList); multiLineGlChart.setData(lineData); //默认动画 multiLineGlChart.animateXY(1000, 1000);
*/

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/166963.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Ohos-MPChart——支持多种图表绘制的组件
Ohos-MPChart是OpenAtom OpenHarmony(简称“OpenHarmony”)系统显示各种图表视图的三方组件,用于声明式应用开发,提供了多种多样的图表视图,包括折线图、曲线图、柱形图、饼状图、K线图、雷达图、气泡图。适用于各种统计后的数据以视觉直观的方式呈现。
小帅聊鸿蒙
2025/04/21
1260
Ohos-MPChart——支持多种图表绘制的组件
MPAndroidChart总结
第一天 LineChart的常用属性 lineChart.setDrawBorders(false);//设置绘制边界 lineChart.setDescription("最大值是: "+ max+",最小值是:"+min);// 数据描述 lineChart.setDescriptionTextSize(16f);//数据描述字体大小, 最小值6f, 最大值16f. lineChart.setDescriptionPosition(2500f,50f);//数据描述字体的位置 lineCha
对话、
2022/02/22
1.1K0
MPAndroidChart_折线图的那些事
看效果还挺不错吧,但是我们实际开发时,往往需求没这么简单,下面,我们来对折线图各种方法进行一个总结。
Petterp
2022/02/09
4K0
MPAndroidChart_折线图的那些事
Android——MPAndroidChart折线图/柱状图/饼形图的使用
【背景】:项目中需要使用到图表,于是找了目前非常热门的开源图表,折线图/柱状图/饼图等应有尽有,各种效果实现都很给力,附上github链接,有原DEMO,github是最好的老师,看DEMO例程源码,相比在网上泛泛的查资料要高效的多。https://github.com/PhilJay/MPAndroidChart
Winter_world
2020/09/25
3.6K0
Android——MPAndroidChart折线图/柱状图/饼形图的使用
MPAndroidChart_动态柱状图
MPAndroidChart攻略——BarChart的点点滴滴。 MPAndroidChart_折线图的那些事 MPAndroidChart_饼图的那些事 MPAndroidChart_动态柱状图 MPAndroidChart_水平条形图的那些事 MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。 MPAndroidChart_雷达图的那些事 需求:显示最近20条的数据,而且500毫秒秒刷新一次,每次都要求数据最新。 解决办法: 使用List储存,每次存储
Petterp
2022/02/09
1.4K0
MPAndroidChart_动态柱状图
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
MPAndroidChart攻略——BarChart并列柱状图的点点滴滴。 MPAndroidChart_折线图的那些事 MPAndroidChart_饼图的那些事 MPAndroidChart_动态柱状图 MPAndroidChart_水平条形图的那些事 MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。 MPAndroidChart_雷达图的那些事及自定义标签颜色 昨天在比赛中遇到了MP的并列柱状图,看网上对这方面记录并不是很多,所以今天就做一个教程吧。 先看简
Petterp
2022/02/09
1.6K0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
MPAndroidChart 之实现底部显示的自定义MarkerView
接到一个需求需要折线图显示数据,权衡利弊后没有自己手绘哦,毕竟怕耽搁时间(或许也是怕写一半写不出来 哈哈哈),所以首选当然是之前接触过的MPAndroidChart,毕竟它很强很强很强。。。
木溪bo
2020/06/22
3.9K0
MPAndroidChart_RadarChart雷达图的那些事
重写这两个类 RadarChart和 XAxisRendererRadarChart。其实也就是更改一个方法,别觉得有什么太困难。
Petterp
2022/02/09
2K0
MPAndroidChart_RadarChart雷达图的那些事
Android 图表开发开源库MPAndroidChart
图1的效果不是用这个实现的,如果感兴趣可以参考我这篇文章  Android渐变圆环
再见孙悟空_
2023/02/10
2.1K0
Android 图表开发开源库MPAndroidChart
Kotlin超简单实现StepView
支持时间轴和StepView,三种布局,支持水平布局,垂直布局和自定义布局,截图如下
蜻蜓队长
2018/12/13
7850
纯血鸿蒙APP第三方库——MpChart运动健康场景实践案例
MpChart是一个包含各种类型图表的图表库,主要用于业务数据汇总,例如销售数据走势图,股价走势图等场景中使用,方便开发者快速实现图表UI,MpChart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。
小帅聊鸿蒙
2025/01/20
1250
Android - 圆形 Button 与倒计时控件
前言 平时咱们开发 Button 是很常见的控件,它总是以各种形式出现。例如:加边框,边框颜色,各种圆角。以至于我们不得不写 n 个 shape 文件去维护。这样总是很麻烦,还很容易忘记更改某些文件。
code_horse
2018/07/02
8080
项目需求讨论:截图—涂鸦—分享
这个也是具体项目中遇到的项目需求:需要在一个特定的界面中(都是图表和各种数据,可能需求分享给别人,告诉别人这个数据怎么怎么,这个图表怎么怎么) 所以给我们开发的需求就是:
青蛙要fly
2018/08/29
7240
项目需求讨论:截图—涂鸦—分享
相关推荐
Ohos-MPChart——支持多种图表绘制的组件
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验