Home

Awesome

Kline npm version

<a href="http://www.wtfpl.net/"><img src="http://www.wtfpl.net/wp-content/uploads/2012/12/wtfpl-badge-4.png" width="80" height="15" alt="WTFPL" /></a>

NPM

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

Features

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

ScreenShot!

Requirements

Install & Load

安装

$ npm install kline 

    <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>

    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 () {
       // ...
    });

    var Kline = require('kline');

    import Kline from 'kline';

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

Examples

    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();

   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/falsetrue
showTrade  是否显示行情侧边栏 true/falsetrue
enableSockjs  是否开启sockjs支持 true/falsetrue
reverseColor  是否反色, 默认绿涨红跌 true/falsefalse
stompClient  stomp 连接对象null

Methods

kline.draw();

kline.resize(1200, 550);

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

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

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

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

kline.toggleTrade(); 

kline.setIntervalTime(5000); 

kline.connect(); 

kline.disconnect(); 

kline.pause(); 

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": {
    "lines": [
      [
        1.50790476E12,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        66.9905449283
      ]
    ],
    "trades": [
      {
        "amount": 0.02,
        "price": 5798.79,
        "tid": 373015085,
        "time": 1508136949000,
        "type": "buy"
      }
    ],
    "depths": {
      "asks": [
        [
          500654.27,
          0.5
        ]
      ],
      "bids": [
        [
          5798.79,
          0.013
        ]
      ]
    }
  }
}