LineChartView-Android

LineChartView（折線圖，動態(tài)折線圖）靜態(tài)波形繪制View，LiveLineChartView（實(shí)時(shí)折線圖）動態(tài)實(shí)時(shí)波形繪制View，簡單易用

Demo效果圖

Screen_recording_20231022_211847 00_00_00-00_00_30.gif

使用

• 添加gradle依賴

//Add it in your root build.gradle at the end of repositories:
 allprojects {
repositories {
   ...
      maven { url 'https://jitpack.io' }
   }
 }
 
 //Add it in your app build.gradle
 dependencies {
     implementation 'com.github.zhzc0x:linechart-android:1.0.5'
 } 

• 布局文件中聲明（更多屬性說明詳見 #自定義屬性說明）

//靜態(tài)波形LineChartView
<com.zhzc0x.chart.LineChartView
    android:id="@+id/lineChartView"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:layout_gravity="start"
    android:layout_marginTop="12dp"
    app:axisArrowHeight="4dp"
    app:axisArrowWidth="7dp"
    app:lineChartBgColor="#f1f1f1"
    app:drawCurve="false"
    app:limitLineWidth="1dp"
    app:lineChartColor="#16422C"
    app:lineChartPaddingStart="42dp"
    app:lineChartPaddingBottom="20dp"
    app:lineChartWidth="2dp"
    app:showAxisArrow="true"
    app:showLineChartAnim="true"
    app:showLineChartPoint="false"
    app:showPointFloatBox="true"
    app:showXAxis="true"
    app:showXScaleLine="true"
    app:showXText="true"
    app:showYAxis="true"
    app:showYScaleLine="true"
    app:showYText="true"
    app:yTextColor="#16422C"
    app:yTextAlign="center"
    app:yTextSize="10sp"
    app:pointXStart="0dp"
    app:pointXEnd="0dp"/>

//動態(tài)實(shí)時(shí)波形LiveLineChartView
<com.zhzc0x.chart.LiveLineChartView
        android:id="@+id/liveLineChartView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginTop="12dp"
        app:lineChartBgColor="#f1f1f1"
        app:lineChartPaddingStart="50dp"
        app:pointSpace="2dp"
        app:limitLineCount="3"/>

• Api說明

class LineChartView {
    ......
    
    /** 設(shè)置限制線 */
    fun setLimitArray(limitArray: List<Float>)

    /**
     * 設(shè)置是否繪制曲線
     * @see R.attr.drawCurve
     * */
    fun setDrawCurve(drawCurve: Boolean)

    /**
     * 設(shè)置是否顯示折線點(diǎn)
     * @see R.attr.showLineChartPoint
     * */
    fun setLineChartPoint(show: Boolean)

    /**
     * 設(shè)置顯示折線動畫
     * @see R.attr.showLineChartAnim
     * */
    fun showLineChartAnim()

    /**
     * 設(shè)置顯示指定折線點(diǎn)信息list
     * 設(shè)置后showLineChartPoint和showPointFloatBox屬性失效，設(shè)置null后恢復(fù)
     *
     * */
    fun setShowPoints(showPointList: List<ShowPointInfo>?)

    /**
     * 設(shè)置折線點(diǎn)繪制開始和結(jié)束的位置
     * @see R.attr.pointXStart = startDp
     * @see R.attr.pointXEnd = endDp
     *
     * */
    fun setPointXInit(startDp: Int, endDp: Int)
    
    /**
     * 設(shè)置折線數(shù)據(jù)
     *
     * @param pointList 點(diǎn)的集合
     * @param xAxisList X軸數(shù)據(jù)集合
     * @param yAxisList Y軸數(shù)據(jù)集合
     * @param pointSpace 點(diǎn)的間距
     *
     * */
    @JvmOverloads
    fun setData(pointList: List<PointInfo>, xAxisList: List<AxisInfo>? = null, yAxisList: List<AxisInfo>,                          pointSpace: Float = 0f)
    
    ......
}

class LiveLineChartView {
    ......
    
    /** 往當(dāng)前屏幕添加折線點(diǎn) */
    fun addPoint(point: Float)

