Vue中引入TradingView制作K线图

codergarden 发布于2019-08-23 12:39 / 1878人阅读

摘要：图表库希望通过仅一次调用，接收所有的请求历史。更新后台返回线最新的数据网上比较少关于引入的文章小弟不才粗略的分享一下我的实现方法

**前言: 本文使用的是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的文章,小弟不才,粗略的分享一下我的实现方法.

专线服务混合云 cdn引入vue js制作曲线图视频中引入的 php中引入文件.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98918.html

tradingView--最专业的走势图表，收下吧，也许你会用到

摘要：进阶二进制传输数据在传输数据的时候是明文传输，而且像线上的历史数据，一般数据量比较大。为了安全性以及更快的加载出图表，我们决定使用二进制的方式传输数据。前言最近在做交易所项目里的K线图，得些经验，与大家分享。代码居多，流量预警！！！！点赞收藏不迷路。技术选型 echrats showImg(https://segmentfault.com/img/remote/14...

tianyu 2019-08-02 15:30 评论0 收藏0
tradingView--最专业的走势图表，收下吧，也许你会用到

摘要：进阶二进制传输数据在传输数据的时候是明文传输，而且像线上的历史数据，一般数据量比较大。为了安全性以及更快的加载出图表，我们决定使用二进制的方式传输数据。前言最近在做交易所项目里的K线图，得些经验，与大家分享。代码居多，流量预警！！！！点赞收藏不迷路。技术选型 echrats showImg(https://segmentfault.com/img/remote/14...

canopus4u 2019-08-23 18:35 评论0 收藏0
基于canvas实现的高性能、跨平台的股票图表库--clchart

摘要：什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目，这些图表库对股票绘图已经做了一些非常专业的处理及优化了，但是他们均基于来绘图。什么是 ClChart？ ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

baihe 2019-08-22 16:43 评论0 收藏0
基于canvas实现的高性能、跨平台的股票图表库--clchart

摘要：什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目，这些图表库对股票绘图已经做了一些非常专业的处理及优化了，但是他们均基于来绘图。什么是 ClChart？ ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

SnaiLiu 2019-08-29 15:09 评论0 收藏0
基于canvas实现的高性能、跨平台的股票图表库--clchart

摘要：什么是是一个基于创建的简单高性能和跨平台的股票数据可视化开源项目。支持以及和等平台。而针对股票等有价证劵特定的图表库有和等项目，这些图表库对股票绘图已经做了一些非常专业的处理及优化了，但是他们均基于来绘图。什么是 ClChart？ ClChart是一个基于canvas创建的简单、高性能和跨平台的股票数据可视化开源项目。支持PC、webApp以及React Native和Weex等平台...

PAMPANG 2019-08-05 13:41 评论0 收藏0