Android LineChart繪制多條曲線的方法
本文實(shí)例為大家分享了Android LineChart繪制多條曲線的具體代碼,供大家參考,具體內(nèi)容如下
目標(biāo)效果:


1.新建custom_marker_view.xml頁面作為點(diǎn)擊彈出框的頁面:
<?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() {
// 設(shè)置在Y軸上是否是從0開始顯示
chartTall.setStartAtZero(true);
//是否在Y軸顯示數(shù)據(jù),就是曲線上的數(shù)據(jù)
chartTall.setDrawYValues(true);
//設(shè)置網(wǎng)格
chartTall.setDrawBorder(true);
chartTall.setBorderPositions(new BarLineChartBase.BorderPosition[] {
BorderPosition.BOTTOM});
//在chart上的右下角加描述
chartTall.setDescription("身高曲線圖");
//設(shè)置Y軸上的單位
chartTall.setUnit("cm");
//設(shè)置透明度
chartTall.setAlpha(0.8f);
//設(shè)置網(wǎng)格底下的那條線的顏色
chartTall.setBorderColor(Color.rgb(213, 216, 214));
//設(shè)置Y軸前后倒置
chartTall.setInvertYAxisEnabled(false);
//設(shè)置高亮顯示
chartTall.setHighlightEnabled(true);
//設(shè)置是否可以觸摸,如為false,則不能拖動(dòng),縮放等
chartTall.setTouchEnabled(true);
//設(shè)置是否可以拖拽,縮放
chartTall.setDragEnabled(true);
chartTall.setScaleEnabled(true);
//設(shè)置是否能擴(kuò)大擴(kuò)小
chartTall.setPinchZoom(true);
//設(shè)置點(diǎn)擊chart圖對(duì)應(yīng)的數(shù)據(jù)彈出標(biāo)注
MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
mv.setOffsets(-mv.getMeasuredWidth() / 2, -mv.getMeasuredHeight());
chartTall.setMarkerView(mv);
chartTall.setHighlightIndicatorEnabled(false);
//設(shè)置字體格式,如正楷
Typeface tf = Typeface.createFromAsset(getAssets(),
"OpenSans-Regular.ttf");
chartTall.setValueTypeface(tf);
XLabels xl = chartTall.getXLabels();
xl.setPosition(XLabelPosition.BOTTOM); // 設(shè)置X軸的數(shù)據(jù)在底部顯示
xl.setTypeface(tf); // 設(shè)置字體
xl.setTextSize(10f); // 設(shè)置字體大小
xl.setSpaceBetweenLabels(3); // 設(shè)置數(shù)據(jù)之間的間距
YLabels yl = chartTall.getYLabels();
yl.setTypeface(tf); // 設(shè)置字體
yl.setTextSize(10f); // s設(shè)置字體大小
yl.setLabelCount(5); // 設(shè)置Y軸最多顯示的數(shù)據(jù)個(gè)數(shù)
// 加載數(shù)據(jù)
setData();
//從X軸進(jìn)入的動(dòng)畫
chartTall.animateX(4000);
chartTall.animateY(3000); //從Y軸進(jìn)入的動(dòng)畫
chartTall.animateXY(3000, 3000); //從XY軸一起進(jìn)入的動(dòng)畫
//設(shè)置最小的縮放
chartTall.setScaleMinima(0.5f, 1f);
}
private void setData() {
String[] babAge = {"0","1","2","3","4","5","6"}; //連線的x軸數(shù)據(jù)
String[] babyTall = {"50","60","90","110","130","135","140"};
String[] usuaTall = {"55","65","95","115","125","135","145"};//連線的y軸數(shù)據(jù)
LineData data=new LineData(babAge,setLine(babAge,babyTall,1,"寶寶身高")); //創(chuàng)建LineData實(shí)體類并添加第一條曲線
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));
}
//設(shè)置baby的成長(zhǎng)曲線
LineDataSet setData = new LineDataSet(yValsBabyTall,name);
setData.setDrawCubic(true); //設(shè)置曲線為圓滑的線
setData.setCubicIntensity(0.2f);
setData.setDrawFilled(false); //設(shè)置包括的范圍區(qū)域填充顏色
setData.setDrawCircles(true); //設(shè)置有圓點(diǎn)
setData.setLineWidth(2f); //設(shè)置線的寬度
setData.setCircleSize(5f); //設(shè)置小圓的大小
setData.setHighLightColor(Color.rgb(244, 117, 117));
//設(shè)置曲線顏色
if(flag==1)
setData.setColor(Color.rgb(104, 241, 175)); //寶寶身高曲線顏色
else if(flag==2)
setData.setColor(Color.rgb(255, 0, 0)); //普通身高曲線顏色
return setData; //返回曲線
}
}
源碼:點(diǎn)擊打開鏈接
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android把商品添加到購物車的動(dòng)畫效果(貝塞爾曲線)
- Android 曲線圖的繪制示例代碼
- Android利用MPAndroidChart繪制曲線圖表的基礎(chǔ)教程
- Android編程之canvas繪制各種圖形(點(diǎn),直線,弧,圓,橢圓,文字,矩形,多邊形,曲線,圓角矩形)
- Android實(shí)現(xiàn)價(jià)格走勢(shì)自定義曲線圖
- Android 利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡的示例
- android貝塞爾曲線實(shí)現(xiàn)波浪效果
- Android貝塞爾曲線初步學(xué)習(xí)第二課 仿QQ未讀消息氣泡拖拽黏連效果
- Android中貝塞爾曲線的繪制方法示例代碼
- Android實(shí)現(xiàn)動(dòng)態(tài)曲線繪制
相關(guān)文章
Flutter應(yīng)用框架運(yùn)行微信小程序方法
這篇文章主要介紹了在Flutter?App內(nèi)運(yùn)行微信小程序的過程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
基于Flutter實(shí)現(xiàn)按位置大小比例布局的控件
做視頻監(jiān)控項(xiàng)目時(shí)需要需要展示多分屏,比如2x2、3x3、414等等,所以本文為大家介紹了如何基于Flutter實(shí)現(xiàn)按位置大小比例布局的控件,需要的可以參考一下2023-08-08
Kotlin協(xié)程低級(jí)api startCoroutine與ContinuationInterceptor
這篇文章主要為大家介紹了Kotlin協(xié)程低級(jí)api startCoroutine與ContinuationInterceptor示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
Android實(shí)現(xiàn)拖動(dòng)效果的兩種方法
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)拖動(dòng)效果的兩種方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04
Android性能測(cè)試關(guān)注的指標(biāo)整理
在本篇文章里小編給各位整理的是關(guān)于Android性能測(cè)試關(guān)注的指標(biāo)整理內(nèi)容,有興趣的朋友們學(xué)習(xí)下。2019-10-10Android 后臺(tái)運(yùn)行白名單實(shí)現(xiàn)?;?/a>
這篇文章主要介紹了Android 后臺(tái)運(yùn)行白名單實(shí)現(xiàn)?;睿闹型ㄟ^示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Popupwindow 的簡(jiǎn)單實(shí)用案例(顯示在控件下方)
下面小編就為大家?guī)硪黄狿opupwindow 的簡(jiǎn)單實(shí)用案例(顯示在控件下方)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04

