Vue中引入TradingView製作K線圖
阿新 • • 發佈:2018-11-03
**前言: 本文使用的是1.10版本 , 可通過TradingView.version()檢視當前版本.
附上開發文件地址:https://zlq4863947.gitbooks.i...**
一、修改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";
import Datafeeds from "../../../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簡單介紹
普遍主要通過修改這幾個函式實現預期效果
- Datafeeds.UDFCompatibleDatafeed.prototype.resolveSymbol - 配置商品資訊結構 (文件:https://zlq4863947.gitbooks.i...
- Datafeeds.UDFCompatibleDatafeed.prototype.getBars - 通過日期範圍獲取歷史K線資料。圖表庫希望通過onHistoryCallback僅一次呼叫,接收所有的請求歷史。而不是被多次呼叫。
- Datafeeds.DataPulseUpdater - 更新後臺返回k線最新的資料
emmm: 網上比較少關於TradingView引入Vue的文章,小弟不才,粗略的分享一下我的實現方法.