美文网首页
Android通过Canvas手绘一个折线图

Android通过Canvas手绘一个折线图

作者: Goach | 来源:发表于2018-04-05 11:22 被阅读865次

简述

Android绘制图表,有强大的 MPAndroidChart,适合图表功能需求大的应用。至于如下图一个简单的展示作用的折线图还是可以自己封装手绘一个的

折线图.jpg

这个就是要实现的最终效果

定义的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<String>)

设置X轴方向的标识符,包括原点

  • setYTextUnits(textUnits:List<String>)

设置Y轴方向的标识符,不包括原点

  • setDateList(dataList:List<Point>)

设置折线描点

  • 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

相关文章

网友评论

      本文标题:Android通过Canvas手绘一个折线图

      本文链接:https://www.haomeiwen.com/subject/izhicftx.html