Android圖表庫(kù)HelloCharts的實(shí)例詳解

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

這篇文章主要介紹了Android中的圖標(biāo)庫(kù)HelloCharts的一些簡(jiǎn)單使用實(shí)例，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)有一定的參考價(jià)值，需要的可以參考一下

概述

效果圖，數(shù)據(jù)可平移查看歷史

build.gradle

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

layout

直接在布局中加入相應(yīng)的圖表控件

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

常用圖表類型

LineChartView

PointValue

圖表上每一點(diǎn)的數(shù)據(jù) PointValue(float x, float y)

第一個(gè)參數(shù)表示點(diǎn)的位置，第二個(gè)參數(shù)表示點(diǎn)上的數(shù)據(jù)。如果是多條折線，則需要為每一條拆線相同位置定義不同的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() 可以為數(shù)據(jù)點(diǎn)定義顯示文本

point1.setLabel("202101");

實(shí)例

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())));
}

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

Line

定義線條上的數(shù)據(jù)和顏色等

構(gòu)造函數(shù)傳入包含PointValue的列表，有幾條折線就創(chuàng)建幾條并綁定不同的點(diǎn)數(shù)據(jù)列表

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() # 設(shè)置折線顏色
setCubic(true) # 折線是否平滑，即是曲線還是折線
setShape() # 折線上數(shù)據(jù)點(diǎn)的形狀，有三種：ValueShape.SQUARE(方) ValueShape.CIRCLE(圓) ValueShape.DIAMOND(菱)
setFilled(false) # 是否填充曲線的面積
setHasLabels(true) # 曲線的數(shù)據(jù)坐標(biāo)是否加上備注
setHasLabelsOnlyForSelected(true) # 同上，但是只有點(diǎn)擊數(shù)據(jù)坐標(biāo)提示數(shù)據(jù)，但設(shè)置了這個(gè)屬性，上面的屬性即失效
setHasLines(true) # 是否顯示線，為false則只顯示點(diǎn)
setHasPoints(true) # 是否顯示圓點(diǎn)，如果為false則每個(gè)數(shù)據(jù)點(diǎn)都是個(gè)大的圓點(diǎn)

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)建實(shí)例

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

常用屬性方法

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

LineChartData

將以上包含了點(diǎn)數(shù)據(jù)列表的折線添加到 LineChartData 中并綁定給圖表控件

Chart

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

實(shí)現(xiàn)平移必須設(shè)置視圖大小

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

完整代碼

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);
    //設(shè)置圖表顯示的大小
    Viewport viewport = new Viewport(bindingView.chartLine.getMaximumViewport()); //填充數(shù)據(jù)后的默認(rèn)最大視圖
    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); //圖表當(dāng)前視圖
}

以上就是Android圖表庫(kù)HelloCharts的實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于Android圖表庫(kù)HelloCharts的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: