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 ...
随机推荐
- SpringBoot-YML的用法
SpringBoot yml 使用 SpringBoot 默认读取 application.yml|properties YML 比properties配置文件更加节约 简约(结构) 创建applic ...
- 虚存管理页面置换算法 — FIFO和RUL算法模拟实现
本篇博文为追忆以前写过的算法系列第一篇(20081021) 温故知新 目的: 为了解决内存容量有限与多作业执行的冲突.运用了虚拟存储技术.能从逻辑上对内存进行扩充,达到扩充内存的效果.分页存储管理是实 ...
- linux命令学习:PATH and LDFLAGS and CFLAGS
CFLAGS 表示用于 C 编译器的选项, CXXFLAGS 表示用于 C++ 编译器的选项. 这两个变量实际上涵盖了编译和汇编两个步骤. 先来看几个相关的环境变量:PATH.LDFLAGS. ...
- 执行hadoop自带的WordCount实例
hadoop 自带的WordCount实例可以统计一批文本文件中各单词出现的次数.下面介绍如何执行WordCount实例. 1.启动hadoop [root@hadoop ~]# start-all. ...
- Python创建目录
需要包含os模块进来,使用相关函数即可实现目录的创建 1.创建目录要用到的函数: (1)os.path.exists(path) 判断一个目录是否存在 (2)os.makedirs(path) 多层创 ...
- [转]如何快速转载CSDN中的博客
原文:https://blog.csdn.net/bolu1234/article/details/51867099 前言 对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时 ...
- C 语言boolean 值判断
printf("%d\n", !0); 1 1 printf("%d\n", !0); #include <std ...
- jenkins openshift 持续集成
参数部分没有 不要照抄,只供参考 需求: CI利用confd+etcd生成配置文件 CI把git的COMMIT 传到openshift的buildconfigs #!/bin/bash echo ec ...
- 2019.03.20 mvt,Django分页
MVT模式 MVT各部分的功能: M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数据处理. V全拼为View,与MVC中的C功能相同,接收请求,进行业务处理,返 ...
- Node.js学习看这里:基础、进阶、文章
Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网络应用. Node.js采用事件 ...