wyrover / react-kline

基于react的k线图组件

react-kline

基于React的K线图组件

演示地址

• Demo

安装和使用

安装

$ npm install react-kline

• 使用

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ReactKline from 'react-kline';

    class App extends React.Component {

        onRequestData(param,callback){
            let data={};
            //请求数据
            //...
            callback(data);
        }

        render() {
            return (
                <ReactKline
                    width={600}
                    height={400}
                    ranges={["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"]}
                    symbol={"BTC"}
                    symbolName={"BTC/USD"}
                    intervalTime={5000}
                    depthWidth={50}
                    onRequestData={this.onRequestData}
                />
            );
        }
    }

    ReactDOM.render(
        <App />,
        document.getElementById('root')
    );

构建选项

参数名称	参数说明	默认值
width	宽度 (px)	600
height	高度度 (px)	400
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	交易名称
limit	分页大小	1000
intervalTime	请求间隔时间(ms)	3000
debug	是否开启调试模式 true/false	true
depthWidth	深度图宽度	最小50，小于50则取50，默认50

方法

• resize(int width, int height)

  设置画布大小

resize(1200, 550);

• setSymbol(string symbol, string symbolName)

  设置交易品种

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

• setTheme(string style)

  设置主题

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

• setLanguage(string lang)

  设置语言

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

• setIntervalTime: function (intervalTime)

  设置请求间隔时间(ms)

setIntervalTime(5000);

• setDepthWidth: function (width)

  设置深度图宽度

setDepthWidth(100);

事件

事件函数	说明
onResize: function(width, height)	画布尺寸改变时触发
onLangChange: function(lang)	语言改变时触发
onSymbolChange: function(symbol, symbolName)	交易品种改变时触发
onThemeChange: function(theme)	主题改变时触发
onRangeChange: function(range)	聚合时间改变时触发
onRequestData: function(param,callback)	请求数据时触发，触发时间间隔由intervalTime指定，param请求参数，callback(res)结果回调函数。无论请求是否成功，必须在onRequestData里调用callback,否则会中断数据请求。

数据请求param格式

{
  "symbol": "BTC",		// 交易品种
  "range": 900000,		// range类型，毫秒
  "limit": 1000,
  "since": "1512205140000"      // 时间
}

回调函数res格式

数据请求成功

当success为true，请求成功。

{
  "success": true,
  "data": {
    "lines": [
      [
        1.50790476E12,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        99.30597249871,
        66.9905449283
      ]
    ],
    "depths": {
      "asks": [
        [
          500654.27,
          0.5
        ]
      ],
      "bids": [
        [
          5798.79,
          0.013
        ]
      ]
    }
  }
}

数据请求失败

当res为空，或者success为false，请求失败。

{
  "success": false,
  "data": null,	        // success为false，则忽略data
}

• res参数说明:

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

• depths深度图数据,asks: 一定比例的卖单列表, bids:一定比例的买单列表, 其中每项的值依次是 : 成交价, 成交量