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

访问量: 77

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

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

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

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

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

申请下来了.

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

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

文档也在其中的wiki 里.  

学习资料太少了....可以5分钟搭建起一个图标,但是希望用我自己的数据,而不是 官方提供的UDP数据呢?完全找不到思路...网上的DEMO都是UDP的数据. 

也许是我的方向错了? 再搜一搜...

这个文章:两节课 使用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 跟我们理解的传统意义的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 发现远程接口返回空了,就知道: 哦, 查到最后一条了. 不查了.

如何关掉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 还不支持 .

更多样式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;
  }
~

订阅/RSS Feed

Subscribe

分类/category