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线图相关问题的更多相关文章

  1. Vue中引入TradingView制作K线图

    **前言: 本文使用的是1.10版本 , 可通过TradingView.version()查看当前版本. 附上开发文档地址:https://zlq4863947.gitbooks.i...** 一.修 ...

  2. Android开源图表图形库K线图

    Android开源图表图形库K线图 web端k线图一般使用TradingView,android原生的一般是在MPAndroidChart 基础上做开发的,目前看到一个比较好的K线开源组件是KChar ...

  3. 功能分解——Android下画分时图与k线图有感

    最近工作极度繁忙,已经好久没有更新博客了,总感觉要是再不抽空总结总结点东西,分分钟就会被懒惰的状态给打到了.同时也希望同学们谨记,如果你已经决定要坚持某些正确的东西,比如背完某章单词,看一完本书抑或是 ...

  4. Wijmo金融图表系列之平均K线图&砖形图

    2015年7月16日将会发布有史以来最令人兴奋的控件-Wijmo 金融图表,它的一体化设计为单个自定义集合提供了所有主要的金融图表,这是市场上的其他控件都不具备的独一无二的好处.它像Wijmo其他任意 ...

  5. 利用JFreeChart绘制股票K线图完整解决方案

    http://blog.sina.com.cn/s/blog_4ad042e50100q7d9.html 利用JFreeChart绘制股票K线图完整解决方案 (2011-04-30 13:27:17) ...

  6. 如何从零绘制k线图 -- 原生js canvas图表绘制

    样式如下图 源码地址: https://github.com/sutianbinde/charts 编写这个需要具备canvas基础,如果没有canvas基础可以学习我前面的cnavas基础博客. 具 ...

  7. 【带着canvas去流浪(5)】绘制K线图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

  8. 高仿MT4行情终端(K线图+操控+简单架构)

    技术:VS2015 Update3 + QT 5.11.2 + BOOST 1.68 + QT VS Tools + C++11   概述 模仿外汇MT4的界面 详细 代码下载:http://www. ...

  9. canvas绘图,html5 k线图,股票行情图

    canvas绘图,html5 k线图,股票行情图 canvas跟其他标签一样,也可以通过css来定义样式.但这里需要注意的是:canvas的默认宽高为300px * 150px,在css中为canva ...

随机推荐

  1. SpringBoot-YML的用法

    SpringBoot yml 使用 SpringBoot 默认读取 application.yml|properties YML 比properties配置文件更加节约 简约(结构) 创建applic ...

  2. 虚存管理页面置换算法 — FIFO和RUL算法模拟实现

    本篇博文为追忆以前写过的算法系列第一篇(20081021) 温故知新 目的: 为了解决内存容量有限与多作业执行的冲突.运用了虚拟存储技术.能从逻辑上对内存进行扩充,达到扩充内存的效果.分页存储管理是实 ...

  3. linux命令学习:PATH and LDFLAGS and CFLAGS

    CFLAGS 表示用于 C 编译器的选项, CXXFLAGS 表示用于 C++ 编译器的选项. 这两个变量实际上涵盖了编译和汇编两个步骤.     先来看几个相关的环境变量:PATH.LDFLAGS. ...

  4. 执行hadoop自带的WordCount实例

    hadoop 自带的WordCount实例可以统计一批文本文件中各单词出现的次数.下面介绍如何执行WordCount实例. 1.启动hadoop [root@hadoop ~]# start-all. ...

  5. Python创建目录

    需要包含os模块进来,使用相关函数即可实现目录的创建 1.创建目录要用到的函数: (1)os.path.exists(path) 判断一个目录是否存在 (2)os.makedirs(path) 多层创 ...

  6. [转]如何快速转载CSDN中的博客

    原文:https://blog.csdn.net/bolu1234/article/details/51867099 前言   对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时 ...

  7. C 语言boolean 值判断

    printf("%d\n", !0);       1           1 printf("%d\n", !0);     #include <std ...

  8. jenkins openshift 持续集成

    参数部分没有 不要照抄,只供参考 需求: CI利用confd+etcd生成配置文件 CI把git的COMMIT 传到openshift的buildconfigs #!/bin/bash echo ec ...

  9. 2019.03.20 mvt,Django分页

    MVT模式   MVT各部分的功能:   M全拼为Model,与MVC中的M功能相同,负责和数据库交互,进行数据处理.       V全拼为View,与MVC中的C功能相同,接收请求,进行业务处理,返 ...

  10. Node.js学习看这里:基础、进阶、文章

    Node.js是基于Chrome JavaScript运行时建立的一个平台,实际上它是对Google Chrome V8引擎进行了封装,它主要用于创建快速的.可扩展的网络应用. Node.js采用事件 ...