Android圖表庫HelloCharts的實例詳解

更新時間：2022年01月06日 15:27:56 作者：曲幽

這篇文章主要介紹了Android中的圖標庫HelloCharts的一些簡單使用實例，文中的示例代碼講解詳細，對我們學習有一定的參考價值，需要的可以參考一下

概述

效果圖，數據可平移查看歷史

build.gradle

implementation 'com.github.lecho:hellocharts-library:1.5.8@aar'

layout

直接在布局中加入相應的圖表控件

<lecho.lib.hellocharts.view.LineChartView
    android:id="@+id/ChartLine"
    android:layout_width="0dp"
    android:layout_height="300dp"
    android:padding="6dp"/>

常用圖表類型

LineChartView

PointValue

圖表上每一點的數據 PointValue(float x, float y)

第一個參數表示點的位置，第二個參數表示點上的數據。如果是多條折線，則需要為每一條拆線相同位置定義不同的PointValue

PointValue point1 = new PointValue(0, 1000);
PointValue point2 = new PointValue(1, 1500);
PointValue point1 = new PointValue(0, 1200);
PointValue point2 = new PointValue(1, 1600);

setLabel() 可以為數據點定義顯示文本

point1.setLabel("202101");

實例

List<PointValue> valuesR = new ArrayList<>();
List<PointValue> valuesS = new ArrayList<>();
for (int i = 0; i < dataEntities.size(); i++) {
    DataEntity dataEntity = dataEntities.get(i);
    if (dataEntity.getDataR() < 3000 || dataEntity.getDataS() < 3000)
        continue;
    valuesR.add(new PointValue(i, dataEntity.getDataR()).setLabel(String.valueOf(dataEntity.getDataR())));
    valuesS .add(new PointValue(i, dataEntity.getDataS()).setLabel(String.valueOf(dataEntity.getDataS())));
}

如果數據太小，則跳過。數據不加載入數據點集合，但 i 索引會增加，折線上會出現大的間隔。如果不想出現此情況，可更換 for 循環(huán)為 foreach 循環(huán)，然后手動控制 i 的增長。

Line

定義線條上的數據和顏色等

構造函數傳入包含PointValue的列表，有幾條折線就創(chuàng)建幾條并綁定不同的點數據列表

List<Line> lines = new ArrayList<>();
lines.add(new Line(valuesR).setColor(Color.RED).setCubic(false).setHasLabelsOnlyForSelected(true));
lines.add(new Line(valuesS).setColor(Color.BLUE).setCubic(false).setHasLabelsOnlyForSelected(true));

常用屬性方法

setColor() # 設置折線顏色
setCubic(true) # 折線是否平滑，即是曲線還是折線
setShape() # 折線上數據點的形狀，有三種：ValueShape.SQUARE(方) ValueShape.CIRCLE(圓) ValueShape.DIAMOND(菱)
setFilled(false) # 是否填充曲線的面積
setHasLabels(true) # 曲線的數據坐標是否加上備注
setHasLabelsOnlyForSelected(true) # 同上，但是只有點擊數據坐標提示數據，但設置了這個屬性，上面的屬性即失效
setHasLines(true) # 是否顯示線，為false則只顯示點
setHasPoints(true) # 是否顯示圓點，如果為false則每個數據點都是個大的圓點

Axis

X軸

List<AxisValue> xValue = new ArrayList<>();
for(int i = 0; i < dataEntities.size(); i++){
    DataEntity dataEntity = dataEntities.get(i);
    xValue.add(new AxisValue(i).setLabel(dataEntity .getDate()));
}
Axis axisX = new Axis();
axisX.setHasTiltedLabels(true);
axisX.setTextColor(Color.GRAY);
axisX.setValues(xValue);

Y軸

List<AxisValue> yValue = new ArrayList<>();
for(int i = 0; i < 8000; i = i + 1000){
    yValue.add(new AxisValue(i).setLabel(String.valueOf(i)));
}
Axis axisY  = new Axis();
axisY.setTextColor(Color.GRAY);
axisY.setValues(yValue);
axisY.setHasLines(true);

LineChartData data = new LineChartData();
data.setLines(lines);
data.setAxisXBottom(axisX);
data.setAxisYLeft(axisY);

AxisValue

創(chuàng)建實例

AxisValue v = new AxisValue(i).setLabel(String.valueOf(i));

常用屬性方法

setHasTiltedLabels(true) # 坐標軸字體是否顯示斜體
setValues() # 填充數據列表
setHasLines(true) # 是否顯示參考線

LineChartData

將以上包含了點數據列表的折線添加到 LineChartData 中并綁定給圖表控件

Chart

//設置是否允許平移以及平移的方向
bindingView.chartLine.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
//填充數據
bindingView.chartLine.setLineChartData(data);

實現平移必須設置視圖大小

//實例化一個新的ViewPort 構造函數中傳入填充數據后的默認最大視圖
Viewport viewport = new Viewport(bindingView.chartLine.getMaximumViewport()); 
//設置y軸的顯示
viewport.top = MyApplication.getSharedPreferences().getInt("max", 8000);
viewport.bottom = MyApplication.getSharedPreferences().getInt("min", 3000);
//一定要先設置最大視圖范圍
bindingView.chartLine.setMaximumViewport(viewport); //圖表最大視圖
//設置x軸的顯示
viewport.right = MyApplication.getSharedPreferences().getInt("chart_right", 7);
viewport.left = 0;
//最后設置當前顯示的視圖范圍
bindingView.chartLine.setCurrentViewport(viewport); //圖表當前視圖

