Apache License 2.0

技术解读

以下内容由 GitRead 中文社区 编辑团队基于项目 README 与官方资料整理, 结合中文开发者的常见使用场景补充技术选型建议。具体以项目官方文档为准。

深度技术分析:StockChart - 高扩展性的Android股票图/K线图开发库

项目背景与痛点

wangyiqian/StockChart 是一个开源的高性能股票图开发库,它专注于 Android 平台上的图表绘制,其目标是为开发者提供一款易于扩展和定制的高效开发库,来应对复杂多变的金融市场数据可视化需求。在金融服务应用开发中,K线图、成交量图等金融图表的实时展示至关重要,但市面上却鲜有合适的高效图库能够满足所有特定需求。StockChart 的出现,就是为了填补这一空白。

核心技术揭秘

架构分析

StockChart 的架构设计精巧,便于开发者进行多角度扩展。其核心组件由多个子图模块构成,每个子图可以在统一框架下单独或组合使用,满足不同业务的多样需求。同时,内置子图的存在意味着开发者可以直接使用,而定制子图则为特殊需求留出了充分的扩展空间。

graph TD A[用户请求] --> B{"参数校验"} B -->|"通过"| C[执行业务] C --> D[子图选择] D -->|"内置子图"| E[内置实例化] D -->|"定制子图"| F[自定义配置] E --> G[返回图表] F --> G[返回图表] B -->|"失败"| H[返回错误]

在 StockChart 中,图表绘制的任务分为多个步骤:

  1. 用户请求:开发者发起集成图表的请求。
  2. 参数校验:库内部进行必要的参数校验,确保使用正确。
  3. 执行业务:校验通过后,系统根据配置选择内置或定制的子图。
  4. 子图选择:决定使用内置还是定制子图,内置子图可以直接实例化,而定制子图需经过自定义配置。
  5. 返回图表:最终将绘制好的图表返回给用户。

核心算法与技术栈

技术栈中采用了一些巧妙的设计模式,如工厂模式和单例模式,以实现模块化的配置和确保资源的高效利用。此外,StockChart 通过预编译技术和缓存策略大幅优化了渲染性能,即使在大量市场数据的高并发场景下仍然能够保持流畅性。

功能亮点与差异

与市面上其他的金融图表库相比,StockChart 的亮点在于其对“灵活扩展”与“高性能”的平衡。内置渲染引擎不仅能适应广泛的使用场景,而且支持开发者通过接口进行定制化扩展,进一步提升了其在复杂业务场景下的可用性。相较于竞品它的杀手锏主要在于以下几点:

  • 灵活性:提供多种子图组件易于组装和定制。
  • 高扩展性:内置框架允许以极低的成本快速开发定制化子图。
  • 高性能:通过高级算法和缓存机制,保持在多线程高数据量下的渲染流畅。

应用场景与落地建议

StockChart 适用于任何需要股票图绘制的金融类应用,尤其适用于需要用到复杂图表组合、性能要求较高的场景。在生产环境中的使用需注意以下几点:

  • 性能优化:考虑数据量与性能之间的平衡,大规模市场数据建议采用内存缓存和懒加载技术。
  • 需求匹配:文档和社区支持相对完善,但在正式集成前需要对库支持的功能进行筛选,确保满足具体需求。
  • 灵活定制:对于现有内置子图不支持的功能,通过开发自定义子图可以灵活解决。

综合评价

StockChart 的诞生解决了金融应用开发者在集成高性能、高扩展性股票图表绘制时遇到的诸多不便。它凭借高效的设计框架与开放的扩展接口,在复杂市场环境下的多种图表展示需求中脱颖而出,表现出了旺盛的生命力和潜力。

虽然已提供大量内置组件,但在某些特定制场景下仍然存在扩展的需求空白,不过库本身已经显示出很强的灵活性和自我进化潜力。总体来说,StockChart 是一个成熟且充满潜力的开发库,值得进一步探索和使用。

简要分析

热度分
336
价值分
156
活跃状态
活跃

语言占比

Kotlin

Release

贡献者

README

介绍

StockChart 一款适用于Android的高扩展性、高性能股票图/K线图开发库,支持多图组合,除了使用内置子图还支持定制子图满足复杂的业务需求。

特点

  • 内置子图:K线图、时间条图、成交量图、MACD指标图、KDJ指标图
  • 内置指标:MA(移动平均线)、EMA(指数移动平均值)、BOLL(布林线)、MACD(指数平滑异同移动平均线)、KDJ(随机指标)、RSI(相对强弱指数)
  • 支持自定义子图(以StockChart为内核,UI完全自己定制) :若内置的子图样式(如K线图)无法满足您的需求或者您需要更多类型的指标图时,您可以通过自定义子图的方式来实现自己的子图。您甚至可以把内置的所有子图都当做你实现自定义子图的参考示例。如果您的项目是一个商业项目,可能更需要此功能来绘制自己需要的UI。** 这种设计可以避免基于源码修改,满足开闭原则**。

效果图

1、示例截图:

2、gif演示:

3、自定义子图实现案例:

(若图片未显示,可能需要科学上网。)

用法

先明白几个概念

  • 所有要显示的图(内置的子图与自定义的子图)都是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.16'
}

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指标图

