首页 > 资讯 > 正文

TradingView udf模式

2021-11-11 10:28:48
 
549

第一步:申请tv

官网地址:免费股票图表、行情和交易观点 — TradingView(需要以公司名义申请)

第二步:相关资料

文档:https://b.aitrade.ga/books/tradingview/book/How-To-Connect-My-Data.html

官网demo:https://github.com/tradingview/charting-library-examples

官网demo是目前tv所支持的,下载适合你的

第三步:运行项目(以vue为例)

申请的tv 会在你的github上,把对应的文件放在demo对应的地方

类似于下图

直接npm install 安装完运行即可看到

第四步:tv配置项代码

1.预览地址:https://k.zg1.top/

2.配置项代码:vue 为例

<script>

import { widget } from '../charting_library.min';

function getLanguageFromURL() {

  const regex = new RegExp('[\\?&]lang=([^&#]*)');

  const results = regex.exec(window.location.search);

  return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));

}

// window.location.search.split("=")[2]  BTC/USDT

export default {

  name: 'TVChartContainer',

  props: {

    symbol: {

      default: window.location.search.split("=")[2] || "BTC/USDT",

      type: String,

    },

    interval: {

      default: '15',

      type: String,

    },

    containerId: {

      default: 'tv_chart_container',

      type: String,

    },

    datafeedUrl: {

      default: 'https://zg.top/api/v2/market/tradingview',

      type: String,

    },

    libraryPath: {

      default: '/charting_library/',

      type: String,

    },

    // chartsStorageUrl: {

    //   default: 'https://saveload.tradingview.com',

    //   type: String,

    // },

    chartsStorageApiVersion: {

      default: '1.1',

      type: String,

    },

    clientId: {

      default: 'tradingview.com',

      type: String,

    },

    // userId: {

    //   default: 'public_user_id',

    //   type: String,

    // },

    fullscreen: {

      default: true,

      type: Boolean,

    },

    autosize: {

      default: true,

      type: Boolean,

    },

    custom_css_url:{

      default: '/chart.css',

      type: String,

    },

    overrides:{

      'paneProperties.background': '#162431', // 蜡烛样式

      'mainSeriesProperties.candleStyle.upColor': '#64ae74',

      'mainSeriesProperties.candleStyle.downColor': '#df5f61',

      // 烛心

      'mainSeriesProperties.candleStyle.drawWick': true,

      // 烛心颜色

      'mainSeriesProperties.candleStyle.wickUpColor': '#64ae74',

      'mainSeriesProperties.candleStyle.wickDownColor': '#df5f61',

      // 边框

      'mainSeriesProperties.candleStyle.drawBorder': true,

      'mainSeriesProperties.candleStyle.borderUpColor': '#64ae74',

      'mainSeriesProperties.candleStyle.borderDownColor': '#df5f61',

      // 网格

      'paneProperties.vertGridProperties.style': 0,

      'paneProperties.horzGridProperties.color':'#FFFFFF',

      'paneProperties.vertGridProperties.color': '#FFFFFF',

      "volumePaneSize":"large",

      // 坐标轴和刻度标签颜色

      'scalesProperties.lineColor': '#252525',

      'scalesProperties.textColor': '#8a8a8a',

      'paneProperties.legendProperties.showLegend': false,

      'paneProperties.topMargin': 20,

    },

    studiesOverrides: {

      "volume.volume.color.0": "#00FFFF",

      "volume.volume.color.1": "#0000FF",

      "volume.volume.transparency": 70,

      "volume.volume ma.color": "#FF0000",

      "volume.volume ma.transparency": 30,

      "volume.volume ma.linewidth": 5,

      "volume.show ma": true,

      "bollinger bands.median.color": "#33FF88",

      "bollinger bands.upper.linewidth": 7,

      type: Object,

    }

  },

  tvWidget: null,

  mounted() {

    const widgetOptions = {

      symbol: this.symbol,

      // BEWARE: no trailing slash is expected in feed URL

      // theme: 'White',

      theme: 'Dark',

      timezone:"Asia/Shanghai",

      datafeed: new window.Datafeeds.UDFCompatibleDatafeed(this.datafeedUrl),

      interval: this.interval,

      container_id: this.containerId,

      library_path: this.libraryPath,

      locale: getLanguageFromURL() || 'zh',

      disabled_features: [

        'use_localstorage_for_settings',

        "volume_force_overlay",//柱状分离

        "timeframes_toolbar",//底部时间轴

        "header_symbol_search",//头部搜索

        "legend_context_menu",

        "header_screenshot",//相机

        "header_settings",//设置

        "header_saveload",//保存

        "header_fullscreen_button",//全屏

        'display_market_status',//休市

        "header_undo_redo",//返回按钮

        "header_compare",//对比

        "header_indicators",//指标

        "header_chart_type",//K线图切换

        // "header_resolutions",//时间切换

        'main_series_scale_menu',


      ],

      enabled_features: [

        'study_templates',

        // 'hide_left_toolbar_by_default',//当用户第一次打开图表时,隐藏左侧工具栏

        'show_dom_first_time',//当用户第一次打开图表时显示 DOM 面板

        'hide_last_na_study_output',//隐藏最后的 n/a 指标输出数据

        // "timeframes_toolbar",

      ],

      // charts_storage_url: this.chartsStorageUrl,

      charts_storage_api_version: this.chartsStorageApiVersion,

      client_id: this.clientId,

      user_id: this.userId,

      fullscreen: this.fullscreen,

      autosize: this.autosize,

      overrides:this.overrides,


      studies_overrides: this.studiesOverrides,

      custom_css_url:this.custom_css_url,

      customFormatters: {

        timeFormatter: {

          format: function(date) {

            var _format_str = '%h:%m';

             return _format_str.replace('%h', date.getUTCHours(), 2). replace('%m', date.getUTCMinutes(), 2). replace('%s', date.getUTCSeconds(), 2); }

        },

        dateFormatter: {

          format: function(date) {

            return date.getUTCFullYear() + '/' + (date.getUTCMonth()+1) + '/' + date.getUTCDate();

            }

        }

      }

    };

    const tvWidget = new widget(widgetOptions);

    this.tvWidget = tvWidget;

    tvWidget.onChartReady(() => {

      // tvWidget.chart().createStudy('MACD', false, false, [10,20])

      //设置各种均线

      tvWidget.chart().createStudy('Moving Average', false, false, [5],null,{"Plot.color":'#34a9ff'})

      tvWidget.chart().createStudy('Moving Average', false, false, [10],null,{"Plot.color":'#ffb620'})

      tvWidget.chart().createStudy('Moving Average', false, false, [30],null,{"Plot.color":'#8750ff'})

      tvWidget.chart().createStudy('Moving Average', false, false, [60],null,{"Plot.color":'#ff688f'})


      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '1min');


        button.addEventListener('click', function() {

          // button.classList.remove('clickBtn');

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('1', function onReadyCallback() {});

        });

        button.textContent = '1min';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '5min');

        button.addEventListener('click', function() {

          // button.classList.remove('clickBtn');

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('5', function onReadyCallback() {});

        });

        button.textContent = '5min';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '15min');

        button.addEventListener('click', function() {

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('15', function onReadyCallback() {});

        });

        button.textContent = '15min';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '30min');

        button.addEventListener('click', function() {

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('30', function onReadyCallback() {});

        });

        button.textContent = '30min';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '1hour');

        button.addEventListener('click', function() {

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('60', function onReadyCallback() {});

        });

        button.textContent = '1hour';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '1D');

        button.addEventListener('click', function() {

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('1D', function onReadyCallback() {});

        });

        button.textContent = '1D';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '1week');

        button.addEventListener('click', function() {

          // button.classList.add('clickBtn');

          tvWidget.chart().setResolution('7D', function onReadyCallback() {});

        });

        button.textContent = '1week';

      });

      tvWidget.headerReady().then(function() {

        var button = tvWidget.createButton();

        button.setAttribute('title', '指标');

        button.addEventListener('click', function() {

          // button.classList.add('clickBtn');

          tvWidget.chart().executeActionById("insertIndicator")

        });

        button.textContent = '指标';

      });


    });


  },

  destroyed() {

    if (this.tvWidget !== null) {

      this.tvWidget.remove();

      this.tvWidget = null;

    }

  },


}

</script>

<style lang="scss" scoped>

.TVChartContainer {

  height: calc(100vh - 80px);

}

</style>

3.后台数据参照预览地址的后台

4.调整好合并到你自己的项目里去,这个就看大家自己的了

最后建议大家一定要多看文档。

欢迎大家点赞关注。谢谢啦!

声明:
本文内容不代表斑马投诉网站观点,内容仅供参考,不构成投资建议。投资有风险,选择需谨慎! 如涉及内容、版权等问题,请联系我们,我们会在第一时间作出调整!