The method of drawing a line chart in the Android development series

There are MPAndroidChart, XCL-chart, achartenginee and hellochart in the Android development method to realize the line chart, here is realized by hellochart, this kind of realization method is simple and quick, the interface is beautiful, the code is clearer after use, and the operation is relatively smooth. Support pie chart, line chart, column chart, etc.

The required dependency package is:
hellocharts-library-1.5.8.jar, the official download link is:
https://github.com/lecho/hellocharts-android/tree/v1.5.8
The usage and project code are also written in comparison Clear.

The first step is to import the dependency package into the project, and then add the dependency in build.gradle (app), such as:

implementation files('libs/hellocharts-library-1.5.8.jar')

The path here is modified according to the actual dependency package path, which is generally placed in the libs folder. Also note that the dependency is added to the build.gradle in the app .

The second step is to add code in the *Activity.java file, the main code is:

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
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 {
    
    

    public LineChartView lineChart;
    String[] date = {
    
    };//X轴的标注
    int[] score= {
    
    };//图表的数据点
    public List<PointValue> mPointValues = new ArrayList<PointValue>();
    public List<AxisValue> mAxisXValues = new ArrayList<AxisValue>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lineChart = (LineChartView) findViewById(R.id.line_chart);

        getAxisXLables();//获取x轴的标注
        getAxisPoints();//获取坐标点
        initLineChart();//图表初始化

    }

    /**
     * 设置X 轴的显示
     */
    private void getAxisXLables() {
    
    
        for (int i = 0; i < date.length; i++) {
    
    
            mAxisXValues.add(new AxisValue(i).setLabel(date[i]));
        }
    }
    /**
     * 图表的每个点的显示
     */
    private void getAxisPoints() {
    
    
        for (int i = 0; i < score.length; i++) {
    
    
            mPointValues.add(new PointValue(i, score[i]));
        }
    }

    private void initLineChart() {
    
    
        Line line = new Line(mPointValues).setColor(Color.parseColor("#1E90FF"));  //折线的颜色(蓝色)
        List<Line> lines = new ArrayList<Line>();
        line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状
        line.setCubic(false);//曲线是否平滑,即是曲线还是折线
        line.setFilled(false);//是否填充曲线的面积
        line.setHasLabels(true);//曲线的数据坐标是否加上备注
       //line.setStrokeWidth(2);//线条的粗细,默认是3
        line.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示(每个数据点都是个大的圆点)
        lines.add(line);
        LineChartData data = new LineChartData();
        data.setLines(lines);
        //坐标轴
        Axis axisX = new Axis(); //X轴
        axisX.setHasTiltedLabels(true);  //X坐标轴字体是斜的显示还是直的,true是斜的显示
        axisX.setTextColor(Color.GRAY);  //设置字体颜色
        //axisX.setName("数据表");  //表格名称
        axisX.setTextSize(10);//设置字体大小
        axisX.setMaxLabelChars(8); //最多几个X轴坐标
        axisX.setValues(mAxisXValues);  //填充X轴的坐标名称
        data.setAxisXBottom(axisX); //x 轴在底部
        //data.setAxisXTop(axisX);  //x 轴在顶部
        axisX.setHasLines(true); //x 轴分割线
        // Y轴是根据数据的大小自动设置Y轴上限
        Axis axisY = new Axis();  //Y轴
        axisY.setName("");//y轴标注
        axisY.setTextSize(10);//设置字体大小
        data.setAxisYLeft(axisY);  //Y轴设置在左边
        //data.setAxisYRight(axisY);  //y轴设置在右边
        //设置行为属性,支持缩放、滑动以及平移
        lineChart.setInteractive(true);
        lineChart.setZoomType(ZoomType.HORIZONTAL);
        lineChart.setMaxZoom((float) 2);//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setLineChartData(data);
        lineChart.setVisibility(View.VISIBLE);
        Viewport v = new Viewport(lineChart.getMaximumViewport());
        v.left = 0;
        v.right = 10;
        lineChart.setCurrentViewport(v);
    }

}

The third step is to add a layout in activity_*.xml, where the layout file is relatively simple, just add a LineChartView.

<lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/line_chart"
        android:padding="30dp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffffff"/>

In the fourth step, you can add the click response of the polyline data point, and draw multiple polylines. For details, please refer to the following link.
The steps to implement click response are consistent with the conventional practice. HelloChart provides a data point listener, and writes functions in the listener;
drawing multiple polylines is to create mPointValues2 and line2. Then set the attributes of line2, and add line2 to the lines. This will have the following key code:

lines.add(line);
lines.add(line2);
data.setLines(lines);

Reference material:
https://www.pianshen.com/article/7772292478/ Line_chart for Android development

https://blog.csdn.net/fjnu_se/article/details/80880862 How to implement a line chart in Android development

https://blog.csdn.net/NYH19961125/article/details/88775491?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=6ac2caac-7eba-449f-8317-ead-tetribum_source=distribute_1098760m_source=distribute. pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control Android HelloChart use summary (click response of polyline data point, multiple polyline drawing method)

https://github.com/lecho/hellocharts-android/tree/v1.5.8

Guess you like

Origin blog.csdn.net/langxiaolin/article/details/114260718