欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android LineChart绘制多条曲线的方法

程序员文章站 2023-12-02 08:22:40
本文实例为大家分享了android linechart绘制多条曲线的具体代码,供大家参考,具体内容如下 目标效果: 1.新建custom_marker_view.x...

本文实例为大家分享了android linechart绘制多条曲线的具体代码,供大家参考,具体内容如下

目标效果:

Android LineChart绘制多条曲线的方法Android LineChart绘制多条曲线的方法

1.新建custom_marker_view.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="40dp"
 android:background="@drawable/marker2" >
 
 <textview
 android:id="@+id/tvcontent"
 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:textsize="12dp"
 android:textcolor="@android:color/white"
 android:ellipsize="end"
 android:singleline="true"
 android:textappearance="?android:attr/textappearancesmall" />
 
</relativelayout>

2.activity_main.xml页面:

<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="10dp"
 android:paddingleft="10dp"
 android:paddingright="10dp"
 android:paddingtop="10dp"
 tools:context=".mainactivity" >
 
 <com.github.mikephil.charting.charts.linechart
 android:id="@+id/charttall"
 android:layout_width="match_parent"
 android:layout_height="400dp"
 android:layout_margintop="20dp" />
 
 
</relativelayout>

3.新建mymarkerview.java重写markview控件:

package com.example.weixu.drawline;
 
import android.content.context;
import android.widget.textview;
 
import com.github.mikephil.charting.data.candleentry;
import com.github.mikephil.charting.data.entry;
import com.github.mikephil.charting.utils.markerview;
import com.github.mikephil.charting.utils.utils;
 
public class mymarkerview extends markerview {
 
 private textview tvcontent;
 
 public mymarkerview(context context, int layoutresource) {
 super(context, layoutresource);
 
 tvcontent = (textview) findviewbyid(r.id.tvcontent);
 }
 
 @override
 public void refreshcontent(entry e, int datasetindex) {
 
 if (e instanceof candleentry) {
 candleentry ce = (candleentry) e;
 tvcontent.settext("" + utils.formatnumber(ce.gethigh(), 0, true));
 } else {
 tvcontent.settext("" +e.getval());
 }
 }
}

4.mainactivity.java页面:

package com.example.weixu.drawline;
 
import java.util.arraylist;
 
import android.app.activity;
import android.graphics.color;
import android.graphics.typeface;
import android.os.bundle;
import android.view.windowmanager;
 
import com.github.mikephil.charting.charts.barlinechartbase;
import com.github.mikephil.charting.charts.barlinechartbase.borderposition;
import com.github.mikephil.charting.charts.linechart;
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.utils.legend;
import com.github.mikephil.charting.utils.legend.legendform;
import com.github.mikephil.charting.utils.xlabels;
import com.github.mikephil.charting.utils.xlabels.xlabelposition;
import com.github.mikephil.charting.utils.ylabels;
 
public class mainactivity extends activity {
 
 private linechart charttall;
 
 @override
 protected void oncreate(bundle savedinstancestate) {
 super.oncreate(savedinstancestate);
 getwindow().setflags(windowmanager.layoutparams.flag_fullscreen,
 windowmanager.layoutparams.flag_fullscreen);
 setcontentview(r.layout.activity_main);
 
 charttall = (linechart) findviewbyid(r.id.charttall);
 
 settype();
 
 // 刷新图表
 charttall.invalidate();
 }
 