完整代碼

private void initChart(List<DataEntity> dataEntities) {
    List<PointValue> valuesR = new ArrayList<>();
    List<PointValue> valuesS = new ArrayList<>();
    List<AxisValue> xValue = new ArrayList<>();
    List<AxisValue> yValue = new ArrayList<>();
    for (int i = 0; i < dataEntities.size(); i++) {
        DataEntity dataEntity = dataEntities.get(i);
        if (dataEntity.getDataR() < MyApplication.getSharedPreferences().getInt("min", 3000) || dataEntity.getDataS() < MyApplication.getSharedPreferences().getInt("min", 3000))
            continue;
        valuesR.add(new PointValue(i, dataEntity .getDataR()).setLabel(String.valueOf(dataEntity .getDataR())));
        valuesS.add(new PointValue(i, dataEntity .getDataS()).setLabel(String.valueOf(dataEntity .getDataS())));
        xValue.add(new AxisValue(i).setLabel(dataEntity .getDate()));
    }
    for (int i = 0; i < MyApplication.getSharedPreferences().getInt("salary_max", 8000); i = i + 500) {
        yValue.add(new AxisValue(i).setLabel(String.valueOf(i)));
    }
    List<Line> lines = new ArrayList<>();
    lines.add(new Line(valuesR).setColor(Color.RED).setCubic(false).setHasLabelsOnlyForSelected(true));
    lines.add(new Line(valuesS).setColor(Color.BLUE).setCubic(false).setHasLabelsOnlyForSelected(true));
    Axis axisX = new Axis();
    axisX.setHasTiltedLabels(true);
    axisX.setTextColor(Color.GRAY);
    axisX.setValues(xValue);
    Axis axisY = new Axis();
    axisY.setTextColor(Color.GRAY);
    axisY.setValues(yValue);
    axisY.setHasLines(true);


    LineChartData data = new LineChartData();
    data.setLines(lines);
    data.setAxisXBottom(axisX);
    data.setAxisYLeft(axisY);
    bindingView.chartLine.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
    bindingView.chartLine.setLineChartData(data);
    //設置圖表顯示的大小
    Viewport viewport = new Viewport(bindingView.chartLine.getMaximumViewport()); //填充數據后的默認最大視圖
    viewport.top = MyApplication.getSharedPreferences().getInt("max", 8000);
    viewport.bottom = MyApplication.getSharedPreferences().getInt("min", 3000);
    bindingView.chartLine.setMaximumViewport(viewport); //圖表最大視圖
    viewport.right = MyApplication.getSharedPreferences().getInt("chart_right", 7);
    viewport.left = 0;
    bindingView.chartLine.setCurrentViewport(viewport); //圖表當前視圖
}

以上就是Android圖表庫HelloCharts的實例詳解的詳細內容，更多關于Android圖表庫HelloCharts的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

android調用C語言實現內存的讀取與修改的方法示例
這篇文章主要介紹了android調用C語言實現內存的讀取與修改的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
Listview加載的性能優(yōu)化是如何實現的
在android開發(fā)中Listview是一個很重要的組件，它以列表的形式根據數據的長自適應展示具體內容,用戶可以自由的定義listview每一列的布局，接下來通過本文給大家介紹Listview加載的性能優(yōu)化是如何實現的，對listview性能優(yōu)化相關知識感興趣的朋友一起學習吧
2016-01-01
Android中庫項目的使用方法圖文介紹
類似開發(fā)其他Java應用一樣，我們可以將可復用的代碼，打成一個jar包，供所有需要的項目使用。這樣，可以解決很大一部分代碼復用的問題，本文將詳細介紹，需要了解的朋友可以參考下
2012-12-12
android studio集成ijkplayer的示例代碼
本篇文章主要介紹了android studio集成ijkplayer的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Android實現自定義驗證碼輸入框效果(實例代碼)
這篇文章主要介紹了Android實現自定義驗證碼輸入框效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
Android實現簡易秒表功能
這篇文章主要為大家詳細介紹了Android實現簡易秒表功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
Android混合開發(fā)教程之WebView的使用方法總結
WebView是一個基于webkit引擎、展現web頁面的控件，下面這篇文章主要給大家介紹了關于Android混合開發(fā)教程之WebView的使用方法，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧
2018-05-05
android 照相功能的簡單實例
android 照相功能的簡單實例，需要的朋友可以參考一下
2013-06-06
Android RecycleView 實現左滑上下分層示例代碼（自定義功能）
這篇文章主要介紹了Android RecycleView 實現左滑上下分層示例代碼（自定義功能）,具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-03-03
Android編程實現抽屜效果的方法詳解
這篇文章主要介紹了Android編程實現抽屜效果的方法,結合具體實例形式分析了Android實現抽屜效果的具體步驟與相關操作技巧,需要的朋友可以參考下
2017-05-05