Android LineChart繪制多條曲線的方法
更新時間：2019年05月24日 11:48:43 作者：Vivinia_Vivinia
這篇文章主要為大家詳細(xì)介紹了Android LineChart繪制多條曲線的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android LineChart繪制多條曲線的具體代碼，供大家參考，具體內(nèi)容如下
目標(biāo)效果：
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() {
// 設(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，則不能拖動，縮放等
chartTall.setTouchEnabled(true);
//設(shè)置是否可以拖拽，縮放
chartTall.setDragEnabled(true);
chartTall.setScaleEnabled(true);
//設(shè)置是否能擴(kuò)大擴(kuò)小
chartTall.setPinchZoom(true);
//設(shè)置點擊chart圖對應(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ù)個數(shù)
// 加載數(shù)據(jù)
setData();
//從X軸進(jìn)入的動畫
chartTall.animateX(4000);
chartTall.animateY(3000); //從Y軸進(jìn)入的動畫
chartTall.animateXY(3000, 3000); //從XY軸一起進(jìn)入的動畫
//設(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實體類并添加第一條曲線
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的成長曲線
LineDataSet setData = new LineDataSet(yValsBabyTall,name);
setData.setDrawCubic(true); //設(shè)置曲線為圓滑的線
setData.setCubicIntensity(0.2f);
setData.setDrawFilled(false); //設(shè)置包括的范圍區(qū)域填充顏色
setData.setDrawCircles(true); //設(shè)置有圓點
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; //返回曲線
}
}
源碼：點擊打開鏈接
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android把商品添加到購物車的動畫效果（貝塞爾曲線）
- Android 曲線圖的繪制示例代碼
- Android利用MPAndroidChart繪制曲線圖表的基礎(chǔ)教程
- Android編程之canvas繪制各種圖形(點,直線,弧,圓,橢圓,文字,矩形,多邊形,曲線,圓角矩形)
- Android實現(xiàn)價格走勢自定義曲線圖
- Android 利用三階貝塞爾曲線繪制運動軌跡的示例
- android貝塞爾曲線實現(xiàn)波浪效果
- Android貝塞爾曲線初步學(xué)習(xí)第二課 仿QQ未讀消息氣泡拖拽黏連效果
- Android中貝塞爾曲線的繪制方法示例代碼
- Android實現(xiàn)動態(tài)曲線繪制
相關(guān)文章
這篇文章主要介紹了Android中異步類AsyncTask用法,分析總結(jié)了Async Task類的功能、特點及相關(guān)的使用技巧與注意事項,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了在Flutter?App內(nèi)運行微信小程序的過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
做視頻監(jiān)控項目時需要需要展示多分屏，比如2x2、3x3、414等等，所以本文為大家介紹了如何基于Flutter實現(xiàn)按位置大小比例布局的控件，需要的可以參考一下2023-08-08
Kotlin協(xié)程低級api startCoroutine與ContinuationInterceptor
這篇文章主要為大家介紹了Kotlin協(xié)程低級api startCoroutine與ContinuationInterceptor示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)拖動效果的兩種方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-04-04
Android性能測試關(guān)注的指標(biāo)整理
在本篇文章里小編給各位整理的是關(guān)于Android性能測試關(guān)注的指標(biāo)整理內(nèi)容，有興趣的朋友們學(xué)習(xí)下。2019-10-10
這篇文章主要為大家詳細(xì)介紹了Android仿天貓商品拋物線加入購物車動畫，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
網(wǎng)傳微信支付頁面的第三方鏈接一個格子需要廣告費1一個億，微信支付頁非常適合做功能導(dǎo)航，本篇使用 ListView和 GridView 模仿了微信支付的頁面，同時介紹了如何裝飾一個組件的背景和邊緣樣式。
2021-05-05 
下面小編就為大家?guī)硪黄狿opupwindow 的簡單實用案例(顯示在控件下方)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04