資訊專欄INFORMATION COLUMN
摘要：圖表庫希望通過僅一次調(diào)用，接收所有的請求歷史。更新后臺返回線最新的數(shù)據(jù)網(wǎng)上比較少關于引入的文章小弟不才粗略的分享一下我的實現(xiàn)方法
**前言: 本文使用的是1.10版本 , 可通過TradingView.version()查看當前版本.
附上開發(fā)文檔地址:https://zlq4863947.gitbooks.i...**
一、修改datafeed.js為export導出,并在vue文件引入TradingView內(nèi)部代碼charting_library.min.js和datafeed.js.
datafeed.js
// 導出核心函數(shù),提供vue組件調(diào)用初始化k線圖
export default {
UDFCompatibleDatafeed: Datafeeds.UDFCompatibleDatafeed,
}
vue 組件
// 這是我的路徑,請根據(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",//默認顯示時間分辨率15分鐘
container_id: "tv_chart_container",//k線div容器id
//調(diào)用datafeed初始化函數(shù)
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",//時區(qū)
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簡單介紹
普遍主要通過修改這幾個函數(shù)實現(xiàn)預期效果
Datafeeds.UDFCompatibleDatafeed.prototype.resolveSymbol - 配置商品信息結(jié)構(gòu) (文檔:https://zlq4863947.gitbooks.i...
Datafeeds.UDFCompatibleDatafeed.prototype.getBars - 通過日期范圍獲取歷史K線數(shù)據(jù)。圖表庫希望通過onHistoryCallback僅一次調(diào)用，接收所有的請求歷史。而不是被多次調(diào)用。
Datafeeds.DataPulseUpdater - 更新后臺返回k線最新的數(shù)據(jù)
emmm: 網(wǎng)上比較少關于TradingView引入Vue的文章,小弟不才,粗略的分享一下我的實現(xiàn)方法.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98918.html
摘要：進階二進制傳輸數(shù)據(jù)在傳輸數(shù)據(jù)的時候是明文傳輸，而且像線上的歷史數(shù)據(jù)，一般數(shù)據(jù)量比較大。為了安全性以及更快的加載出圖表，我們決定使用二進制的方式傳輸數(shù)據(jù)。 前言 最近在做交易所項目里的K線圖，得些經(jīng)驗，與大家分享。 代碼居多，流量預警?。。?！ 點贊 收藏 不迷路。 技術(shù)選型 echrats showImg(https://segmentfault.com/img/remote/14...
摘要：進階二進制傳輸數(shù)據(jù)在傳輸數(shù)據(jù)的時候是明文傳輸，而且像線上的歷史數(shù)據(jù)，一般數(shù)據(jù)量比較大。為了安全性以及更快的加載出圖表，我們決定使用二進制的方式傳輸數(shù)據(jù)。 前言 最近在做交易所項目里的K線圖，得些經(jīng)驗，與大家分享。 代碼居多，流量預警?。。?！ 點贊 收藏 不迷路。 技術(shù)選型 echrats showImg(https://segmentfault.com/img/remote/14...
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
摘要：什么是是一個基于創(chuàng)建的簡單高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持以及和等平臺。而針對股票等有價證劵特定的圖表庫有和等項目，這些圖表庫對股票繪圖已經(jīng)做了一些非常專業(yè)的處理及優(yōu)化了，但是他們均基于來繪圖。 什么是 ClChart？ ClChart是一個基于canvas創(chuàng)建的簡單、高性能和跨平臺的股票數(shù)據(jù)可視化開源項目。支持PC、webApp以及React Native和Weex等平臺...
閱讀 1339·2019-08-30 15:44
閱讀 1391·2019-08-29 18:42
閱讀 446·2019-08-29 13:59
閱讀 782·2019-08-28 17:58
閱讀 2823·2019-08-26 12:02
閱讀 2424·2019-08-23 18:40
閱讀 2414·2019-08-23 18:13
閱讀 3116·2019-08-23 16:27
