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

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

图表库内容说明

/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_libraryhttps://cn.tradingview.com/HTML5-stock-forex-bitcoin-charting-library/ , 申请步骤比较最复杂的需要下载它的一份协议签名盖章之后扫描上传上去然后填写一堆表单邮箱公司地址等等如果填写都ok的话会在一两天之内回复你的邮箱是github的链接(已授权过的不然会报404)。

2、github授权之后你就可以clone到本地运行之后可以看到demo的效果。
demo中的代码都是使用的tradingview官方的UDF接口来获取数据的。这有很大的局限性后台一般不会提供专门的接口 , 去开发一个接口供使用前端代码会少很多。

------------------
使用中可能遇到的问题
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: [
&#34;header_fullscreen_button&#34;, //隐藏头部全屏按钮
]

(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&#61;&#34;icon-full&#34;><img src&#61;&#34;/static/images/iconfull.png&#34;></span>')); //图片地址button.onclick &#61; function() {
    const tvid &#61; $('#tv_chart_container')[0];    if (tvid.className &#61;&#61;&#61; 'tv_chart_container_full') {
        tvid.className &#61; '';        return;
    }
    tvid.className &#61; 'tv_chart_container_full';
}

4.TradingView K线和成交量没有自适应区域显示ma线显示会错乱高低不齐
很可能是后台数据结构的原因
高开低收等字段必须是number类型千万不要是string字符串类型

5.Trading View 自定义初始化指标线平均移动线等设置颜色
只需要在 studies_overrides 中配置颜色即可
studies_overrides: {
&#34;MA Cross.short:plot.color&#34;: &#34;#6B3798&#34;,
&#34;MA Cross.long:plot.color&#34;: &#34;#708957&#34;,
},
如果你还想继续自定义指标线的话那就要在onchartready中进行配置
//默认展示MA Cross
widget.chart().createStudy(&#34;MA Cross&#34;, 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': &#34;#ca4141&#34;,
//跌的外边线
'mainSeriesProperties.candleStyle.borderDownColor': &#34;#25796a&#34;,
}