第一步：申請(qǐng)tv
官網(wǎng)地址：免費(fèi)股票圖表、行情和交易觀點(diǎn) — TradingView（需要以公司名義申請(qǐng)）
第二步：相關(guān)資料
文檔：https://b.aitrade.ga/books/tradingview/book/How-To-Connect-My-Data.html
官網(wǎng)demo：https://github.com/tradingview/charting-library-examples
官網(wǎng)demo是目前tv所支持的添祸，下載適合你的
第三步：運(yùn)行項(xiàng)目（以vue為例）
申請(qǐng)的tv 會(huì)在你的github上懦窘，把對(duì)應(yīng)的文件放在demo對(duì)應(yīng)的地方
類似于下圖
直接npm install 安裝完運(yùn)行即可看到
第四步：tv配置項(xiàng)代碼
1.預(yù)覽地址:https://k.zg1.top/
2.配置項(xiàng)代碼：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',
? ? ? // 網(wǎng)格
? ? ? 'paneProperties.vertGridProperties.style': 0,
? ? ? 'paneProperties.horzGridProperties.color':'#FFFFFF',
? ? ? 'paneProperties.vertGridProperties.color': '#FFFFFF',
? ? ? "volumePaneSize":"large",
? ? ? // 坐標(biāo)軸和刻度標(biāo)簽顏色
? ? ? '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",//底部時(shí)間軸
? ? ? ? "header_symbol_search",//頭部搜索
? ? ? ? "legend_context_menu",
? ? ? ? "header_screenshot",//相機(jī)
? ? ? ? "header_settings",//設(shè)置
? ? ? ? "header_saveload",//保存
? ? ? ? "header_fullscreen_button",//全屏
? ? ? ? 'display_market_status',//休市
? ? ? ? "header_undo_redo",//返回按鈕
? ? ? ? "header_compare",//對(duì)比
? ? ? ? "header_indicators",//指標(biāo)
? ? ? ? "header_chart_type",//K線圖切換
? ? ? ? // "header_resolutions",//時(shí)間切換
? ? ? ? 'main_series_scale_menu',
? ? ? ],
? ? ? enabled_features: [
? ? ? ? 'study_templates',
? ? ? ? // 'hide_left_toolbar_by_default',//當(dāng)用戶第一次打開圖表時(shí)弃甥，隱藏左側(cè)工具欄
? ? ? ? 'show_dom_first_time',//當(dāng)用戶第一次打開圖表時(shí)顯示 DOM 面板
? ? ? ? 'hide_last_na_study_output',//隱藏最后的 n/a 指標(biāo)輸出數(shù)據(jù)
? ? ? ? // "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])
? ? ? //設(shè)置各種均線
? ? ? 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', '指標(biāo)');
? ? ? ? button.addEventListener('click', function() {
? ? ? ? ? // button.classList.add('clickBtn');
? ? ? ? ? tvWidget.chart().executeActionById("insertIndicator")
? ? ? ? });
? ? ? ? button.textContent = '指標(biāo)';
? ? ? });
? ? });
? },
? destroyed() {
? ? if (this.tvWidget !== null) {
? ? ? this.tvWidget.remove();
? ? ? this.tvWidget = null;
? ? }
? },
}
</script>
<style lang="scss" scoped>
.TVChartContainer {
? height: calc(100vh - 80px);
}
</style>
3.后臺(tái)數(shù)據(jù)參照預(yù)覽地址的后臺(tái)
4.調(diào)整好合并到你自己的項(xiàng)目里去，這個(gè)就看大家自己的了
最后建議大家一定要多看文檔拆融。
歡迎大家點(diǎn)贊關(guān)注宰僧。謝謝啦！