// K线图的配置与工厂
val kChartConfig = KChartConfig()
val kChartFactory = KChartFactory(stockChart = stock_chart, childChartConfig = kChartConfig)

// 时间条图的配置与工厂
val timeBarConfig = TimeBarConfig()
val timeBarFactory = TimeBarFactory(stockChart = stock_chart, childChartConfig = timeBarConfig)

// MACD指标图的配置与工厂
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> ->

    // 初始显示最后50条数据
    val pageSize = 50

    // 设置加载到的数据
    stockChartConfig.setKEntities(
        kEntities,
        showStartIndex = kEntities.size - pageSize,
        showEndIndex = kEntities.size - 1
    )

    // 通知更新K线图
    stock_chart.notifyChanged()
}

注意:任何配置的修改都需要调用StockChart的notifyChanged()方法去更新视图展示

使用进阶

详细请参考提供的示例(samples模块)

所有配置

全局配置StockChartConfig

字段 描述
kEntities K线数据
showStartIndex 初始显示区域的起始坐标
showEndIndex 初始显示区域的结束坐标
scrollAble 是否支持滑动
overScrollAble 是否支持"滑过头回弹"效果
overScrollDistance "滑过头回弹"最大距离
overScrollOnLoadMoreDistance "滑过头回弹"过程中触发加载更多需要的距离
scaleAble 是否支持双指缩放
scrollSmoothly 是否需要"平滑的"滑动。如果false,滑动时一个下标对应的内容要么全显示,要么不显示。
frictionScrollExceedLimit 超出滑动限制范围时拖动的"摩擦力"
scaleFactorMax 双指缩放最大缩放比例
scaleFactorMin 双指缩放最小缩放比例
showHighlightHorizontalLine 是否支持长按高亮横线
highlightHorizontalLineWidth 长按高亮横线宽度
highlightHorizontalLineColor 长按高亮横线颜色
highlightHorizontalLinePathEffect 长按高亮横线虚线
showHighlightVerticalLine 是否支持长按高亮竖线
highlightVerticalLineWidth 长按高亮竖线宽度
highlightVerticalLineColor 长按高亮竖线颜色
highlightVerticalLinePathEffect 长按高亮竖线虚线
riseColor 涨色值
downColor 跌色值
backgroundColor 背景色
gridHorizontalLineCount 背景网格横线数
gridVerticalLineCount 背景网格竖线数
gridLineColor 背景网格线条色
gridLineStrokeWidth 背景网格线条宽度
chartMainDisplayAreaPaddingLeft 主数据显示区域的左内间距,主数据一般指数据线
chartMainDisplayAreaPaddingRight 主数据显示区域的右内间距,主数据一般指数据线
onGestureListener 手势监听

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 需要展示的指标类型,目前只有MA、EMA、BOLL
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 需要展示的指标配置

RSI指标图配置RsiChartConfig

字段 描述
height 高度
marginTop 顶部外间距
marginBottom 底部外间距
onHighlightListener 长按回调
chartMainDisplayAreaPaddingTop 主数据显示区域的顶部内间距
chartMainDisplayAreaPaddingBottom 主数据显示区域的底部内间距
highlightLabelLeft 长按时高亮线左侧标签配置
highlightLabelRight 长按时高亮线右侧标签配置
indexColors 指标线的颜色
lineStrokeWidth 指标线宽度
dashLineColor 虚线颜色
index 需要展示的指标配置
indexStarterBgColor 指标头文字背景色
indexStarterBgPaddingHorizontal 指标头文字背景水平内间距
indexStarterRightIcon 指标头文字右侧图标
indexStarterClickListener 指标头文字点击事件

长按时高亮线的标签配置HighlightLabelConfig

字段 描述
bgColor 背景色
bgCorner 背景圆角
padding 内间距
textSize 文字大小
textColor 文字颜色
textFormat 显示的内容格式化

K线图标签配置LabelConfig

字段 描述
count 标签数
formatter 显示内容格式化
textSize 文字大小
textColor 文字颜色
horizontalMargin 水平外间距
marginTop 顶部外间距
marginBottom 底部外间距

如何自定义子图

三步走

  1. 提供子图的配置类,用于定义子图的各种配置,需要继承BaseChildChartConfig
  2. 提供子图的UI类,用于绘制UI细节,需要继承BaseChildChart
  3. 提供子图的工厂类,用于实例化子图,需要继承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() {
        // 如果需要的话,在这里处理K先数据变化后要做的事  
    }

    override fun getYValueRange(startIndex: Int, endIndex: Int, result: FloatArray) {
        // 提供指定下标范围内[startIndex ~ endIndex],y轴逻辑坐标的范围值  
    }

    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)
// 更新UI
stock_chart.notifyChanged()
  • 详细请参考samples模块,里面有自定义子图的示例。

示例APK下载

stock_chart_apk

使用手机浏览器扫码下载安装,如需下载到本地请点击下载

反馈

感觉好用就点个Star呗~感激万分。 任何问题欢迎在Issues区提问,或者有更多需求请联系我。 我的邮箱:[email protected]

请作者喝杯咖啡呗

您的支持是我最大的动力! donate.jpg

Licenses

Copyright 2021 WangYiqian

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.

评论

暂无评论