TradingView - K线

文章目录

• TradingView - K线
• • 1 前言
  • 2 如何使用
  • • 2.1 项目引入 Tradingview 静态资源包
    • • • [强制] 静态资源包 `charting_library-master` 放在目录 `static` 里。
    • 2.2 项目添加 Tradingview 核心库 charting_library.min.js
    • • • [建议] 在项目的运行入口 `index.html` 里添加
    • 2.3 挂载 Tradingview 到 Vue 组件
    • • • [建议] 预挂载提升K线渲染效率。
    • 2.4 获取 TradingView 数据并渲染
    • • • [建议] 批量获取历史数据依次叠加。
    • 2.5 TradingView 时段和交易对变化
    • • • [建议] 时段变化切换对应时段接口交易对变化重新初始化K线

1 前言

Tradingview是一个价格图表和分析软件提供免费和付费选项由一群交易员和软件开发商在2011年9月推出。投资者可以通过Tradingview查看各种不同金融市场和资产类别的价格图表包括股票、货币对、债券、期货以及加密货币。

2 如何使用

2.1 项目引入 Tradingview 静态资源包

[强制] 静态资源包 charting_library-master 放在目录 static 里。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqlU8rBz-1616988134216)(./images/tradingview-1.png)]

解释

static 目录下的文件不会被 webpack 处理它们会直接被复制到最终的打包目录默认是dist/static下。必须使用绝对路径引用这些文件这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 连接来确定的。

2.2 项目添加 Tradingview 核心库 charting_library.min.js

[建议] 在项目的运行入口 index.html 里添加

<script src="<%= process.env.ASSETS_BASE_URL %><%= process.env.assetsSubDirectory %>/charting_library-master/charting_library/charting_library.min.js"></script>

解释

charting_library.min.js 是 Tradingview 核心库提前缓存到浏览器提升K线渲染效率。

2.3 挂载 Tradingview 到 Vue 组件

[建议] 预挂载提升K线渲染效率。

// tradingview_chart_container 挂载Id
<template>
  <div class="kline">
    <div id="tradingview_chart_container" class="chart_container"></div>
  </div>
</template>

<script>
export default {
    name: "kline",
    data() {
        return {
            tvWidget: null,          // K线实例
            historyData: [],         // K线历史数据
            readyed: false,          // K线是否成功初始化
            limit: 100,              // K线单次获取历史数据数量
            timeStamp: 0,            // 最后一个数据的时间戳
            local: "zh",             // K线国际化
            interval: 'D',           // K线时段
            subscribeKlineData: {},  // 实时数据
            webSocketUrl: 'spot/candle-1m:btc-usdt',       // K线实时数据接口
            onRealtimeCallback2: function () {},          // 实时数据
            tvTimeList: {}           // K线周期按钮数据
        }
    },
    beforeMount() {
        // 初始化 TradingView
        TradingView.onready(this.initData())
    },
    methods: {
         // 初始化K线
         initData() {
             let _this = this;
             let ossPath = '/' // 本地 或者 线上路径
             if (process.env.NODE_ENV == "production") {
                 ossPath = 'https://btc018.oss-cn-shenzhen.aliyuncs.com/front/'
             }
             this.tvWidget = window.tvWidget = new TradingView.widget({
                 locale: _this.local, // K线国际化
                 symbol: 'BTC/USDT', // 交易对
                 interval: _this.interval, // K线数据时段
                 datafeed: _this.createFeed(), // 数据源
                 library_path : ossPath + "webStatic/charting_library-master/charting_library/", // K线静态资源路径
                 custom_css_url: ossPath + "webStatic/charting_library-master/charting_library/static/pro-night.css", // K线主题文件
                 container_id: "tradingview_chart_container", // 挂载ID
                 // 使用项
                 enabled_features: [
                     ...
                 ],
                 // 禁用项
                 disabled_features: [
                     ...
                 ],
                 ... // 其它配置项
             });
             // 监听K线加载执行自定义事件
             this.tvWidget.onChartReady(function () {
                 // 自定义事件
                 ...
             });
         },   
    }
</script>

2.4 获取 TradingView 数据并渲染

[建议] 批量获取历史数据依次叠加。

// ... TradingView Api

// 获取历史数据
this.historyData = response.data.concat(this.historyData)

// 渲染历史数据
onDataCallback(_this.historyData, {
    noData: false,
});

// 没有更多历史数据时停止查询
onDataCallback([], {
    noData: true,
});

// 订阅实时数据
this.webSocketUrl = `spot/candle-5m:BTC-USDT`
this.wsOn(this.webSocketUrl, {}, this.subKlineCallback);

// 渲染实时数据
subKlineCallback (data) {
    this.onRealtimeCallback2({
        time: Number(data[0]) || 0,
        open: Number(data[1]) || 0,
        close: Number(data[2]) || 0,
        high: Number(data[3]) || 0,
        low: Number(data[4]) || 0,
        volume: Number(data[5]) || 0,
    });
}

解释

批量获取历史数据接口压力小响应速度快提升K线渲染效率。

2.5 TradingView 时段和交易对变化

[建议] 时段变化切换对应时段接口交易对变化重新初始化K线

// 监听交易对
this.$bus.on("symbolChange", symbolInfo => {
    if (!this.tvWidget) {
        // 初始化Tradingview
        TradingView.onready(this.initData())
    } else {
        if (symbolInfo.tmId !== this.oldSymbolInfo.tmId) {
            // 关闭K线订阅
            this.closeKline();
            this.historyData = [];
            this.oldSymbolInfo = symbolInfo
            this.initData();
        }
    }
});

解释

交易对变化后清除缓存数据关闭数据推送避免K线报错。# TradingView - K线