%20(2).svg)
项目简介
本项目是基于JavaScript的K线图表组件，通过对某网站K线插件进行二次开发与封装，让其更便于使用和修改。它支持多种画线工具、画图算法，能展示深度图数据及最近成交数据。同时具备普通轮询和Websocket Over Stomp两种连接方式，适用于金融、股票、加密货币等领域的K线图展示。
项目的主要特性和功能
- 支持暗色和亮色两种主题配色切换。
- 支持简体中文、英文、繁体中文三种语言。
- 可配置时间聚合方式，支持多种时间周期。
- 提供多种画线工具，方便用户进行技术分析。
- 支持多种画图算法，满足不同K线图展示需求。
- 能展示深度图数据及最近成交数据。
- 支持普通轮询和Websocket Over Stomp两种数据连接方式。
- 支持动态更新数据和读取历史数据。
- 支持键盘事件和手势操作，提升用户体验。
- 支持移动端设备，适配不同屏幕尺寸。
安装使用步骤
1. 安装
通过npm安装：
bash
$ npm install kline
2. 引入方式
使用标签引入
在HTML页面头部加入以下代码： ```html
```
使用RequireJS引入
```javascript 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 () { // ... }); ```
使用CommonJS引入
javascript
var Kline = require('kline');
使用ES6引入
javascript
import Kline from 'kline';
3. 在页面中加入容器
在HTML页面中加入K线图容器： ```html
```
4. 初始化K线图
轮询（poll）方式
javascript
var kline = new Kline({
element: "#kline_container",
symbol: "BTC",
symbolName: "比特币",
type: "poll", // poll/stomp
url: "./mock.json"
});
kline.draw();
Websocket Over Stomp方式
javascript
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();
5. 配置参数
| 参数名称 | 参数说明 | 默认值 |
|:------------------|:---------------------------------|:-----------------------|
| 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 | ["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 |
| rollspeed | 按键滚动的速度（单位：像素） | 30 |
| showToolbar | 是否显示工具栏 | true |
| showIndic | 是否显示监视器 | true |
| isFullScreen | 是否显示为全屏 | true |
| rotate | 旋转90度的次数 | 0 |
| dealMouseWheelEvent | 是否处理鼠标滚轮事件 | true |
| autoIntervalTime | 是否自动从服务器端获取刷新间隔 | false |
| defaultMainStyle | 默认的主图样式（取值为0：CandleStick，1：CandleStickHLC，2：OHLC） | 0 |
6. 事件回调
| 事件函数 | 说明 |
|:------------------------|:-----------------------------------|
| onResize | 画布尺寸改变时触发 |
| onLangChange | 语言改变时触发 |
| onSymbolChange | 交易品种改变时触发 |
| onThemeChange | 主题改变时触发 |
| onRangeChange | 聚合时间改变时触发 |
7. 示例代码
javascript
var kline = new Kline({
element: "#kline_container",
symbol: "BTC",
symbolName: "比特币",
type: "poll", // poll/stomp
url: "./mock.json",
onResize: function(width, height) {
console.log("chart resized: " + width + " " + height);
}
});
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】