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