静态波形、动态实时波形绘制
- 添加gradle依赖（version=
）
//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:$version'
} - 布局文件中声明（更多属性说明详见 #自定义属性说明）
//静态波形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"/>
//动态实时波形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:xLimitLineCount="0"
app:yLimitLineCount="3" />
- Api说明
class LineChartView {
......
/** 设置限制线 */
fun setLimitArray(limitArray: List<Float>)
/**
* 设置是否绘制曲线
* @see R.attr.drawCurve
* */
fun setDrawCurve(drawCurve: Boolean)
/**
* 设置是否显示折线点
* @see R.attr.showLineChartPoint
* */
fun setLineChartPoint(show: Boolean)
/**
* 设置显示折线动画
* @see R.attr.showLineChartAnim
* */
fun showLineChartAnim()
/**
* 设置显示指定折线点信息list
* 设置后showLineChartPoint和showPointFloatBox属性失效，设置null后恢复
*
* */
fun setShowPoints(showPointList: List<ShowPointInfo>?)
/**
* 设置折线点绘制开始和结束的位置
* @see R.attr.pointXStart = startDp
* @see R.attr.pointXEnd = endDp
*
* */
fun setPointXInit(startDp: Int, endDp: Int)
/**
* 设置折线数据
*
* @param pointList 点的集合
* @param xAxisList X轴数据集合
* @param yAxisList Y轴数据集合
* @param pointSpace 点的间距
*
* */
@JvmOverloads
fun setData(pointList: List<PointInfo>, xAxisList: List<AxisInfo>? = null, yAxisList: List<AxisInfo>, pointSpace: Float = 0f)
......
}
class LiveLineChartView {
......
/** 往当前屏幕添加折线点 */
fun addPoint(point: Float)
/** 清空当前屏幕所有的折线点 */
fun reset()
/**
* 设置是否绘制曲线
* @see R.attr.drawCurve
* */
fun setDrawCurve(drawCurve: Boolean)
/**
* 设置折线点间距，距离越大，折线移动速度越快，反之越小，单位：px
* @see R.attr.pointSpace
* */
fun setPointSpace(pointSpace: Float)
/**
* 设置幅值计算模式
* @param amplitudeMode: AmplitudeMode
* @see AmplitudeMode
*
* */
fun setAmplitudeMode(amplitudeMode: AmplitudeMode)
/**
* 设置自动缩放Y轴幅值点数，默认当前屏幕绘制点数，amplitudeMode != AmplitudeMode.FIXED时生效
* @param screenPointMultiple: 绘制当前屏幕点数的倍数
* @see screenMaxPoints
* */
fun setAutoAmplitudePoints(screenPointMultiple: Float)
/**
* 设置自动缩放Y轴幅值阀值因子，amplitudeMode != AmplitudeMode.FIXED时生效
* @param factor: 控制自动缩放阀值，取值范围（0f until 1f），值越大，缩放阀值越小
* @see screenMaxPoints
* */
fun setAutoAmplitudeFactor(factor: Float) {
require(factor >= 0f && factor < 1f)
autoAmplitudeFactor = factor
}
/** 设置x轴y轴限定线条数 */
fun setLimitLineCount(xLimitLineCount: Int, yLimitLineCount: Int)
/**
* 设置折线数据
*
* @param yAxisList Y轴数据集合
* @param amplitudeMode 幅值计算模式，默认AmplitudeMode.FIXED
* @see AmplitudeMode
* @param textConverter 文本转换
*
* */
@JvmOverloads
fun setData(
yAxisList: List<AxisInfo>,
amplitudeMode: AmplitudeMode = AmplitudeMode.FIXED,
textConverter: (Float) -> String = this.textConverter
)
......
}<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" />
<!-- 折线区域距离上边的距离 -->
<attr name="lineChartPaddingTop" format="dimension" />
<!-- 折线区域距离下边的距离 -->
<attr name="lineChartPaddingBottom" format="dimension" />
<!-- 折线区域距离左边的距离 -->
<attr name="lineChartPaddingStart" />
<!-- 背景颜色 -->
<attr name="lineChartBgColor" />
<!-- 绘制曲线 -->
<attr name="drawCurve" />
<!-- 绘制动画折线 -->
<attr name="showLineChartAnim" format="boolean" />
<!-- 是否显示折线点 -->
<attr name="showLineChartPoint" format="boolean" />
<!-- 折线点半径 -->
<attr name="pointRadius" format="dimension" />
<!-- 折线点颜色 -->
<attr name="pointColor" format="reference|color" />
<!-- 折线点描边宽 -->
<attr name="pointStrokeWidth" format="dimension" />
<!-- 折线点描边颜色 -->
<attr name="pointStrokeColor" format="reference|color" />
<!-- 折线点选中半径 -->
<attr name="pointSelectedRadius" format="dimension" />
<!-- 折线点选中颜色 -->
<attr name="pointSelectedColor" format="reference|color" />
<!-- 折线点选中描边宽 -->
<attr name="pointSelectedStrokeWidth" format="dimension" />
<!-- 折线点选中描边颜色 -->
<attr name="pointSelectedStrokeColor" format="reference|color" />
<!-- 折线点选中外描边宽度 -->
<attr name="pointSelectedOutStrokeWidth" format="dimension" />
<!-- 折线点选中外描边颜色 -->
<attr name="pointSelectedOutStrokeColor" format="reference|color" />
<!-- 折线点开始绘制的位置 -->
<attr name="pointXStart" format="dimension" />
<!-- 折线点结束绘制的位置 -->
<attr name="pointXEnd" format="dimension" />
<!-- 是否显示折线点悬浮框 -->
<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"/>
<!-- 折线区域距离左边的距离 -->
<attr name="lineChartPaddingStart" />
<!-- 背景颜色 -->
<attr name="lineChartBgColor" />
<!-- 绘制曲线 -->
<attr name="drawCurve" />
<attr name="xLimitLineCount" format="integer" />
<attr name="yLimitLineCount" format="integer" />
<attr name="pointSpace" format="dimension" />
<!-- 幅值计算模式 -->
<attr name="amplitudeMode" format="enum" >
<!-- 固定模式 -->
<enum name="fixed" value="0" />
<!-- 自动模式：实时计算最大幅值，最小幅值=最大幅值取反 -->
<enum name="maxNegate" value="1" />
<!-- 自动模式：实时计算最大、最小幅值 -->
<enum name="realtime" value="2" />
</attr>
</declare-styleable>Copyright 2022 zhzc0x
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.