android easily draw a nice line chart?

First of all, attach the hellocharts framework address . I also learned by downloading the demo for comprehension testing. There may be areas that have not been considered. Please also point out. If you want to learn more about this framework, you can download the Demo to learn it yourself.

Stop talking nonsense, and the effect picture:

Step 1: Import dependent packages

implementation 'com.github.lecho:hellocharts-android:v1.5.8'

Step 2: Configure the xml file

It's still relatively simple here, there is nothing to say

<androidx.constraintlayout.widget.ConstraintLayout
    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"
    tools:context=".LineChartActivity" >

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginBottom="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></lecho.lib.hellocharts.view.LineChartView>

</androidx.constraintlayout.widget.ConstraintLayout>

The third step: activity code (emphasis)

First, attach all the code, and the detailed explanation of the parameters is as follows:

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.animation.ChartAnimationListener;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.listener.LineChartOnValueSelectListener;
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.util.ChartUtils;
import lecho.lib.hellocharts.view.Chart;
import lecho.lib.hellocharts.view.LineChartView;

public class LineChartActivity extends AppCompatActivity {
    
    
    private LineChartView chart;
    private final int maxNumberOfLines = 4;
    private final int numberOfPoints = 6;
    private final int number=60;

    float[][] randomNumbersTab = new float[maxNumberOfLines][numberOfPoints];

    private ValueShape shape = ValueShape.CIRCLE;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_line_chart);
        chart=findViewById(R.id.chart);
        generateValues();
        generateData();

        resetViewport();
    }


    //设置y轴的值从left到number
    private void resetViewport() {
    
    
        final Viewport v = new Viewport(chart.getMaximumViewport());
        v.bottom = 0;
        v.top = number;
        v.left = 0;
        v.right = numberOfPoints - 1;
        chart.setMaximumViewport(v);
        chart.setCurrentViewport(v);
    }

    private void generateValues() {
    
    
        for (int i = 0; i < maxNumberOfLines; ++i) {
    
    
            for (int j = 0; j < numberOfPoints; ++j) {
    
    
                randomNumbersTab[i][j] = (float) Math.random() * number;
            }
        }
    }

    private void generateData() {
    
    
        List<Line> lines = new ArrayList<Line>();
        List<AxisValue> axisXValues = new ArrayList<AxisValue>();
        for (int i = 0; i <= numberOfPoints; i++)
            axisXValues.add(i, new AxisValue(i).setLabel(i + "月"));
        int numberOfLines = 1;
        for (int i = 0; i < numberOfLines; ++i) {
    
    
            List<PointValue> values = new ArrayList<PointValue>();
            for (int j = 0; j < numberOfPoints; j++) {
    
    
                values.add(new PointValue(j, randomNumbersTab[i][j]));
            }

            Line line = new Line(values);
            line.setColor(ChartUtils.pickColor());    //设置颜色随机
            line.setShape(shape);         //设置形状
            line.setCubic(true);          //设置线为曲线，反之为折线
            line.setFilled(true);          //设置填满
            line.setHasLabels(true);    //显示便签
            line.setHasLabelsOnlyForSelected(true);
            line.setHasLines(true);
            line.setHasPoints(true);
            lines.add(line);
        }

        LineChartData data = new LineChartData(lines);

        data.setAxisXBottom(new Axis(axisXValues).setHasLines(true).setTextColor(Color.BLACK).setName("日期").setHasTiltedLabels(true).setMaxLabelChars(4));
        data.setAxisYLeft(new Axis().setHasLines(true).setName("收入").setTextColor(Color.BLACK).setMaxLabelChars(2));
        data.setBaseValue(Float.NEGATIVE_INFINITY);
        chart.setLineChartData(data);
    }
}

1. First have an understanding of the whole

2. elaborate

1.resetViewport method

设置y轴的值从0到number，number我设置为60。

2.generateValues ​​method

生成0到60的随机数，maxNumberOfLines设置折线数我设置为一条，numberOfPoints设置点的个数我设置为6

3. The generateData method ( 重点) has the most content

Illustration:


I may not consider it very thoughtfully, so I can try more, maybe I can learn more about it.

If I have time, I will talk about the realization of statistical graphs, fan graphs and other graphs.