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",
}
vue使用tradingview开发K线图相关问题的更多相关文章
- Vue中引入TradingView制作K线图
**前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...
- Android开源图表图形库K线图
Android开源图表图形库K线图 web端k线图一般使用TradingView,android原生的一般是在MPAndroidChart 基础上做开发的,目前看到一个比较好的K线开源组件是KChar ...
- 功能分解——Android下画分时图与k线图有感
最近工作极度繁忙,已经好久没有更新博客了,总感觉要是再不抽空总结总结点东西,分分钟就会被懒惰的状态给打到了.同时也希望同学们谨记,如果你已经决定要坚持某些正确的东西,比如背完某章单词,看一完本书抑或是 ...
- Wijmo金融图表系列之平均K线图&砖形图
2015年7月16日将会发布有史以来最令人兴奋的控件-Wijmo 金融图表,它的一体化设计为单个自定义集合提供了所有主要的金融图表,这是市场上的其他控件都不具备的独一无二的好处.它像Wijmo其他任意 ...
- 利用JFreeChart绘制股票K线图完整解决方案
http://blog.sina.com.cn/s/blog_4ad042e50100q7d9.html 利用JFreeChart绘制股票K线图完整解决方案 (2011-04-30 13:27:17) ...
- 如何从零绘制k线图 -- 原生js canvas图表绘制
样式如下图 源码地址: https://github.com/sutianbinde/charts 编写这个需要具备canvas基础,如果没有canvas基础可以学习我前面的cnavas基础博客. 具 ...
- 【带着canvas去流浪(5)】绘制K线图
目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...
- 高仿MT4行情终端(K线图+操控+简单架构)
技术:VS2015 Update3 + QT 5.11.2 + BOOST 1.68 + QT VS Tools + C++11 概述 模仿外汇MT4的界面 详细 代码下载:http://www. ...
- canvas绘图,html5 k线图,股票行情图
canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...
随机推荐
- 【雅思】【写作】【大作文】Advantage VS. Disadvantage
Advantage VS. Disadvantage Advantage vs. Disadvantage 社会现象或者做法 “People can work or study on the Inte ...
- 宝塔Linux面板安装Redis
宝塔Linux面板安装Redis不会特别麻烦,只要几步就可以实现:1.安装redis服务2.配置redis设置3.安装PHP扩展,下面就随ytkah一起来看看吧 1.首先,我们来安装redis服务,进 ...
- 使用DigitalOcean控制台访问Droplet(远程服务器)
介绍 大多数用户将使用SSH,PUTTY或安装的控制面板管理他们的DigitalOcean Droplet. 但是,可能会出现阻止您使用这些方法访问Droplet的情况. 例如,更改网络或服务配置文件 ...
- 015-线程同步-synchronized几种加锁方式、Java对象头和Monitor、Mutex Lock、JDK1.6对synchronized锁的优化实现
一.synchronized概述基本使用 为确保共享变量不会出现并发问题,通常会对修改共享变量的代码块用synchronized加锁,确保同一时刻只有一个线程在修改共享变量,从而避免并发问题. syn ...
- 强制SVN上传代码时添加日志
因SVN不能像Git一样,审核代码之后才合入到主版本.为了使开发人员养成良好的上传习惯,强制要求上付时必须写明上传内容. 可以通过以下方法设置 1,在SVN服务器上找到源码仓库路径,找到下面文件夹:C ...
- react 全局公共组件-----动态弹窗 (dialog)
react 的时候,总是会用到弹窗,并且各种各样的,一般来说,组件层级嵌套之后,就会出现 z-index层级覆盖的问题 这个时候,就需要一个公共的弹出层,然后我们将需要展示的组件,放到弹出层里面 下面 ...
- Mac Maven配置
Maven下载链接,解压到指定目录,我这里是 /Users/JYH/Desktop/Hadoop-2.7.2/apache-maven-3.3.9 打开终端,配置环境变量 输入命令 vi ~/.bas ...
- PHP获取访客ip、系统、浏览器等信息[转]
1.获取访客操作系统信息 <?php function GetOs() { if (!empty($_SERVER['HTTP_USER_AGENT'])) { $OS = $_ ...
- Docker ssh server
这个话题真让我气愤啊,在家里的mac上我已经全部摆平了,结果在公司的Linux上就给堵住了 原因不祥,但最后在错误提示里,有个移除(remove)信息,我照做了,就没问题了,全通了 大概是linux里 ...
- 关于bjam编译自己模块出错的问题
将这个目录下C:\Users\Regubed的user-config.jam改为下面内容 # MSVC configurationusing msvc : 9.0 ; # Python configu ...