react-kline-pro v1.2.97

react-kline-pro

基于React的K线图组件

演示地址

• Demo

安装和使用

安装

$ npm install react-kline-pro

• 使用

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

构建选项

方法

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

事件

数据请求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:一定比例的买单列表, 其中每项的值依次是 : 成交价, 成交量