LineChartView（折线图）的简单使用

最新推荐文章于 2026-05-17 17:31:54 发布

原创最新推荐文章于 2026-05-17 17:31:54 发布 · 4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

Android 专栏收录该内容

64 篇文章

订阅专栏

本文介绍了如何在Android项目中使用LineChartView绘制折线图，包括在XML中添加控件和在Activity中设置数据。通过示例代码展示了设置折线关键点数量的方法，并提到了参考文章和效果图。

上个月忙项目，好久不写博客，今天来说说折线图的使用。

去GitHub可以下载这个jar包，在项目引用了jar包后可以在gradle里看到有引用的：

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

引用好包后，我们开始看看怎么进行简单的使用。

1.在xml中使用该控件chart_test.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical"
    app:cardCornerRadius="3dp"
    app:contentPadding="3dp"
    card_view:cardPreventCornerOverlap="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ffffff"
        android:orientation="vertical"
        android:paddingBottom="2dp"
        android:paddingLeft="2dp"
        android:paddingRight="2dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="2dp">

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:singleLine="true"
                android:textColor="#666666"
                android:textSize="12sp"
                android:text="人数"/>

            <TextView
                android:id="@+id/tv_num"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical|end"
                android:textColor="#666666"
                android:textSize="12sp"
                android:text="今日：0"/>
        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#b7b7b7" />

        <lecho.lib.hellocharts.view.LineChartView
            android:id="@+id/line_chart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:paddingTop="5dp" />

        <View
            android:id="@+id/view_line"
            android:layout_width="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_height="2dp"
            android:background="#5EB1EE"
            android:visibility="gone"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#b7b7b7" />

    </LinearLayout>
</android.support.v7.widget.CardView>

2.在Activity声明和使用：

LineChartView lineChartView;
    View line;
    public void setLineChartView(){
        line = findViewById(R.id.view_line);
        boolean isShowLine = true;
        lineChartView = (LineChartView)findViewById(R.id.line_chart);
        String color = "#5EB1EE";
        int[] showPoint = {0,2,2,4,5,3,1};
        List<PointValue> pointValues = new ArrayList<>();
        for (int i = 0; i < showPoint.length; i++) {
            if(showPoint[i] > 0){
                isShowLine = false;
            }
            pointValues.add(new PointValue(i, showPoint[i]));
        }
        if(isShowLine){
            line.setVisibility(View.VISIBLE);
        }else {
            line.setVisibility(View.GONE);
        }
        Line line = new Line(pointValues).setColor(Color.parseColor(color));
        List<Line> lines = new ArrayList<>();
        line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状  这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.SQUARE）
        line.setCubic(false);//曲线是否平滑
        line.setStrokeWidth(2);//线条的粗细，默认是3
        line.setFilled(true);//是否填充曲线的面
//        line.setHasLabels(true);//曲线的数据坐标是否加上备注
//		line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据（设置了这个line.setHasLabels(true);就无效）
        line.setHasLines(true);//是否用直线显示。如果为false 则没有曲线只有点显示
        line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示
        line.setPointRadius(2);
        lines.add(line);
        LineChartData data = new LineChartData();
        data.setLines(lines);

        //设置行为属性，支持缩放、滑动以及平移
        lineChartView.setInteractive(false);  //与用户交互
        lineChartView.setZoomType(ZoomType.HORIZONTAL);  //缩放类型，水平
        lineChartView.setMaxZoom((float) 2);//缩放比例
        lineChartView.setLineChartData(data);
        lineChartView.setVisibility(View.VISIBLE);

        Viewport v = new Viewport(lineChartView.getMaximumViewport());
        v.left = 0;
        v.right = showPoint.length-1;
        lineChartView.setCurrentViewport(v);
    }

这里的使用比较简单，int[] showPoint = {0,2,2,4,5,3,1};直接声明一个折线关键点要显示的数量（这里是6个，想要多个可以自己设计，只要Line中的PointView对得上即可），具体设置请看代码，属性参考可以参见http://www.jianshu.com/p/90a544b739b1这篇文章，最后效果图在评论中给出。