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