 private void settype() {
 // 设置在y轴上是否是从0开始显示
 charttall.setstartatzero(true);
 //是否在y轴显示数据,就是曲线上的数据
 charttall.setdrawyvalues(true);
 //设置网格
 charttall.setdrawborder(true);
 charttall.setborderpositions(new barlinechartbase.borderposition[] {
 borderposition.bottom});
 //在chart上的右下角加描述
 charttall.setdescription("身高曲线图");
 //设置y轴上的单位
 charttall.setunit("cm");
 //设置透明度
 charttall.setalpha(0.8f);
 //设置网格底下的那条线的颜色
 charttall.setbordercolor(color.rgb(213, 216, 214));
 //设置y轴前后倒置
 charttall.setinvertyaxisenabled(false);
 //设置高亮显示
 charttall.sethighlightenabled(true);
 //设置是否可以触摸,如为false,则不能拖动,缩放等
 charttall.settouchenabled(true);
 //设置是否可以拖拽,缩放
 charttall.setdragenabled(true);
 charttall.setscaleenabled(true);
 //设置是否能扩大扩小
 charttall.setpinchzoom(true);
 //设置点击chart图对应的数据弹出标注
 mymarkerview mv = new mymarkerview(this, r.layout.custom_marker_view);
 mv.setoffsets(-mv.getmeasuredwidth() / 2, -mv.getmeasuredheight());
 charttall.setmarkerview(mv);
 charttall.sethighlightindicatorenabled(false);
 //设置字体格式,如正楷
 typeface tf = typeface.createfromasset(getassets(),
 "opensans-regular.ttf");
 charttall.setvaluetypeface(tf);
 
 xlabels xl = charttall.getxlabels();
 xl.setposition(xlabelposition.bottom); // 设置x轴的数据在底部显示
 xl.settypeface(tf); // 设置字体
 xl.settextsize(10f); // 设置字体大小
 xl.setspacebetweenlabels(3); // 设置数据之间的间距
 
 ylabels yl = charttall.getylabels();
 yl.settypeface(tf); // 设置字体
 yl.settextsize(10f); // s设置字体大小
 yl.setlabelcount(5); // 设置y轴最多显示的数据个数
 // 加载数据
 setdata();
 //从x轴进入的动画
 charttall.animatex(4000);
 charttall.animatey(3000); //从y轴进入的动画
 charttall.animatexy(3000, 3000); //从xy轴一起进入的动画
 
 //设置最小的缩放
 charttall.setscaleminima(0.5f, 1f);
 
 }
 
 private void setdata() {
 string[] babage = {"0","1","2","3","4","5","6"}; //连线的x轴数据
 string[] babytall = {"50","60","90","110","130","135","140"};
 string[] usuatall = {"55","65","95","115","125","135","145"};//连线的y轴数据
 
 linedata data=new linedata(babage,setline(babage,babytall,1,"宝宝身高")); //创建linedata实体类并添加第一条曲线
 data.adddataset(setline(babage,usuatall,2,"正常身高")); //添加第二条曲线
 charttall.setdata(data);
 }
 
 //画线
 private linedataset setline(string[] babage, string[] tall,int flag,string name) {
 arraylist<string> xvalsage = new arraylist<string>();
 for (int i = 0; i < babage.length; i++) {
 xvalsage.add(babage[i]);
 }
 arraylist<entry> yvalsbabytall = new arraylist<entry>();
 for (int i = 0; i < tall.length; i++) {
 yvalsbabytall.add(new entry(float.parsefloat(tall[i]), i));
 }
 //设置baby的成长曲线
 linedataset setdata = new linedataset(yvalsbabytall,name);
 setdata.setdrawcubic(true); //设置曲线为圆滑的线
 setdata.setcubicintensity(0.2f);
 setdata.setdrawfilled(false); //设置包括的范围区域填充颜色
 setdata.setdrawcircles(true); //设置有圆点
 setdata.setlinewidth(2f); //设置线的宽度
 setdata.setcirclesize(5f); //设置小圆的大小
 setdata.sethighlightcolor(color.rgb(244, 117, 117));
 //设置曲线颜色
 if(flag==1)
 setdata.setcolor(color.rgb(104, 241, 175)); //宝宝身高曲线颜色
 else if(flag==2)
 setdata.setcolor(color.rgb(255, 0, 0)); //普通身高曲线颜色
 return setdata; //返回曲线
 }
}

源码:点击打开链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。