vue使用tradingview开发K线图相关问题-白红宇

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

阅读量：5159 次

发布时间：2019-06-13

本文共 3226 字，大约阅读时间需要 10 分钟。

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

1.TradingView中文开发文档

2.vue开源项目：

3.图表库内容说明：

/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、可以参考开源项目完成数据对接，

------------------

使用中可能遇到的问题：

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($('')); //图片地址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';}