可高度自定义的轻量级金融图表库--KLineChart

[liihuu]

先上链接，希望大家能给个 star
https://github.com/liihuu/KLineChart

介绍

KLineChart，可高度自定义的轻量级金融图表，支持移动端。

功能集

• 支持样式修改(包括各种文字和线，主图类型，坐标轴类型及位置等等)。
• 支持设置价格和数量精度。
• 支持时区设置。
• 支持缩放比例设置。
• 支持禁止滚动和缩放。
• 支持分段加载历史数据和实时更新。
• 技术指标
  • 内置几十种技术指标。
  • 支持主图设置多个技术指标类型。
  • 支持单独窗口展示(理论上可以创建无数个窗口)。
  • 支持为窗口设置技术指标类型。
  • 支持为单个技术指标设置精度、样式和计算参数。
  • 支持自定义且能够自行绘制。
• 图形标记
  • 内置多种图形。
  • 支持根据鼠标动作去一步步的完成绘制。
  • 支持一步创建一个完整的图形。
  • 支持单独设置样式。
  • 支持自定义。
• 支持图表动作监听。
• 支持图表生成图片导出。

使用

// 引入
import { init } from 'klinecharts'

// 初始化图表
const chart = init(`${domId}`)

// 为图表添加数据
chart.applyNewData([
{ close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
{ close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.20, timestamp: 1587660060000, volume: 194 },
{ close: 4977.93, high: 4977.93, low: 4974.20, open: 4976.53, timestamp: 1587660120000, volume: 197 },
{ close: 4966.77, high: 4968.53, low: 4962.20, open: 4963.88, timestamp: 1587660180000, volume: 28 },
{ close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
{ close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
{ close: 4968.93, high: 4972.70, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
{ close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
{ close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
{ close: 4985.09, high: 4988.62, low: 4980.30, open: 4986.72, timestamp: 1587660540000, volume: 76 }
])

截图

[phpuser]

挺不错的。

试了一下似乎修改指标参数没有生效(MA,EMA)，目前还没有高度上下缩放的功能。

图表方面 TradingView 目前真是看不到什么对手（交易平台来说 ctrader 的也挺不错的）。

之前在 github 上找到了一个 trading-vue-js,现在在用这个。

图表展示(WebSocket)是一部分，如果能结合交易操作和订单管理就更好了。

[liihuu]

@phpuser TradingView，得承认它是业界功能最强，但是包体积一直是我不太满意的地方。trading-vue-js，也是一个不错的金融图表，但是好像是基于 vue 的，不知道能否和其它前端框架搭配使用。KLineChart，目前的确是还需要完善，欠缺的功能也会慢慢迭代上去。

[liihuu]

新的版本添加了注解功能，有兴趣可以试试。