vue使用tradingview開發K線圖相關問題
1.TradingView中文開發文檔
https://b.aitrade.ga/books/tradingview/CHANGE-LOG.html
2.vue開源項目：
https://github.com/webdatavisualdev/vue-tradingview
https://github.com/472647301/tradingView-webSocke
https://github.com/webdatavisualdev/vue-tradingview
3.圖表庫內容說明：
https://zlq4863947.gitbooks.io/tradingview/book/Package-Content.html#%E5%9B%BE%E8%A1%A8%E5%BA%93%E5%86%85%E5%AE%B9
/charting_library 包含所有的庫文件。
/charting_library/charting_library.min.js 包含外部圖表庫widget 接口。不建議修改該文件。
/charting_library/charting_library.min.d.ts 包含TypeScript 定義的widget接口
/charting_library/datafeed-api.d.ts 包含TypeScript 定義的data feed接口。
/charting_library/datafeeds/udf/datafeed.js 包含UDF-compatible 的datafeed包裝器（用於實現JS API以連接圖表庫通過UDF傳輸數據）。例子中的datafeed包裝器實現了脈沖實時仿真數據。您可以自由編輯此文件。
/charting_library/static 文件夾中存儲圖表庫內部資源，不適用於其他目的。
/index.html 為使用Charting Library widget 的html例子。
/test.html 為不同的圖表庫自定義功能使用的示例。
/mobile*.html 也是Widget自定義的示例。
------------
1、tradingview雖然是開源免費，可也是僅限於一些基本的圖表服務，但這也基本上夠用了。使用之前，需要進入tradingview官網去申請他的chart_library（https://cn.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/ ）, 申請步驟比較最復雜的，需要下載它的一份協議，簽名蓋章之后掃描上傳上去，然后填寫一堆表單（郵箱公司地址等等），如果填寫都ok的話，會在一兩天之內回復你的郵箱，是github的鏈接(已授權過的，不然會報404)。
2、github授權之后，你就可以clone到本地運行之后，可以看到demo的效果。
demo中的代碼都是使用的tradingview官方的UDF接口來獲取數據的。這有很大的局限性，后台一般不會提供專門的接口。可以參照（https://b.aitrade.ga/books/tradingview/book/UDF.html ）, 去開發一個接口供使用前端代碼會少很多。
3、可以參考開源項目完成數據對接，https://github.com/webdatavisualdev/vue-tradingview
------------------
使用中可能遇到的問題：
1.隱藏、顯示功能按鈕
// disabled_features: ['header_symbol_search'],
// enabled_features: [],
2.vue中使用TradingView頁面閃白解決方案
閃白是iframe所引起的，解決方案：
1).找到\static\tradeView\charting_library\static\tv-chart.xxxx.html 這個文件
2).打開文件后直接在前面加上下面代碼即可：
<style>
#loading-indicator,body.chart-page {
background: 0 0
}
</style>
3).TradingView全屏顯示后，依舊保持可打開/關閉全屏功能
將TradingView自帶的全屏按鈕給隱藏起來，然后自定義圖表實現邏輯
(1).首先將header_fullscreen_button如下配置
disabled_features: [
"header_fullscreen_button", //隱藏頭部全屏按鈕
]
(2).然后再chartReady函數里進行如下代碼配置即可：
const buttonEvent = widget.createButton({align: "right"});
const button = buttonEvent[0];
button.title = '打開/關閉全屏';
button.className = 'button fullscreen iconed apply-common-tooltip';
buttonEvent.append($('<span class="icon-full"><img src="/static/images/iconfull.png"></span>')); //圖片地址
button.onclick = function() {
const tvid = $('#tv_chart_container')[0];
if (tvid.className === 'tv_chart_container_full') {
tvid.className = '';
return;
}
tvid.className = 'tv_chart_container_full';
}
4.TradingView K線和成交量沒有自適應區域顯示，ma線顯示會錯亂，高低不齊
很可能是后台數據結構的原因
高開低收等字段必須是number類型，千萬不要是string字符串類型
5.Trading View 自定義初始化指標線（平均移動線等），設置顏色
只需要在 studies_overrides 中配置顏色即可
studies_overrides: {
"MA Cross.short:plot.color": "#6B3798",
"MA Cross.long:plot.color": "#708957",
},
如果你還想繼續自定義指標線的話，那就要在onchartready中進行配置
//默認展示MA Cross
widget.chart().createStudy("MA Cross", false, false, [10, 20]);
//修改k線圖的顏色
overrides: {
'symbolWatermarkProperties.color' : 'rgba( 85, 85, 85, 0)',
'paneProperties.topMargin': 20,
'paneProperties.crossHairProperties.color': '#626c73',
'paneProperties.legendProperties.showLegend': false,
//K線圖的顏色
'mainSeriesProperties.candleStyle.upColor':'#ca4141',
'mainSeriesProperties.candleStyle.downColor':'#25796a',
'mainSeriesProperties.candleStyle.drawWick':true,
'mainSeriesProperties.candleStyle.drawBorder':true,
//漲的最高最低線顏色
'mainSeriesProperties.candleStyle.wickUpColor':'#ca4141',
//跌的最高最低線顏色
'mainSeriesProperties.candleStyle.wickDownColor':'#25796a',
//漲的外邊線
'mainSeriesProperties.candleStyle.borderUpColor': "#ca4141",
//跌的外邊線
'mainSeriesProperties.candleStyle.borderDownColor': "#25796a",
}