    /**
     * 設(shè)置自動縮放Y軸最大最小值間隔，默認(rèn)繪制一屏幕點(diǎn)的時(shí)間，根據(jù)addPoint()的頻率計(jì)算
     *  @param multipleTime: 繪制一屏幕點(diǎn)的時(shí)間倍數(shù)
     *
     * */
    fun setAutoZoomInterval(multipleTime: Float)
    
    /** 清空當(dāng)前屏幕所有的折線點(diǎn) */
    fun reset()

    /**
     * 設(shè)置是否繪制曲線
     * @see R.attr.drawCurve
     * */
    fun setDrawCurve(drawCurve: Boolean)

    /**
     * 設(shè)置折線點(diǎn)間距，距離越大，折線移動速度越快，反之越小，單位：dp
     * @see R.attr.pointSpace
     * */
    fun setPointSpace(pointSpaceDp: Float)

    /** 設(shè)置自動縮放Y軸最大值 */
    fun setAutoZoomYMax(autoZoomYMax: Boolean)

    /**
     * 設(shè)置折線數(shù)據(jù)
     *
     * @param yAxisList Y軸數(shù)據(jù)集合
     * @param autoZoomYMax 自動縮放Y軸最大值
     *
     * */
    @JvmOverloads
    fun setData(yAxisList: List<AxisInfo>, autoZoomYMax: Boolean = false, yAxisUnit: String = "")
    
    ......
}

自定義屬性說明

