本專案扒了某網站的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 kline 

使用標籤引入, 在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('kline');

• OR ES6

 import Kline from 'kline';

• 在頁面中加入

  <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

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

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

• 響應引數說明:

• lines: K線圖, 依次是: 時間(ms), 開盤價, 最高價, 最低價, 收盤價, 成交量

• depths(可選, 行情側邊欄顯示): 深度圖資料,  asks:一定比例的賣單列表, bids:一定比例的買單列表, 其中每項的值依次是 成交價, 成交量

• trades(可選, 行情側邊欄顯示): 最近成交記錄,  amount: 成交量, price:單價, tid:訂單ID, time:成交時間(ms), type:成交型別 buy/sell