Kline

本项目扒了某网站的K线插件做了一些封装和二次开发,使其更加便于使用和修改,方便后来的开发者. 修改主要涉及以下几个点:

• 使用 webpack 打包 css/images/html
• 使用 ES6 + Babel 对原有代码进行了拆分和重构
• 删除了一些不必要的逻辑
• 把源码中可配置的部分抽出来
• 添加了对 websocket(stomp over websocket) 连接方式的支持
• 增加对外接口及事件回调

Features

✅ 支持两种主题配色切换 
✅ 支持简体中文,英文,繁体中文三种语言 
✅ 可配置的时间聚合方式
✅ 支持多种画线工具
✅ 支持多种画图算法
✅ 支持深度图数据及最近成交数据展示
✅ 支持普通轮询和Websocket Over Stomp两种连接方式

ScreenShot!

Requirements

• jquery
• jquery.mousewheel
• sockjs (仅stomp方式需要)
• stomp (仅stomp方式需要)

Install & Load

安装

$ npm install u-kline-o 

• 使用标签引入, 在HTML页面头部加入

    <script src="/lib/sockjs.js"></script>
    <script src="/lib/stomp.js"></script>
    <script src="/lib/jquery.js"></script>
    <script src="/lib/jquery.mousewheel.js"></script>
    <script src="/dist/kline.js"></script>

• OR RequireJS

    require.config({
        paths: {
            "jquery": "../lib/jquery",
            "jquery.mousewheel": "../lib/jquery.mousewheel",
            "sockjs": "../lib/sockjs",
            "stomp": "../lib/stomp",
            "kline": "../js/kline"
        },
        shim: {
            "jquery.mousewheel": {
                deps: ["jquery"]
            },
            "kline": {
                deps: ["jquery.mousewheel", "sockjs", "stomp"]
            }
        }
    });

    require(['kline'], function () {
       // ...
    });

• OR CommonJS

    var Kline = require('u-kline-o');

• OR ES6

    import Kline from 'u-kline-o';

• 在页面中加入

  <div id="kline_container"></div>

Examples

• Poll(轮询)

    var kline = new Kline({
        element: "#kline_container",
        symbol: "BTC",
        symbolName: "比特币",
        type: "poll", // poll/stomp
        url: "http://127.0.0.1:8080/mock.json"
    });
    kline.draw();

• Stomp Over Websocket

   var kline = new Kline({
        element: "#kline_container",
        symbol: "BTC",
        symbolName: "比特币",
        type: "stomp", // poll/stomp
        url: 'http://127.0.0.1:8088/socket',
        subscribePath: "/kline/subscribe",
        sendPath: "/kline/send"       
    });
    kline.draw();

Support Options

| 参数名称   | 参数说明   |   默认值 |:---------|:-----------------|:------------ |element | 容器元素选择器 | #kline_container |width | 宽度 (px) | 1200 |height   | 高度度 (px)      | 650 |theme   | 主题 dark(暗色)/light(亮色) | dark |language | 语言 zh-cn(简体中文)/en-us(英文)/zh-tw(繁体中文) | zh-cn |ranges | 聚合选项 1w/1d/12h/6h/4h/2h/1h/30m/15m/5m/3m/1m/line (w:周, d:天, h:小时, m:分钟, line:分时数据) | ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"] |symbol | 交易代号 | |symbolName | 交易名称 | |type | 连接类型 stomp/poll(轮询) | poll |url | 请求地址 | |limit | 分页大小 | 1000 |intervalTime | 请求间隔时间(ms) | 3000 |subscribePath | 订阅地址 (仅stomp方式需要) | |sendPath   | 发送地址 (仅stomp方式需要) | |debug   | 是否开启调试模式 true/false | true |showTrade   | 是否显示行情侧边栏 true/false | true |enableSockjs   | 是否开启sockjs支持 true/false | true |reverseColor   | 是否反色, 默认绿涨红跌 true/false | false |stompClient   | stomp 连接对象 | null |setIntervalCallback   | 设置poll计时器回调 | null

Methods

• draw()

  画K线图

kline.draw();

• resize(int width, int height)

  设置画布大小

kline.resize(1200, 550);

• setSymbol(string symbol, string symbolName)

  设置交易品种

kline.setSymbol('usd/btc', 'USD/BTC');

• setTheme(string style)

  设置主题

kline.setTheme('dark');  // dark/light

• setLanguage(string lang)

  设置语言

kline.setLanguage('en-us');  // en-us/zh-ch/zh-tw

• setShowTrade: function (isShow)

  设置展示是否展示交易模块

kline.setShowTrade(false);  // true/false

• toggleTrade: function ()

  切换展示是否展示交易模块

kline.toggleTrade(); 

• setIntervalTime: function (intervalTime)

  设置请求间隔时间(ms)

kline.setIntervalTime(5000); 

• connect: function ()

  建立socket连接

kline.connect(); 

• disconnect: function ()

  断开socket连接

kline.disconnect(); 

• pause: function ()

  暂停请求数据

kline.pause(); 

• resend: function ()

  重新请求数据

kline.resend(); 

Events

| 事件函数 |   说明 |:-----------------------|:------------ | onResize: function(width, height) | 画布尺寸改变时触发 | onLangChange: function(lang) | 语言改变时触发 | onSymbolChange: function(symbol, symbolName) | 交易品种改变时触发 | onThemeChange: function(theme) | 主题改变时触发 | onRangeChange: function(range) | 聚合时间改变时触发

Example

    var kline = new Kline({
        element: "#kline_container",
        symbol: "BTC",
        symbolName: "比特币",
        type: "poll", // poll/stomp
        url: "http://127.0.0.1:8080/mock.json",
        onResize: function(width, height) {
            console.log("chart resized: " + width + " " + height);
        }
    });

Response

Example

{
  "success": true,
  "data":[
      [
        1.50790476E12,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        66.9905449283
      ]
    ]
}

• 响应参数说明:

• lines: K线图, 依次是: 时间(ms), 开盘价, 最高价, 最低价, 收盘价, 成交量