【Android】利用HelloChart繪制曲線

1、將jar包放到app下的libs檔案夾中

2、build.gradle(app)：

implementation files('libs\\hellocharts-library-1.5.8.jar')

3、MainActivity.java

package com.dj.drawlinestest;

import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;
import java.util.Random;

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;

public class MainActivity extends AppCompatActivity {

    LineChartView lineChart;

    Random mRandom;
    Handler mHandler;
    MyRunnable mRunnable;
    DrawLinesUtil mDrawLinesUtil;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRandom = new Random();

        lineChart = findViewById(R.id.LineChart);
        mDrawLinesUtil = new DrawLinesUtil(lineChart);

        mRunnable = new MyRunnable();
        mHandler = new Handler();
        mHandler.postDelayed(mRunnable, 0);
    }

    private class MyRunnable implements Runnable {
        @Override
        public void run() {
            Integer number = Math.abs(mRandom.nextInt()) % 50 + 50;
            mDrawLinesUtil.updateLocNumList(number);
            mDrawLinesUtil.display_chart();
            mHandler.postDelayed(this, 1000);
        }
    }

}

4、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/LineChart"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:alpha="0.6"></lecho.lib.hellocharts.view.LineChartView>

</LinearLayout>

5、工具類：

DrawLinesUtil.java

package com.dj.drawlinestest;

import android.graphics.Color;
import android.view.View;

import java.util.ArrayList;
import java.util.LinkedList;
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;

public class DrawLinesUtil {

    LineChartView lineChart;
    private boolean inited;
    private int pointNumber;
    private List<PointValue> mPointValues ;
    private List<AxisValue>  mAxisXValues ;
    private List<Integer>    mLocNumList  ;


    /**
     * 建構式
     * @param lineChart
     */
    public DrawLinesUtil(LineChartView lineChart) {
        this.lineChart = lineChart;
        this.inited = false;
        this.pointNumber = 60; // +默認顯示60個點
        this.mPointValues    = new ArrayList<>();  // 資料點
        this.mAxisXValues    = new ArrayList<>();  // X軸標注
        this.mLocNumList     = new LinkedList<>(); // 資料源
    }


    /**
     * set  get
     * @return
     */
    public int getPointNumber() {
        return pointNumber;
    }

    public void setPointNumber(int pointNumber) {
        this.pointNumber = pointNumber;
    }

    public LineChartView getLineChart() {
        return lineChart;
    }

    public void setLineChart(LineChartView lineChart) {
        this.lineChart = lineChart;
    }


    public List<Integer> getLocNumList() {
        return mLocNumList;
    }

    /**
     * 供外部呼叫 添加資料
     * @param number
     */
    public void updateLocNumList(Integer number){
        if (mLocNumList.size() >= pointNumber) {
            mLocNumList.remove(0);
        }
        mLocNumList.add(number);
    }


    /**
     * 供外部呼叫 畫曲線
     */
    public void display_chart()
    {
        if( ! inited ){
            setAttribute();
        }
        getXLables();
        getPoints();
        draw_linechart();
    }


    /**
     * 設定行為屬性，支持縮放、滑動以及平移
     */
    private void setAttribute(){
        lineChart.setInteractive(true);
        lineChart.setZoomType(ZoomType.HORIZONTAL);
        lineChart.setMaxZoom((float) 2);//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setVisibility(View.GONE);
        inited = true;
    }


    /**
     * 設定X軸的顯示
     */
    private void getXLables(){
        mAxisXValues.clear();
        for (int i = 0; i < mLocNumList.size(); i++) {
            mAxisXValues.add(new AxisValue(i).setLabel(""));//這里設定x軸的內容
        }
    }


    /**
     * 圖表的每個點的顯示
     */
    private void getPoints() {
        mPointValues.clear();
        //Log.v(TAG,"getPoints"+mLocNumList.size());
        for (int i = 0; i < mLocNumList.size(); i++) {
            mPointValues.add(new PointValue(i, mLocNumList.get(i)));
        }
    }

    /**
     * 內部方法 畫曲線
     */
    private void draw_linechart(){

        Line line = new Line(mPointValues).setColor(Color.parseColor("#FFCD41"));//("#FFCD41"));  //折線的顏色（橙色）
        List<Line> lines = new ArrayList<>();
        line.setShape(ValueShape.CIRCLE);//折線圖上每個資料點的形狀  這里是圓形 （有三種 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND）
        line.setCubic(true);//曲線是否平滑，即是曲線還是折線
        line.setFilled(true);//是否填充曲線的面積
        line.setHasLabels(false);//曲線的資料坐標是否加上備注
        line.setHasLabelsOnlyForSelected(true);//點擊資料坐標提示資料（設定了這個line.setHasLabels(true);就無效）
        line.setHasLines(true);//是否用線顯示，如果為false 則沒有曲線只有點顯示
        line.setHasPoints(true);//是否顯示圓點 如果為false 則沒有原點只有點顯示（每個資料點都是個大的圓點）
        line.setPointRadius(3);
        lines.add(line);
        LineChartData data = new LineChartData();
        data.setLines(lines);

        //坐標軸
        Axis axisX = new Axis(); //X軸
        axisX.setTextSize(0);//設定字體大小
        //axisX.setMaxLabelChars(20); //最多幾個X軸坐標，意思就是你的縮放讓X軸上資料的個數7<=x<=mAxisXValues.length
        axisX.setValues(mAxisXValues);  //填充X軸的坐標名稱
        data.setAxisXBottom(axisX); //x 軸在底部
        //data.setAxisXTop(axisX);  //x 軸在頂部
        // axisX.setHasLines(true); //x 軸分割線

        // Y軸是根據資料的大小自動設定Y軸上限(在下面我會給出固定Y軸資料個數的解決方案)
        Axis axisY = new Axis();  //Y軸
        axisY.setName("");//y軸標注
        axisY.setTextSize(8);//設定字體大小
        data.setAxisYLeft(axisY);  //Y軸設定在左邊
        //axisY.setHasLines(true); //Y軸分割線



        //設定行為屬性，支持縮放、滑動以及平移
        lineChart.setInteractive(true);
        lineChart.setZoomType(ZoomType.HORIZONTAL);
        lineChart.setMaxZoom((float) 2);//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setLineChartData(data);

        lineChart.setVisibility(View.VISIBLE);

        Viewport v2 = new Viewport(lineChart.getMaximumViewport());
        v2.top    = 100;
        v2.bottom = 0;
        if (mLocNumList.size()>24) {
            lineChart.setMaximumViewport(v2);
            Viewport v = new Viewport(lineChart.getMaximumViewport());
            v.left = mLocNumList.size() - 24-1;
            lineChart.setCurrentViewport(v);
        }else
        {
            v2.right  = 24;
            lineChart.setMaximumViewport(v2);
            lineChart.setCurrentViewport(v2);
        }
    }
}