Vue中引入TradingView制作K线图
前言: 本文使用的是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的文章,小弟不才,粗略的分享一下我的实现方法.
