项目地址:GitHub
介绍
StockChart 一款适用于Android的高扩展性、高性能股票图/K线图开发库,支持多图组合,除了使用内置子图还支持定制子图满足复杂的业务需求。
特点
- 内置子图:K线图、时间条图、成交量图、MACD指标图、KDJ指标图
- 内置指标:MA(移动平均线)、EMA(指数移动平均值)、BOLL(布林线)、MACD(指数平滑异同移动平均线)、KDJ(随机指标)
- 支持自定义子图(以StockChart为内核,UI完全自己定制):若内置的子图样式(如K线图)无法满足您的需求或者您需要更多类型的指标图时,您可以通过自定义子图的方式来实现自己的子图。您甚至可以把内置的所有子图都当做你实现自定义子图的参考示例。如果您的项目是一个商业项目,可能更需要此功能来绘制自己需要的UI。这种设计可以避免基于源码修改,满足开闭原则。
效果图


用法
先明白几个概念
- 所有要显示的图(内置的子图与自定义的子图)都是
StockChart的子图。内置的子图:KChart(K线图)、TimeBarChart(时间条图)、VolumeChart(成交量图)、MacdChart(MACD指标图)、KdjChart(KDJ指标图)
- 任何变化(如K线数据增加)都是通过修改配置去更新。全局配置:
StockChartConfig,每个子图也有自己的配置如:KChartConfig、KDJChartConfig。
- 逻辑坐标:原点是左下角,x轴从左到右变大,y轴从下到上变大。是最接近普通人理解股票图的坐标。
- 逻辑坐标的x轴:固定规则,是这个数据集的下标,即从0开始,刻度为1。最小最大值范围是[0, kEntities.size - 1]。
- 逻辑坐标的y轴:由子类各自根据实际情况提供。比如成交量图每个数据对应y轴上的值应该是成交量,比如K线图每个数据对应y轴上的值应该是价格。
- 实际坐标:就是Android View的坐标体系,即最终绘制时View认识的坐标,原点是左上角,x轴从左到右变大,y轴从上到下变大。
基本使用
1. 集成
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.wangyiqian:StockChart:1.1.6'
}
2. 布局文件加入StockChart布局
<com.github.wangyiqian.stockchart.StockChart
android:id="@+id/stock_chart"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
3. 设置StockChart的配置
val stockChartConfig = StockChartConfig()
stock_chart.setConfig(stockChartConfig)
4. 添加子图,将需要的子图的工厂添加给全局配置即可,如以下将添加三个子图:K线图、时间条、MACD指标图
val kChartConfig = KChartConfig()
val kChartFactory = KChartFactory(stockChart = stock_chart, childChartConfig = kChartConfig)
val timeBarConfig = TimeBarConfig()
val timeBarFactory = TimeBarFactory(stockChart = stock_chart, childChartConfig = timeBarConfig)
val macdChartConfig = MacdChartConfig()
val macdChartFactory = MacdChartFactory(stockChart = stock_chart, childChartConfig = macdChartConfig)
stockChartConfig.addChildCharts(kChartFactory, timeBarFactory, macdChartFactory)
5. 将K线数据传给全局配置
Data.loadDayData(this, 0) { kEntities: List<IKEntity> ->
val pageSize = 50
stockChartConfig.setKEntities(
kEntities,
showStartIndex = kEntities.size - pageSize,
showEndIndex = kEntities.size - 1
)
stock_chart.notifyChanged()
}
注意:任何配置的修改都需要调用StockChart的notifyChanged()方法去更新视图展示
使用进阶
详细请参考提供的示例(samples模块)
所有配置
全局配置StockChartConfig
| 字段 | 描述 |
|---|
| kEntities | K线数据 |
| showStartIndex | 初始显示区域的起始坐标 |
| showEndIndex | 初始显示区域的结束坐标 |
| scrollAble | 是否支持滑动 |
| overScrollAble | 是否支持"滑过头回弹"效果 |
| overScrollDistance | "滑过头回弹"最大距离 |
| overScrollOnLoadMoreDistance | "滑过头回弹"过程中触发加载更多需要的距离 |
| scaleAble | 是否支持双指缩放 |
| scrollSmoothly | 是否需要"平滑的"滑动。如果false,滑动时一个下标对应的内容要么全显示,要么不显示。 |
| frictionScrollExceedLimit | 超出滑动限制范围时拖动的"摩擦力" |
| scaleFactorMax | 双指缩放最大缩放比例 |
| scaleFactorMin | 双指缩放最小缩放比例 |
| showHighlightHorizontalLine | 是否支持长按高亮横线 |
| highlightHorizontalLineWidth | 长按高亮横线宽度 |
| highlightHorizontalLineColor | 长按高亮横线颜色 |
| showHighlightVerticalLine | 是否支持长按高亮竖线 |
| highlightVerticalLineWidth | 长按高亮竖线宽度 |
| highlightVerticalLineColor | 长按高亮竖线颜色 |
| riseColor | 涨色值 |
| downColor | 跌色值 |
| backgroundColor | 背景色 |
| gridHorizontalLineCount | 背景网格横线数 |
| gridVerticalLineCount | 背景网格竖线数 |
| gridLineColor | 背景网格线条色 |
| gridLineStrokeWidth | 背景网格线条宽度 |
K线图配置KChartConfig
| 字段 | 描述 |
|---|
| height | 高度 |
| marginTop | 顶部外间距 |
| marginBottom | 底部外间距 |
| onHighlightListener | 长按回调 |
| chartMainDisplayAreaPaddingTop | 主数据显示区域的顶部内间距 |
| chartMainDisplayAreaPaddingBottom | 主数据显示区域的底部内间距 |
| kChartType | K线图类型 |
| highlightLabelLeft | 长按时高亮线左侧标签配置 |
| highlightLabelTop | 长按时高亮线顶部标签配置 |
| highlightLabelRight | 长按时高亮线右侧标签配置 |
| highlightLabelBottom | 长按时高亮线底部标签配置 |
| lineChartColor | 线形图的线条颜色 |
| lineChartStrokeWidth | 线形图的线条宽度 |
| mountainChartColor | 山峰图线条颜色 |
| mountainChartStrokeWidth | 山峰图的线条宽度 |
| mountainChartLinearGradientColors | 山峰图的封闭渐变色 |
| candleChartLineStrokeWidth | 蜡烛图的中间线宽度 |
| hollowChartLineStrokeWidth | 空心蜡烛图线条宽度 |
| barChartLineStrokeWidth | 美国线图(竹节图)线条宽度 |
| costPrice | 成本线价格 |
| costPriceLineColor | 成本线颜色 |
| costPriceLineWidth | 成本线宽度 |
| indexStrokeWidth | 指标线条宽度 |
| barSpaceRatio | 柱子之间的空间占比柱子宽度 |
| index | 需要展示的指标类型 |
| indexColors | 指标线的颜色 |
| leftLabelConfig | 左侧标签配置 |
| rightLabelConfig | 右侧标签配置 |
| showAvgLine | 是否显示分时均线。若需要显示,K线数据需带有分时均线价格。 |
| avgLineColor | 分时均线颜色 |
| avgLineStrokeWidth | 分时均线宽度 |
| yValueMin | y轴范围最小值,在增加或修改K线数据之前指定才有效 |
| yValueMax | y轴范围最大值,在增加或修改K线数据之前指定才有效 |
时间条图配置TimeBarConfig
| 字段 | 描述 |
|---|
| height | 高度 |
| marginTop | 顶部外间距 |
| marginBottom | 底部外间距 |
| onHighlightListener | 长按回调 |
| chartMainDisplayAreaPaddingTop | 主数据显示区域的顶部内间距 |
| chartMainDisplayAreaPaddingBottom | 主数据显示区域的底部内间距 |
| backGroundColor | 背景色 |
| labelTextSize | 标签文本大小 |
| labelTextColor | 标签文本色 |
| highlightLabelTextSize | 长按显示的标签文本大小 |
| highlightLabelTextColor | 长按显示的标签文本色 |
| highlightLabelBgColor | 长按显示的标签背景色 |
| type | 时间条样式 |
成交量图配置VolumeChartConfig
| 字段 | 描述 |
|---|
| height | 高度 |
| marginTop | 顶部外间距 |
| marginBottom | 底部外间距 |
| onHighlightListener | 长按回调 |
| chartMainDisplayAreaPaddingTop | 主数据显示区域的顶部内间距 |
| chartMainDisplayAreaPaddingBottom | 主数据显示区域的底部内间距 |
| highlightLabelLeft | 长按时高亮线左侧标签配置 |
| highlightLabelRight | 长按时高亮线右侧标签配置 |
| barSpaceRatio | 柱子之间的空间占比柱子宽度 |
| volumeChartType | 柱子样式 |
| hollowChartLineStrokeWidth | 柱子空心时的线条宽度 |
MACD指标图配置MacdChartConfig
| 字段 | 描述 |
|---|
| height | 高度 |
| marginTop | 顶部外间距 |
| marginBottom | 底部外间距 |
| onHighlightListener | 长按回调 |
| chartMainDisplayAreaPaddingTop | 主数据显示区域的顶部内间距 |
| chartMainDisplayAreaPaddingBottom | 主数据显示区域的底部内间距 |
| highlightLabelLeft | 长按时高亮线左侧标签配置 |
| highlightLabelRight | 长按时高亮线右侧标签配置 |
| difLineColor | dif线颜色 |
| difLineStrokeWidth | dif线宽度 |
| deaLineColor | dea线颜色 |
| deaLineStrokeWidth | dea线宽度 |
| macdTextColor | macd文字颜色 |
| barSpaceRatio | 柱子之间的空间占比柱子宽度 |
| index | 需要展示的指标配置 |
KDJ指标图配置KdjChartConfig
| 字段 | 描述 |
|---|
| height | 高度 |
| marginTop | 顶部外间距 |
| marginBottom | 底部外间距 |
| onHighlightListener | 长按回调 |
| chartMainDisplayAreaPaddingTop | 主数据显示区域的顶部内间距 |
| chartMainDisplayAreaPaddingBottom | 主数据显示区域的底部内间距 |
| highlightLabelLeft | 长按时高亮线左侧标签配置 |
| highlightLabelRight | 长按时高亮线右侧标签配置 |
| kLineColor | k线颜色 |
| kLineStrokeWidth | k线宽度 |
| dLineColor | d线颜色 |
| dLineStrokeWidth | d线宽度 |
| jLineColor | j线颜色 |
| jLineStrokeWidth | j线宽度 |
| index | 需要展示的指标配置 |
长按时高亮线的标签配置HighlightLabelConfig
| 字段 | 描述 |
|---|
| bgColor | 背景色 |
| bgCorner | 背景圆角 |
| padding | 内间距 |
| textSize | 文字大小 |
| textColor | 文字颜色 |
| textFormat | 显示的内容格式化 |
K线图标签配置LabelConfig
| 字段 | 描述 |
|---|
| count | 标签数 |
| formatter | 显示内容格式化 |
| textSize | 文字大小 |
| textColor | 文字颜色 |
| horizontalMargin | 水平外间距 |
| marginTop | 顶部外间距 |
| marginBottom | 底部外间距 |
如何自定义子图
三步走
- 提供子图的配置类,用于定义子图的各种配置,需要继承
BaseChildChartConfig
- 提供子图的UI类,用于绘制UI细节,需要继承
BaseChildChart
- 提供子图的工厂类,用于实例化子图,需要继承
AbsChildChartFactory
示例
class CustomChartConfig(
height: Int = DEFAULT_CHILD_CHART_HEIGHT,
marginTop: Int = DEFAULT_CHILD_CHART_MARGIN_TOP,
marginBottom: Int = DEFAULT_CHILD_CHART_MARGIN_BOTTOM,
onHighlightListener: OnHighlightListener? = null,
chartMainDisplayAreaPaddingTop: Float = DEFAULT_CHART_MAIN_DISPLAY_AREA_PADDING_TOP,
chartMainDisplayAreaPaddingBottom: Float = DEFAULT_CHART_MAIN_DISPLAY_AREA_PADDING_BOTTOM,
var bigLabel: String? = null
) : BaseChildChartConfig(
height,
marginTop,
marginBottom,
onHighlightListener,
chartMainDisplayAreaPaddingTop,
chartMainDisplayAreaPaddingBottom
)
class CustomChart(
stockChart: IStockChart,
chartConfig: CustomChartConfig
) : BaseChildChart<CustomChartConfig>(stockChart, chartConfig) {
override fun onKEntitiesChanged() {
}
override fun getYValueRange(startIndex: Int, endIndex: Int, result: FloatArray) {
}
override fun preDrawBackground(canvas: Canvas) {
}
override fun drawBackground(canvas: Canvas) {
}
override fun preDrawData(canvas: Canvas) {
}
override fun drawData(canvas: Canvas) {
}
override fun preDrawHighlight(canvas: Canvas) {
}
override fun drawHighlight(canvas: Canvas) {
}
override fun drawAddition(canvas: Canvas) {
}
}
class CustomChartFactory(stockChart: IStockChart, childChartConfig: CustomChartConfig) :
AbsChildChartFactory<CustomChartConfig>(stockChart, childChartConfig) {
override fun createChart() = CustomChart(stockChart, childChartConfig)
}
val customChartConfig = CustomChartConfig()
val customChartFactory = CustomChartFactory(stock_chart, customChartConfig)
stockChartConfig.addChildCharts(customChartFactory)
stock_chart.notifyChanged()
- 详细请参考samples模块,里面有自定义子图的示例。
项目地址:GitHub