Android圖表庫HelloCharts的實例詳解

Posted on by

概述

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

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 循環為 foreach 循環，然後手動控制 i 的增長。

Line

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

構造函數傳入包含PointValue的列表，有幾條折線就創建幾條並綁定不同的點數據列表

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

創建實例

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的資料請關註WalkonNet其它相關文章！

推薦閱讀：