V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liihuu
V2EX  ›  分享创造

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

  •  1
     
  •   liihuu ·
    liihuu · 2021-03-25 21:19:13 +08:00 · 2743 次点击
    这是一个创建于 1363 天前的主题,其中的信息可能已经有所发展或是发生改变。

    先上链接,希望大家能给个 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 }
    ])
    

    截图

    3 条回复    2021-04-26 19:47:56 +08:00
    phpuser
        1
    phpuser  
       2021-03-26 09:32:50 +08:00
    挺不错的。

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

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

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

    图表展示(WebSocket)是一部分,如果能结合交易操作和订单管理就更好了。
    liihuu
        2
    liihuu  
    OP
       2021-03-26 17:07:49 +08:00
    @phpuser TradingView,得承认它是业界功能最强,但是包体积一直是我不太满意的地方。trading-vue-js,也是一个不错的金融图表,但是好像是基于 vue 的,不知道能否和其它前端框架搭配使用。KLineChart,目前的确是还需要完善,欠缺的功能也会慢慢迭代上去。
    liihuu
        3
    liihuu  
    OP
       2021-04-26 19:47:56 +08:00
    新的版本添加了注解功能,有兴趣可以试试。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5417 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 05:52 · PVG 13:52 · LAX 21:52 · JFK 00:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.