<declare-styleable name="LineChartView">
        <!-- 是否顯示X軸 -->
        <attr name="showXAxis" format="boolean" />
        <!-- X軸顏色 -->
        <attr name="xAxisColor" format="reference|color" />
        <!-- X軸線寬 -->
        <attr name="xAxisWidth" format="dimension" />
        <!-- 是否顯示X軸文字 -->
        <attr name="showXText" format="boolean" />
        <!-- X軸文字顏色 -->
        <attr name="xTextColor" format="reference|color" />
        <!-- X軸文字尺寸 -->
        <attr name="xTextSize" format="dimension" />
        <!-- 是否顯示X軸刻度線 -->
        <attr name="showXScaleLine" format="boolean" />
        <!-- X軸刻度線顏色 -->
        <attr name="xScaleLineColor" format="reference|color" />
        <!-- X軸刻度線線寬 -->
        <attr name="xScaleLineWidth" format="dimension" />
        <!-- X軸刻度線長度 -->
        <attr name="xScaleLineLength" format="dimension" />

        <!-- 是否顯示Y軸 -->
        <attr name="showYAxis" />
        <!-- Y軸顏色 -->
        <attr name="yAxisColor" />
        <!-- Y軸線寬 -->
        <attr name="yAxisWidth" />
        <!-- 是否顯示Y軸文字 -->
        <attr name="showYText" />
        <!-- Y軸文字顏色 -->
        <attr name="yTextColor" />
        <!-- Y軸文字尺寸 -->
        <attr name="yTextSize" />
        <!-- Y軸文字位置 -->
        <attr name="yTextAlign" />
        <!-- 是否顯示Y軸刻度線 -->
        <attr name="showYScaleLine" />
        <!-- Y軸刻度線顏色 -->
        <attr name="yScaleLineColor" />
        <!-- Y軸刻度線線寬 -->
        <attr name="yScaleLineWidth" />
        <!-- Y軸刻度線長度 -->
        <attr name="yScaleLineLength" />

        <!-- 是否顯示XY軸箭頭 -->
        <attr name="showAxisArrow" format="boolean" />
        <attr name="axisArrowWidth" format="dimension" />
        <attr name="axisArrowHeight" format="dimension" />
        <attr name="axisArrowColor" format="reference|color" />

        <attr name="limitLineColor" />
        <attr name="limitLineWidth" />
        <attr name="limitLineLength" />
        <attr name="limitLineSpace" />

        <!-- 折線寬度 -->
        <attr name="lineChartWidth" />
        <!-- 折線顏色 -->
        <attr name="lineChartColor" />
        <!-- 折線區(qū)域距離上邊的距離 -->
        <attr name="lineChartPaddingTop" format="dimension" />
        <!-- 折線區(qū)域距離下邊的距離 -->
        <attr name="lineChartPaddingBottom" format="dimension" />
        <!-- 折線區(qū)域距離左邊的距離 -->
        <attr name="lineChartPaddingStart" />
        <!-- 背景顏色 -->
        <attr name="lineChartBgColor" />
        <!-- 繪制曲線 -->
        <attr name="drawCurve" />
        <!-- 繪制動畫折線 -->
        <attr name="showLineChartAnim" format="boolean" />

        <!-- 是否顯示折線點(diǎn) -->
        <attr name="showLineChartPoint" format="boolean" />
        <!-- 折線點(diǎn)半徑 -->
        <attr name="pointRadius" format="dimension" />
        <!-- 折線點(diǎn)顏色 -->
        <attr name="pointColor" format="reference|color" />
        <!-- 折線點(diǎn)描邊寬 -->
        <attr name="pointStrokeWidth" format="dimension" />
        <!-- 折線點(diǎn)描邊顏色 -->
        <attr name="pointStrokeColor" format="reference|color" />
        <!-- 折線點(diǎn)選中半徑 -->
        <attr name="pointSelectedRadius" format="dimension" />
        <!-- 折線點(diǎn)選中顏色 -->
        <attr name="pointSelectedColor" format="reference|color" />
        <!-- 折線點(diǎn)選中描邊寬 -->
        <attr name="pointSelectedStrokeWidth" format="dimension" />
        <!-- 折線點(diǎn)選中描邊顏色 -->
        <attr name="pointSelectedStrokeColor" format="reference|color" />
        <!-- 折線點(diǎn)選中外描邊寬度 -->
        <attr name="pointSelectedOutStrokeWidth" format="dimension" />
        <!-- 折線點(diǎn)選中外描邊顏色 -->
        <attr name="pointSelectedOutStrokeColor" format="reference|color" />
        <!-- 折線點(diǎn)開始繪制的位置 -->
        <attr name="pointXStart" format="dimension" />
        <!-- 折線點(diǎn)結(jié)束繪制的位置 -->
        <attr name="pointXEnd" format="dimension" />

        <!-- 是否顯示折線點(diǎn)懸浮框 -->
        <attr name="showPointFloatBox" format="boolean" />
        <!-- 懸浮框顏色 -->
        <attr name="floatBoxColor" format="reference|color" />
        <!-- 懸浮框文本顏色 -->
        <attr name="floatBoxTextColor" format="reference|color" />
        <!-- 懸浮框文本尺寸 -->
        <attr name="floatBoxTextSize" format="dimension" />
        <!-- 懸浮框邊距離文本的距離 -->
        <attr name="floatBoxPadding" format="dimension" />
    </declare-styleable>

    <declare-styleable name="LiveLineChartView">
        <!-- 是否顯示Y軸 -->
        <attr name="showYAxis" />
        <!-- Y軸顏色 -->
        <attr name="yAxisColor"/>
        <!-- Y軸線寬 -->
        <attr name="yAxisWidth"/>
        <!-- 是否顯示Y軸文字 -->
        <attr name="showYText"/>
        <!-- Y軸文字顏色 -->
        <attr name="yTextColor"/>
        <!-- Y軸文字尺寸 -->
        <attr name="yTextSize"/>
        <!-- Y軸文字位置 -->
        <attr name="yTextAlign"/>
        <!-- 是否顯示Y軸刻度線 -->
        <attr name="showYScaleLine"/>
        <!-- Y軸刻度線顏色 -->
        <attr name="yScaleLineColor"/>
        <!-- Y軸刻度線線寬 -->
        <attr name="yScaleLineWidth" />
        <!-- Y軸刻度線長度 -->
        <attr name="yScaleLineLength" />

        <attr name="limitLineColor" />
        <attr name="limitLineWidth" />
        <attr name="limitLineLength" />
        <attr name="limitLineSpace" />

        <!-- 折線寬度 -->
        <attr name="lineChartWidth"/>
        <!-- 折線顏色 -->
        <attr name="lineChartColor"/>
        <!-- 折線區(qū)域距離左邊的距離 -->
        <attr name="lineChartPaddingStart" />
        <!-- 背景顏色 -->
        <attr name="lineChartBgColor" />
        <!-- 繪制曲線 -->
        <attr name="drawCurve" />

        <attr name="limitLineCount" format="integer" />
        <attr name="pointSpace" format="dimension" />
    </declare-styleable>

歡迎大家點(diǎn)贊評論，多提Issues github.com