android多條折線圖表顯示(帶一秒動畫過渡、hellocharts)
阿新 • • 發佈:2019-01-30
因為做畢業設計的時候使用到了github中的原始碼hellochart來做圖表,所以把個人修改後的程式碼做一個總結。多條折線同時顯示在一個圖裡,並且帶有一秒的動畫過渡,這裡的橫座標是定長,效果類似於譜線變化。
1.MainActivity.java
package ldqzju.hellocharts;
import android.os.Handler;
import android.os.Message;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;
import charts.LineChart;
import lecho.lib.hellocharts.view.LineChartView;
public class MainActivity extends AppCompatActivity {
String[] Xasis = new String[20];
List<int[]> ListYasis = new ArrayList<>();
LineChart lineChart = new LineChart();
LineChartView chart;
int [] Yasis1s = new int[20];//折現1動畫開始時資料
int[] Yasis2s = new int[20];//折現2動畫開始時資料
int[] Yasis1e = new int[20];//折現1資料更新結果
int[] Yasis2e = new int[20];//折現2資料更新結果
int[] Yasis1gap = new int[20];//動畫每秒步進的資料
int[] Yasis2gap = new int[20];
final int TIMEDATACHANGE = 3000;//3秒資料率重新整理一次
final int FPS = 20 ;//幀數設定
private Handler handler = new Handler() {
int count = 0;//計算幀數
public void handleMessage(Message msg) {
switch (msg.what) {
case 0:{//資料更新
count =0;
for(int i=0;i<Xasis.length;i++){
Yasis1e[i] = ((int) (Math.random()*2000));
Yasis1gap[i] = (Yasis1e[i] - Yasis1s[i])/FPS; //每秒20幀數
Yasis2e[i] = ((int) (Math.random()*2000));
Yasis2gap[i] = (Yasis2e[i] - Yasis2s[i])/FPS; //每秒20幀數
}
break;
}
case 1:{
count ++ ;
if(count<FPS){//過渡動畫幀數中
ListYasis.clear();
for(int i=0;i<Xasis.length;i++){
Yasis1s[i] = Yasis1s[i] + Yasis1gap[i];
Yasis2s[i] = Yasis2s[i] + Yasis2gap[i];
}
ListYasis.add(Yasis1s);
ListYasis.add(Yasis2s);
lineChart.linePaint(chart,Xasis,ListYasis,"折線測試1");
break;
}
else if(count==FPS){//最後一幀修正資料
ListYasis.clear();
for(int i=0;i<Xasis.length;i++){
Yasis1s[i] = Yasis1e[i];
Yasis2s[i] = Yasis2e[i];
}
ListYasis.add(Yasis1s);
ListYasis.add(Yasis2s);
lineChart.linePaint(chart,Xasis,ListYasis,"折線測試1");
break;
}
}
default:break;
}
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chart = (LineChartView)findViewById(R.id.lineChartView);
for(int i=0;i<Xasis.length;i++) {
ListYasis.clear();
Xasis[i] = "" + i;
}
new Thread(){//資料更新執行緒
public void run() {
while(true){
Message message = new Message();
message.what = 0;
handler.sendMessage(message);
try {
sleep(TIMEDATACHANGE);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
new Thread(){//動畫執行緒,如果資料更新執行緒時常太長,動畫過渡所佔時間很少,可以考慮開關該執行緒,減少消耗
public void run() {
while(true){
Message message = new Message();
message.what = 1;
handler.sendMessage(message);
try {
sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();
}
}
2.工具類LineChart.java
package charts;
import android.graphics.Color;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;
/**
* Created by Lin Dingqiang on 2017/3/9.
* 圖表的工具類
*/
public class LineChart {
/**
* 初始化LineChart的一些設定
*/
private int axisYTop = 0;
private int axisYBottom = 0;
String[] color = new String[]{"#3CCFE3", "#111111"};
public void linePaint(LineChartView lineChart, String[] Xasis, List<int[]> Yasis, String chartName) {
axisYTop = 0;
axisYBottom = 0;
List<Line> lines = new ArrayList<Line>();
for (int i = 0; i < Yasis.size(); i++) {
setYaxis(Yasis.get(i));
Line line = new Line(getAxisPoints(Yasis.get(i))).setColor(Color.parseColor(color[i])); //折線的顏色和座標資料
//折線圖上每個資料點的形狀(有三種 :ValueShape.SQUARE正方形 ValueShape.CIRCLE圓點 ValueShape.DIAMOND菱形)
line.setShape(ValueShape.CIRCLE);
line.setCubic(true);//曲線是否平滑
line.setFilled(false);//是否填充曲線的面積
line.setHasLabelsOnlyForSelected(true);
// line.setHasLabels(true);//曲線的資料座標是否加上備註// line.setHasLabelsOnlyForSelected(true);//點選資料座標提示資料(設定了這個line.setHasLabels(true);就無效)
line.setHasLines(true);//是否用直線顯示。如果為false 則沒有曲線只有點顯示
line.setHasPoints(false);//是否顯示圓點 如果為false 則沒有圓點只有點顯示
// line.setPointRadius(3);//圓點的大小
lines.add(line);//將體重摺線儲存到集合中
}
// LineChartData是巨集觀上面的折線資料顯示,
//因為我們已經將所有的資料都填充進折線中,
//現在只需要將它儲存到LineChartData中
LineChartData data = new LineChartData(lines); //設定時間座標軸
//座標軸
Axis axisX = new Axis(); //X軸
axisX.setHasTiltedLabels(false); //X軸下面座標軸字型是斜的顯示還是直的,true是斜的顯示
axisX.setTextColor(Color.parseColor("#aaaaaa"));//黑色
axisX.setName(chartName); //表格名稱
axisX.setTextSize(8);//設定字型大小
axisX.setValues(getAxisXLables(Xasis)); //填充X軸的座標名稱
data.setAxisXBottom(axisX); //x 軸在底部
axisX.setHasLines(true); //x 軸分割線
//設定Y座標軸
Axis axisY = new Axis(); //Y軸
axisY.setHasLines(true);
data.setAxisYLeft(axisY); //Y軸設定在左邊
//將所有的資料填充到折線控制元件中
lineChart.setLineChartData(data); //設定行為屬性,支援縮放、滑動以及平移
lineChart.setInteractive(true);
lineChart.setZoomType(ZoomType.HORIZONTAL_AND_VERTICAL);
lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
lineChart.setVisibility(View.VISIBLE); //設定一下整體的Y軸顯示的開始和結束座標
final Viewport v1 = new Viewport(lineChart.getMaximumViewport());
v1.bottom = axisYBottom;
v1.top = axisYTop; // You have to set max and current viewports separately.
lineChart.setMaximumViewport(v1); //設定當前的視窗顯示多少個座標資料,必須將折線的可以縮放的開關開啟
Viewport v = new Viewport(lineChart.getMaximumViewport());
v.left = 0;
v.right = Xasis.length;
lineChart.setCurrentViewport(v);
}
/**
* X 軸的顯示
*/
private List<AxisValue> getAxisXLables(String[] Xasis) {
List<AxisValue> mAxisXValues = new ArrayList<>();//橫座標
for (int i = 0; i < Xasis.length; i++) {
mAxisXValues.add(new AxisValue(i).setLabel(Xasis[i]));
}
return mAxisXValues;
}
/**
* 圖表的每個點的顯示
*/
private List<PointValue> getAxisPoints(int[] Yasis) {
List<PointValue> mPointValues = new ArrayList<>();//縱座標
for (int i = 0; i < Yasis.length; i++) {
mPointValues.add(new PointValue(i, Yasis[i]));
}
return mPointValues;
}
private void setYaxis(int[] Yasis) {
for (int t : Yasis) {
if (t > axisYTop) {
axisYTop = t;
}
}
if (axisYTop == 0) {
axisYTop++;
}
axisYTop = (int) (axisYTop *1.2);
}
}
3.佈局檔案activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="ldqzju.hellocharts.MainActivity">
<lecho.lib.hellocharts.view.LineChartView
android:padding="10dp"
android:layout_width="380dp"
android:layout_height="200dp"
android:id="@+id/lineChartView" />
</android.support.constraint.ConstraintLayout>
4.效果圖
5.引用說明
jar檔案來自於網上下載,忘了當時是在哪個地方下的,不過,都出到處都有,我就引用了,如果需要發郵箱的可以留言我。
因為是新手,所很多程式碼部分並不是很高效,甚至有錯誤,大家如果有什麼建議和意見希望能留言我,萬分感謝。