Back

[**] js - 申请和使用trading view

发布时间: 2018-07-17 03:20:00

tradingview 是一个不错的Ｋ线图的组件．实际上这个组件仅仅是　trading view的一小小小部分．　更多的内容大家可以挖掘．

要想在自己的项目中使用　trading view, 需要提出申请．　填写一个表格．　要包括你个人的github. （这样日后才能访问这个repo) 

这个表格不要乱填，　对方会根据你的　网站情况来查看，然后做个比较详细的询问．　

最后才会开通github的访问权限．　

虽然官网上说１－２个工作日，但是估计这个是　顺利的情况．　我们的情况比较特殊，对方员工询问的比较细致，所以大约１周才申请下来．　

申请下来了．

官方github:  https://github.com/tradingview/charting_library/  

这是个私有项目，必须被人邀请才能看到．　

文档也在其中的wiki 里．　　

使用(获得 bars )  , 也就是展示长条

学习资料太少了．．．．可以５分钟搭建起一个图标，但是希望用我自己的数据，而不是　官方提供的ＵＤＰ数据呢？完全找不到思路．．．网上的ＤＥＭＯ都是ＵＤＰ的数据．　

也许是我的方向错了？　再搜一搜．．．

这个文章：两节课　使用trading view.  https://medium.com/@jonchurch/tradingview-charting-library-js-api-setup-for-crypto-part-1-57e37f5b3d5a

这个是对应的代码： https://github.com/jonchurch/tradingview-js-api-tutorial

stackoverflow上这个页面问了问题：　https://stackoverflow.com/questions/39314151/who-to-use-tradingview-chart-in-my-website-and-with-my-data/51434784#51434784

要看使用：　

1. 打开官方的　rails 　项目

2. 打开上述课程的　step2.  

互相参考着看．

终于弄出来了．（有小瑕疵：或者大bug:　一刻不停的请求数据，　把　getBars 一刻不停的运行．．．．　)

泣血经验　：

1. js API 跟我们理解的传统意义的ＡＰＩ　不一样．　它其实只是对　远程接口的一种封装，　封装成为　javascript object, 　然后返回给　trading view调用．　

可以认为它是设计模式中的 bridge, 或者　wrapper一类的东东．　

JS API的地址:   https://github.com/tradingview/charting_library/wiki/JS-Api

2. JS API中的任意一个方法, 必须跟 文档一模一样. 里面的各种参数, 出现的顺序,必须保持一模一样.  我就是因为 顺序不一样, 卡了6个小时.她美得. ...  前一天头晕晕的时候敲代码, 复制粘贴. 发现各种奇葩错误. 

后来第二天耐着性子看文档,发现时自己的函数的参数顺序搞错了恶

3. 调试的时候, 要加上 debug = true. 这个选项. 在创建TV的构造函数中. 

不过加了也没用太大作用. 我都把 min.js 给格式化了. 8W行代码.  结果发现调试是不可能的.  你看到各种报错,也是一层套一层, 最终的报错跟 程序没一毛钱关系.  

4. optional 的东西,能不加就不加.   有的时候加错了反而会引起报错. 

例如  getServerTime 这个函数,正确写法是:  

function  (callback)  {   callback( 1223472390 ) } 
而我给他写成了:

function (callback)  { callback()  }  (少写了参数)  结果一直报错.  

报错的内容是 :   Key is NaN

搜索了一下,居然有个文章 跟我的这个错误一样, 但是原因完全不同.    https://blog.csdn.net/q506417225/article/details/80590894

到后来我居然还要去看 UDP各种的请求.....

后来硬着头皮重新看代码,才发现原因.....

5. tradingview的刷新方式要了解:   

我们无法手动的指定它的抓取数据的时间范围(例如从某天到某天), 它会自动的进行多次增量的查询

当你选择 interval是 D 时, 表示 每个柱子是  1 day.  那么 tradingview 会

5.1  先发起第一次请求,    从 2017.6.20 - 2018.6.20 

5.2  发起第二次请求, 从  2016.6.20 - 2017.6.20   (request是到 2017.6.20 ,  log中则显示 查到 2018.6.20 , 其实后者也对.因为trading view 要把这个结果跟上一个请求的结果合并)

... 

所以,我们在请求后台的接口的时候,务必要把 from ... to.. 这样的参数加上.  而且一定要有一种条件: 返回的结果是空(例如请求的时间端是 1998.6.20  -  2000.6.20  ,这个时间段内 ,比特币还没有发明出来, 自然就没有 柱状图了.  那么远程接口就要返回空.

当tradingview 发现远程接口返回空了,就知道: 哦, 查到最后一条了. 不查了.

时区 (timezone) 

参考： https://github.com/serdimoa/charting/wiki/Overrides 直接修改里面的 timezone, 可用的timezone, 在这里： https://github.com/serdimoa/charting/wiki/Symbology 总之要选择成 对应的。 

例如： "timezone": "Asia/Hong_Kong",

如何关掉trading view的一些功能?

在构造函数中指定:

这些功能,也叫 features,  多个功能叫做 featureset

参考:   https://github.com/tradingview/charting_library/wiki/Featuresets

  http://tradingview.github.io/featuresets.html  (各个feature 的图例) 

TradingView.onready(function()
{
    var widget = new TradingView.widget({
        /* .... */
        disabled_features: ["header_widget", "left_toolbar"],
        enabled_features: ["move_logo_to_main_pane"]
    });
});

如何覆盖CSS?

还是在构造函数中指定:

overrides: {
    "symbolWatermarkProperties.color": "rgba(0, 0, 0, 0)"
}

目前不可使用 theme  =  'dark',  虽然是文档中 已经写好了 支持, 但是 1.13 尚未出现 ,  1.12 还不支持 .

特别注意

在我自己的项目中，修改：app/views/markets/_tradingview_overrides.html.erb  文件即可。

更多样式override, 参考： https://github.com/tradingview/charting_library/wiki/Overrides 和
https://github.com/tradingview/charting_library/wiki/Drawings-Overrides

不过这里只能修改有限的几个颜色。 K线背景， 横线等。。。

还需要修改其他的地方，划线工具那一竖栏（左侧）的背景色啊， 上面ICON的背景色啊。。。等等

方法： 先用微信的截屏，看到对应网页的 rgb 颜色，然后grep., 例如：

/workspace/trading.coiex.io/app$ grep 'f1f3f6' . -r --include=*css

有两个css 文件，分别是：   /charting_library/static/bundles/library.a8de6f8cf4dda6895071c6ec45f900d9.css  

和该文件夹下的另一个css 文件。 直接修改里面的值就好了。

K线上面栏：  f1f3f6  ->  171717  

K线组件的border:  dadde0 

还可以直接在这里修改CSS：

charting_library/static/bundles/library.a8de6f8cf4dda6895071c6ec45f900d9.css

   /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,d
   .layout__area--left{
     background-color: #171717;
   }
   .drawingToolbar-2CoOuCv8-{
     background-color: #171717;
   }
   .separator-3cgsM4c1-{
     background-color: #3c3c3c;
  }
 
  .left .group span{
    color: white;background-color: #3c3c3c;
  }
 
  .left .group span:hover{
    color: white;background-color: #3c3c3c;
  }
~

Back