Android通過Canvas手繪一個折線圖

簡述

Android繪製圖表，有強大的 MPAndroidChart，適合圖表功能需求大的應用。至於如下圖一個簡單的展示作用的折線圖還是可以自己封裝手繪一個的

這個就是要實現的最終效果

定義的Style

  <declare-styleable name="BrokenLineView">
        <attr name="isShowXBorderLine" format="boolean"/>
        <attr name="isShowYBorderLine" format="boolean"/>
        <attr name="XBorderLineColor" format="color"/>
        <attr name="YBorderLineColor" format="color"/>
        <attr name="XBorderLineWidth" format="dimension"/>
        <attr name="YBorderLineWidth" format="dimension"/>
        <attr name="XTextColor" format="color"/>
        <attr name="XTextSize" format="dimension"/>
        <attr name="XTextPadding" format="dimension"/>
        <attr name="YTextColor" format="color"/>
        <attr name="YTextSize" format="dimension"/>
        <attr name="YTextPadding" format="dimension"/>
        <attr name="isShowSolid" format="boolean"/>
        <attr name="solidColor" format="color"/>
        <attr name="circleRadius" format="dimension"/>
        <attr name="circleColor" format="color"/>
        <attr name="isCircleSolid" format="boolean"/>
        <attr name="isShowCircle" format="boolean"/>
        <attr name="BrokenLineWidth" format="dimension"/>
        <attr name="BrokenLineColor" format="color"/>
        <attr name="xUnitValue" format="integer"/>
        <attr name="yUnitValue" format="integer"/>
    </declare-styleable>

name	類型	描述
isShowXBorderLine	boolean	是否顯示X軸方向的分割線
isShowYBorderLine	boolean	是否顯示Y軸方向的分割線
XBorderLineColor	color	X軸方向分割線顯示顏色
YBorderLineColor	color	Y軸方向分割線顯示顏色
XBorderLineWidth	dimension	X軸方向分割線寬
XBorderLineWidth	dimension	Y軸方向分割線寬
XTextColor	color	X軸方向標識符字體顏色
XTextSize	dimension	X軸方向標識符字體大小
XTextPadding	dimension	X軸方向標識符字體與X軸間距
YTextColor	color	Y軸方向標識符字體顏色
YTextSize	dimension	Y軸方向標識符字體大小
YTextPadding	dimension	Y軸方向標識符字體與Y軸間距
isShowSolid	boolean	是否繪製折線和X軸之間的透明背景
solidColor	color	折線和X軸之間的透明背景顏色
circleRadius	dimension	折線上繪製圓點的半徑
circleColor	color	折線上繪製圓點的顏色
isCircleSolid	boolean	折線上繪製圓點是實心還是空心
isShowCircle	boolean	是否繪製折線上的圓點
circleColor	color	折線上繪製圓點的顏色
BrokenLineWidth	dimension	折線線寬度
BrokenLineColor	color	折線線顏色
xUnitValue	integer	X軸一個標識的單位量
yUnitValue	integer	Y軸一個標識的單位量

對應的方法

• setXUnitValue(value:Int)

設置X軸一個標識符單位量

• setYUnitValue(value:Int)

設置Y軸一個標識符單位量

• setXTextUnits(textUnits:List)

設置X軸方向的標識符，包括原點

• setYTextUnits(textUnits:List)

設置Y軸方向的標識符，不包括原點

• setDateList(dataList:List)

設置折線描點

• startDraw()

開始繪製

使用

• 依賴

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

 dependencies {
    compile 'com.github.Goach:ChartSimple:1.0.0'
}

• 佈局

<com.goach.widget.BrokenLineView
        android:id="@+id/brokenView"
        android:layout_width="300dp"
        android:layout_height="300dp"/>

同時也可以結合上面Style使用

• 使用默認配置

brokenView.setDateList(mutableListOf(Point(1,2999), Point(2,1555), Point(3,10000)
                        , Point(4,6000), Point(5,5098), Point(6,1890)))
                .startDraw()

• 使用自定義的配置

brokenView.setXUnitValue(1)
                .setYUnitValue(2000)
                .setXTextUnits(mutableListOf("0","1","2","3","4","5","6"))
                .setYTextUnits(mutableListOf("2000元","4000元","6000元","8000元","10000元"))
                .setDateList(mutableListOf(Point(1,2999), Point(2,1555), Point(3,10000)
                        , Point(4,6000), Point(5,5098), Point(6,1890)))
                .startDraw()

詳細路徑ChartSimple-Github，ChartSimple-CSDN