成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue中引入TradingView制作K線圖

codergarden / 2412人閱讀

摘要：圖表庫(kù)希望通過僅一次調(diào)用，接收所有的請(qǐng)求歷史。更新后臺(tái)返回線最新的數(shù)據(jù)網(wǎng)上比較少關(guān)于引入的文章小弟不才粗略的分享一下我的實(shí)現(xiàn)方法

**前言: 本文使用的是1.10版本 , 可通過TradingView.version()查看當(dāng)前版本.
附上開發(fā)文檔地址:https://zlq4863947.gitbooks.i...**

一、修改datafeed.js為export導(dǎo)出,并在vue文件引入TradingView內(nèi)部代碼charting_library.min.js和datafeed.js.

datafeed.js

// 導(dǎo)出核心函數(shù),提供vue組件調(diào)用初始化k線圖
export default {
    UDFCompatibleDatafeed: Datafeeds.UDFCompatibleDatafeed,
}

vue 組件

// 這是我的路徑,請(qǐng)根據(jù)自己的路徑去配置
import "../../../static/charting_library/charting_library.min.js";
import Datafeeds from "../../../static/charting_library/datafeed/udf/datafeed.js";

二、初始化k線圖函數(shù)

data(){
    return{
         widget: null,
    }
}
,
methods:{
    createWidget() {
       var _this = this;
      this.$nextTick(function() {
        let widget = new TradingView.widget({
          symbol: "BTC-USDT",//商品名稱
          interval: "15",//默認(rèn)顯示時(shí)間分辨率15分鐘
          container_id: "tv_chart_container",//k線div容器id
          //調(diào)用datafeed初始化函數(shù)
          datafeed: new Datafeeds.UDFCompatibleDatafeed(
            "https://demo_feed.tradingview.com",//后臺(tái)地址
            10000, //輪詢時(shí)間(毫秒)
          ),
          library_path: "/static/charting_library/", //static文件夾的路徑
          locale: "zh", //語言
          fullscreen: true, //顯示圖表是否占用窗口中所有可用的空間
          //禁用圖表某個(gè)功能,參考:https://tradingview.gitee.io/featuresets/
          disabled_features: [
            "use_localstorage_for_settings",
            "left_toolbar", //隱藏左邊工具欄
            "header_saveload",
            "header_symbol_search", //隱藏搜索框
            "header_interval_dialog_button", //隱藏設(shè)置周期按鈕
            "timeframes_toolbar", //隱藏底部刻度欄
            "header_chart_type", //隱藏k線樣式選擇
            // "header_indicators", //隱藏指標(biāo)按鈕
            "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"
          ],
          //啟用圖表某個(gè)功能
          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",//時(shí)區(qū)
          user_id: "public_user_id",
        });
        _this.widget = widget; //保存圖表對(duì)象
      });
    },
    // 更新圖表
    updateWidget(item) {
      this.removeWidget();
      this.createWidget();
    },
    //銷毀圖表
    removeWidget() {
      if (this.widget) {
        this.widget = null;
      }
    },
    destroyed() {
        this.removeWidget();
    }
},
mounted(){
    this.$nextTick(()=>{
        this.updateWidget();
    })
    
}

三、Datafeed.js簡(jiǎn)單介紹 

普遍主要通過修改這幾個(gè)函數(shù)實(shí)現(xiàn)預(yù)期效果

Datafeeds.UDFCompatibleDatafeed.prototype.resolveSymbol - 配置商品信息結(jié)構(gòu) (文檔:https://zlq4863947.gitbooks.i...

Datafeeds.UDFCompatibleDatafeed.prototype.getBars - 通過日期范圍獲取歷史K線數(shù)據(jù)。圖表庫(kù)希望通過onHistoryCallback僅一次調(diào)用，接收所有的請(qǐng)求歷史。而不是被多次調(diào)用。

Datafeeds.DataPulseUpdater - 更新后臺(tái)返回k線最新的數(shù)據(jù)

emmm: 網(wǎng)上比較少關(guān)于TradingView引入Vue的文章,小弟不才,粗略的分享一下我的實(shí)現(xiàn)方法.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/98918.html

相關(guān)文章

  • tradingView--最專業(yè)的走勢(shì)圖表，收下吧，也許你會(huì)用到

    摘要：進(jìn)階二進(jìn)制傳輸數(shù)據(jù)在傳輸數(shù)據(jù)的時(shí)候是明文傳輸，而且像線上的歷史數(shù)據(jù)，一般數(shù)據(jù)量比較大。為了安全性以及更快的加載出圖表，我們決定使用二進(jìn)制的方式傳輸數(shù)據(jù)。 前言 最近在做交易所項(xiàng)目里的K線圖，得些經(jīng)驗(yàn)，與大家分享。 代碼居多，流量預(yù)警?。。。?點(diǎn)贊 收藏 不迷路。 技術(shù)選型 echrats showImg(https://segmentfault.com/img/remote/14...

    tianyu 評(píng)論0 收藏0

  • tradingView--最專業(yè)的走勢(shì)圖表，收下吧，也許你會(huì)用到

    摘要：進(jìn)階二進(jìn)制傳輸數(shù)據(jù)在傳輸數(shù)據(jù)的時(shí)候是明文傳輸，而且像線上的歷史數(shù)據(jù)，一般數(shù)據(jù)量比較大。為了安全性以及更快的加載出圖表，我們決定使用二進(jìn)制的方式傳輸數(shù)據(jù)。 前言 最近在做交易所項(xiàng)目里的K線圖，得些經(jīng)驗(yàn)，與大家分享。 代碼居多，流量預(yù)警?。。?！ 點(diǎn)贊 收藏 不迷路。 技術(shù)選型 echrats showImg(https://segmentfault.com/img/remote/14...

    canopus4u 評(píng)論0 收藏0

  • 基于canvas實(shí)現(xiàn)的高性能、跨平臺(tái)的股票圖表庫(kù)--clchart

    摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...

    baihe 評(píng)論0 收藏0

  • 基于canvas實(shí)現(xiàn)的高性能、跨平臺(tái)的股票圖表庫(kù)--clchart

    摘要：什么是是一個(gè)基于創(chuàng)建的簡(jiǎn)單高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持以及和等平臺(tái)。而針對(duì)股票等有價(jià)證劵特定的圖表庫(kù)有和等項(xiàng)目，這些圖表庫(kù)對(duì)股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個(gè)基于canvas創(chuàng)建的簡(jiǎn)單、高性能和跨平臺(tái)的股票數(shù)據(jù)可視化開源項(xiàng)目。支持PC、webApp以及React Native和Weex等平臺(tái)...

    SnaiLiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<