hellocharts之linechart最詳細介紹（寫了好久）

最近有個新項目做的是空氣溫度，空氣溼度的曲線圖。

研究了很久，最終選擇了框架hellocharts，外國哥們寫的。

但是api註釋不多，所以做起來有點費勁。一邊翻譯，一邊寫代碼。

項目demo下載地址：點擊下載

功夫不負有心人。總算是實現了所有的功能；

第一步：導包

下載地址：http://download.csdn.net/detail/qq_35563053/9792257

複製到libs文件夾中，右鍵選擇add as library      ， 然後選擇app ,點擊ok

                                               

第二步：同步完就可以直接使用了

<?xml version="1.0" encoding="utf-8"?>

        
    

package com.axin;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.graphics.Color;
import android.view.View;
import android.widget.Button;
import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.animation.ChartAnimationListener;
import lecho.lib.hellocharts.formatter.LineChartValueFormatter;
import lecho.lib.hellocharts.formatter.SimpleLineChartValueFormatter;
import lecho.lib.hellocharts.gesture.ContainerScrollType;
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 implements View.OnClickListener{

    private LineChartView chartView;
    private Button but_1;
    private Button but_2;

    //    折線集合（add多個line就會顯示對條線）
    List chartlines = new ArrayList();
    //    橫座標集合，可以設置標註名稱，就是x軸的值集合，可以是0-100，也可以是10000-20000
    List mAxisXValues = new ArrayList();
    //    點的集合，顧名思義一個point，就有他所對應的x y值，假如有個點的值是（5,100）x=5 y=100
    List pointValues = new ArrayList();
    //    折線，多條折線可以new多個線，要顯示誰，就在line集合裏add誰
    Line chartline = new Line();
    //    線上的數據，雞肋但必須得用
    LineChartData lineChartData = new LineChartData();
    //    定義格式，小數點等等信息
    LineChartValueFormatter chartValueFormatter = new SimpleLineChartValueFormatter(2);
    //    X軸、Y軸
    Axis axisX = new Axis();
    Axis axisY = new Axis();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        chartView=(LineChartView)findViewById(R.id.chartView);
        but_1=(Button)findViewById(R.id.but_1);
        but_2=(Button)findViewById(R.id.but_2);
        but_1.setOnClickListener(this);
        but_2.setOnClickListener(this);
    }

    public void setKLine(int type,List list){
//        清空數據，將不影響下一次點擊按鈕 傳過來一個新的list的顯示
        chartlines.clear();
        mAxisXValues.clear();
        pointValues.clear();
        /*
        * 這個循環是循環爲x軸（x底端軸線）增加值應該只能是float類型的，當然int可以
        */
        for(DateForLine date:list){
//            第一進來的值假如是“201703041230”，處理完之後應該是4*24+12
            String time=date.getTime();
            AxisValue axisValue=new AxisValue(parseHour2Ten(time));
//            這句話就關鍵了，你可以隨意設置這個位置顯示的東西，string類型的隨意來
//            我這邊想設置，幾月幾日幾時
            axisValue.setLabel(subTimeDay(time)+"日"+subTimeHour(time)+"時");
            mAxisXValues.add(axisValue);
        }
//        x軸完事了，該布點了
        for(DateForLine date:list){
//            第一點的座標假如是（4*24+12，25.5）  那麼pointValue的參數就應該是這個
            String time=date.getTime();
            PointValue pointValue=new PointValue(parseHour2Ten(time),Float.parseFloat(date.getValue()));
//            這個點的標註信息，String的隨便來
            if(type==1){
                pointValue.setLabel(date.getValue()+"℃");
//                溫度顯示小數
                chartline.setFormatter(chartValueFormatter);
            }else if(type==2){
                pointValue.setLabel(date.getValue()+"%PH");
//                溫度顯示整數就不用設置Formatter了
            }
//            把這個點添加到集合裏去,等會顯示用
            pointValues.add(pointValue);
        }
//        把點的集合放在線上，顯示多條線 就用不同的line分別添加不同的values
        chartline.setValues(pointValues);
//        線的顏色
        chartline.setColor(Color.BLUE);
//        點的顏色
        chartline.setPointColor(Color.BLUE);
//        形狀，ValueShape提供了幾個
        chartline.setShape(ValueShape.CIRCLE);
//        線的透明度
//        chartline.setAreaTransparency(0);
//        點的大小
        chartline.setPointRadius(2);
//        點上的標註信息，剛纔 pointValues裏面每個點的標註
        chartline.setCubic(true);
//        陰影面積
        chartline.setFilled(false);
//        是否用線顯示。如果爲false 則沒有曲線只有點顯示
        chartline.setHasLines(true);
//        是否用點顯示。如果爲false 則沒有點
        chartline.setHasPoints(true);
//        點的標註是否顯示
        chartline.setHasLabels(true);
//        線的粗細
        chartline.setStrokeWidth(2);
//        顯示幾條線，就可以分別設置每一條線，然後add進來
        chartlines.add(chartline);

//        線的集合放在chart數據中，
        lineChartData.setLines(chartlines);

/*        x軸上面的值，就是剛纔mAxisXValues的值
          5個參數分別是：
          1-例如4*24+12 顯示爲4日12時
          2-是否有x軸網格線
          3-x軸信息標註顏色是黑色
          4-x軸網格線白色
          5-x軸信息標註字體12
          6-x軸的大名
          Y軸也是這麼設置，當你想點擊不同的按鈕，顯示不同的信息時可用type進行處理
*/
        axisX.setValues(mAxisXValues).setHasLines(true).setTextColor(Color.BLACK).setLineColor(Color.WHITE).setTextSize(12).setName("時間");;
        axisY.setHasLines(true).setTextColor(Color.BLACK).setLineColor(Color.WHITE);
        if(type==1){
            axisY.setName("溫度");
        }else if(type==2){
            axisY.setName("溼度");
        }

//        X軸上的標註數量,點少的時候可以這麼用，點多的時候，就不建議這麼用了
//        axisX.setMaxLabelChars(8);
//        x 軸在底部
        lineChartData.setAxisXBottom(axisX);
//        x 軸在頂部
//        lineChartData.setAxisXTop(axisX);
//        y 軸在左，也可以右邊
        lineChartData.setAxisYLeft(axisY);

//        這兩句話設置折線上點的背景顏色，默認是有一個小方塊，而且背景色和點的顏色一樣
//        如果想要原來的效果可以不用這兩句話，我的顯示的是透明的
        lineChartData.setValueLabelBackgroundColor(Color.TRANSPARENT);
        lineChartData.setValueLabelBackgroundEnabled(false);


//        把數據放在chart裏，設置完這句話其實就可以顯示了
        chartView.setLineChartData(lineChartData);


//        設置行爲屬性，支持縮放、滑動以及平移，設置他就可以自己設置動作了
        chartView.setInteractive(true);
//        可放大
        chartView.setZoomEnabled(true);
//        我這邊設置橫向滾動
        chartView.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
//        設置可視化視圖樣式，這裏能做的東西非常多，
        final Viewport v = new Viewport(chartView.getMaximumViewport());
//        我設置兩種。點擊不同按鈕時，y軸固定最大值最小值不一樣
//        這裏可以固定x軸，讓y軸變化，也可以x軸y軸都固定，也就是固定顯示在你設定的區間裏的點point（x，y）
        if(type==1){
            v.top=50;
            v.bottom=-50;
        }else if(type==2){
            v.top=100;
            v.bottom=0;
        }
//        這句話非常關鍵，上面兩種設置，來確定最大可視化樣式
//        我們可以理解爲，所有點放在linechart時，整個視圖全看到時候的樣子，也就是點很多很多，距離很緊密
        chartView.setMaximumViewport(v);
//        接着我們要設置，我們打開這個頁面時顯示的樣子
//        如果你想所有，這兩句話就不用了
//        但是我只顯示5個點以內 剛纔插入的點應該是...（4*24+8，-15.5）（4*24+9，-15.5）（4*24+10，-3.5）（4*24+11，20.0）（4*24+12，8.5）
//        x軸最右邊就應該是x=4*24+12 的點 最左邊就應該是x=4*24+8的點
//        當然這個非常靈活，也可以固定顯示y軸 最小多少，最大多少
        v.left=parseHour2Ten(list.get(list.size()-5).getTime());
        v.right =parseHour2Ten(list.get(list.size()-1).getTime());
//        確定上兩句話的設置
        chartView.setCurrentViewport(v);

//        還可以設置當前的動畫效果，有興趣的同學可以試一試
//        chartView.setViewportAnimationListener(new ChartAnimationListener() {
//            @Override
//            public void onAnimationStarted() {
//            }
//            @Override
//            public void onAnimationFinished() {
//                chartView.setMaximumViewport(v);
//                chartView.setViewportAnimationListener(null);
//
//            }
//        });
//        chartView.setCurrentViewport(v);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.but_1:
                List list1=new ArrayList<>();
                list1.add(new DateForLine("201703040130","20.8"));
                list1.add(new DateForLine("201703040230","3.5"));
                list1.add(new DateForLine("201703040330","10.6"));
                list1.add(new DateForLine("201703040430","-20"));
                list1.add(new DateForLine("201703040530","-6"));
                list1.add(new DateForLine("201703040630","5.5"));
                list1.add(new DateForLine("201703040730","-10.5"));
                list1.add(new DateForLine("201703040830","-8.7"));
                list1.add(new DateForLine("201703040930","5.8"));
                list1.add(new DateForLine("201703041030","20"));
                list1.add(new DateForLine("201703041130","17"));
                list1.add(new DateForLine("201703041230","25.5"));
                setKLine(1,list1);
                break;
            case R.id.but_2:
                List list2=new ArrayList<>();
                list2.add(new DateForLine("201703040130","70"));
                list2.add(new DateForLine("201703040230","51"));
                list2.add(new DateForLine("201703040330","23"));
                list2.add(new DateForLine("201703040430","42"));
                list2.add(new DateForLine("201703040530","19"));
                list2.add(new DateForLine("201703040630","5"));
                list2.add(new DateForLine("201703040730","63"));
                list2.add(new DateForLine("201703040830","77"));
                list2.add(new DateForLine("201703040930","42"));
                list2.add(new DateForLine("201703041030","20"));
                list2.add(new DateForLine("201703041130","11"));
                list2.add(new DateForLine("201703041230","44"));
                setKLine(2,list2);
                break;
        }
    }

    //    把我得到的時間格式處理成小時
    public String subTimeMonth(String time){
        return time.substring(4,6);
    }
    public String subTimeDay(String time){
        return time.substring(6,8);
    }
    public String subTimeHour(String time){
        return time.substring(8,10);
    }
    /*
    *假如回來的時間是"201703151955"  2017年3月19日19:55
    * 按照我的需求只要24小時內的值
    * 在x軸上這個時間的值應該是15*24+19
     */
    public int parseHour2Ten(String time){
        return Integer.parseInt(time.substring(6,8))*24+
                Integer.parseInt(time.substring(8,10));
    }
}

package com.axin;

/**
 * Created by Axin on 2017/3/23.
 */

public class DateForLine {
    private String time;
    private String value;

    public DateForLine(String time, String value) {
        this.time = time;
        this.value = value;
    }

    public DateForLine() {
    }

    public String getTime() {
        return time;
    }

    public void setTime(String time) {
        this.time = time;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}

最後實現的效果