vue使用tradingview开发K线图相关问题

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",
}