trading view实现

TradingView udf模式

近期k线更新，刚趟完坑，简单总结一下

第一步：申请tv

官网地址：https://cn.tradingview.com/
注：需以公司名义申请

第二步：相关资料

文档：https://b.aitrade.ga/books/tradingview/book/How-To-Connect-My-Data.html
官网demo：https://github.com/tradingview/charting-library-examples
官网demo是目前tv所支持的，下载适合你的

第三步：运行项目

申请的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.调整好合并到你自己的项目里去，这个就看大家自己的了
最后建议大家一定要多看文档。
欢迎大家点赞关注。谢谢啦！