美文网首页
Vue中引入TradingView制作K线图

Vue中引入TradingView制作K线图

作者: _Lii_ | 来源:发表于2018-11-02 14:35 被阅读0次

    前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.io/tradingview/content/book/Home.html


    一、修改datafeed.js为export导出,并在vue文件引入TradingView内部代码charting_library.min.js和datafeed.js.

    datafeed.js

    // 导出核心函数,提供vue组件调用初始化k线图

    export default{

        UDFCompatibleDatafeed: Datafeeds.UDFCompatibleDatafeed,

    }

    vue 组件

    // 这是我的路径,请根据自己的路径去配置

    import"../../../static/charting_library/charting_library.min.js";

    importDatafeedsfrom"../../../static/charting_library/datafeed/udf/datafeed.js";

    二、初始化k线图函数


    data(){

        return{

            widget: null,

        }

    }

    ,

    methods:{

        createWidget() {

          var _this = this;

          this.$nextTick(function() {

            let widget = new TradingView.widget({

              symbol: 'BTC-USDT',//商品名称

              interval: "15",//默认显示时间分辨率15分钟

              container_id: "tv_chart_container",//k线div容器id

              //调用datafeed初始化函数

              datafeed: new Datafeeds.UDFCompatibleDatafeed(

                'https://demo_feed.tradingview.com',//后台地址

                10000, //轮询时间(毫秒)

              ),

              library_path: "/static/charting_library/", //static文件夹的路径

              locale: 'zh', //语言

              fullscreen: true, //显示图表是否占用窗口中所有可用的空间

              //禁用图表某个功能,参考:https://tradingview.gitee.io/featuresets/

              disabled_features: [

                "use_localstorage_for_settings",

                "left_toolbar", //隐藏左边工具栏

                "header_saveload",

                "header_symbol_search", //隐藏搜索框

                "header_interval_dialog_button", //隐藏设置周期按钮

                "timeframes_toolbar", //隐藏底部刻度栏

                "header_chart_type", //隐藏k线样式选择

                // "header_indicators", //隐藏指标按钮

                "header_fullscreen_button",

                "header_undo_redo", //隐藏撤销重做按钮

                "header_compare", //隐藏比较/增加商品按钮

                "header_screenshot", //隐藏截屏按钮

                "header_resolutions",

                "edit_buttons_in_legend",

                "pane_context_menu",

                "legend_context_menu",

                "adaptive_logo",

                "display_market_status",

                "volume_force_overlay"

              ],

              //启用图表某个功能

              enabled_features: ["study_templates", "move_logo_to_main_pane"],

              charts_storage_url: "https://saveload.tradingview.com",

              charts_storage_api_version: "1.1",//版本

              timezone: "Asia/Shanghai",//时区

              user_id: "public_user_id",

            });

            _this.widget = widget; //保存图表对象

          });

        },

        // 更新图表

        updateWidget(item) {

          this.removeWidget();

          this.createWidget();

        },

        //销毁图表

        removeWidget() {

          if (this.widget) {

            this.widget = null;

          }

        },

        destroyed() {

            this.removeWidget();

        }

    },

    mounted(){

        this.$nextTick(()=>{

            this.updateWidget();

        })

    }

    三、Datafeed.js简单介绍

    普遍主要通过修改这几个函数实现预期效果

    1. Datafeeds.UDFCompatibleDatafeed.prototype.resolveSymbol - 配置商品信息结构

    (文档:https://zlq4863947.gitbooks.io/tradingview/content/book/Symbology.html)

    2.Datafeeds.UDFCompatibleDatafeed.prototype.getBars - 通过日期范围获取历史K线数据。图表库希望通过onHistoryCallback仅一次调用,接收所有的请求历史。而不是被多次调用。

    3.Datafeeds.DataPulseUpdater - 更新后台返回k线最新的数据

    emmm: 网上比较少关于TradingView引入Vue的文章,小弟不才,粗略的分享一下我的实现方法.

    相关文章

      网友评论

          本文标题:Vue中引入TradingView制作K线图

          本文链接:https://www.haomeiwen.com/subject/cakidftx.html