kline 专业金融K线绘制库

本项目扒了某网站的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

参数名称参数说明默认值
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
stompClientstomp 连接对象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": {
    "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

 

转载地址: https://www.npmjs.com/package/kline

参考地址: https://cn.tradingview.com

要根据曲线绘制 K 线图,需要将曲线图的数据转换成 K 线图的数据格式。下面是一个简单的示例,假设曲线图的数据为一个数组 `$data`,其中每个元素表示某个时刻的价格,例如: ```php $data = array(10, 15, 20, 25, 20, 15, 10); ``` 为了将曲线图转换成 K 线图,我们需要对每个时间段计算出它的开盘价、收盘价、最高价和最低价。例如,如果我们将时间段定义为每两个相邻元素之间的时间间隔,那么上面的数据可以分为 3 个时间段,每个时间段包含两个元素: 时间段 1:10, 15 时间段 2:15, 20, 25 时间段 3:25, 20, 15, 10 对于每个时间段,我们可以计算出它的开盘价、收盘价、最高价和最低价: 时间段 1:开盘价为 10,收盘价为 15,最高价为 15,最低价为 10 时间段 2:开盘价为 15,收盘价为 25,最高价为 25,最低价为 15 时间段 3:开盘价为 25,收盘价为 10,最高价为 25,最低价为 10 这些数据就可以用来绘制 K 线图了。下面是一个简单的示例代码,使用 pChart 绘制上面的 K 线图: ```php // 引入 pChart require_once('pChart/class/pData.class.php'); require_once('pChart/class/pDraw.class.php'); require_once('pChart/class/pImage.class.php'); // 计算 K 线图数据 $data = array(10, 15, 20, 25, 20, 15, 10); $kdata = array(); for ($i = 0; $i < count($data); $i += 2) { $open = $data[$i]; $close = $data[$i + 1]; $high = max($data[$i], $data[$i + 1]); $low = min($data[$i], $data[$i + 1]); $kdata[] = array($open, $close, $low, $high); } // 创建数据对象 $pdata = new pData(); $pdata->loadPalette('pChart/palettes/strong.color', TRUE); // 添加数据 foreach ($kdata as $k) { $pdata->addPoints(array($k[0], $k[1], $k[2], $k[3]), "KLine"); } // 设置 X 轴标签 $labels = array(); for ($i = 0; $i < count($data); $i += 2) { $labels[] = "T" . ($i / 2 + 1); } $pdata->addPoints($labels, "Labels"); // 创建图像对象 $image = new pImage(800, 400, $pdata); // 设置背景色 $image->Antialias = TRUE; $image->drawRectangle(0, 0, 799, 399, array("R" => 255, "G" => 255, "B" => 255)); // 绘制 K 线图 $image->setFontProperties(array("FontName" => "pChart/fonts/verdana.ttf", "FontSize" => 8)); $image->drawBarChart(array( "DisplayValues" => FALSE, "DisplayColor" => DISPLAY_AUTO, "Rounded" => TRUE, "Surrounding" => 30 )); // 输出图像 header('Content-Type: image/png'); $image->Render(NULL); ``` 以上代码将绘制一个包含开盘价、收盘价、最高价和最低价的 K 线图,并使用 "T1" 到 "T3" 作为 X 轴标签。你可以根据自己的需求修改数据和参数。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值