您的位置: 首页  >  文章  >  tradingview教程 charting_library

tradingview教程 charting_library

分类: 文章 • 2023-12-18 20:13:04

摸索了10几天tradingview终于搞出来了
记录一下;

  1. tradingview 是一个封装度比较高的框架，也是一个比较专业的行情JS插件，有着各种指标比如：成交量，移动平均线等，可在PC、H5中完美运行！

  2. tradingview 是需要申请才能给你用的，申请过程还挺麻烦，我这里有申请下来的版本，V15，可以提供；

  3. tradingview 只接受两种给数据的方式：一种是JS-API，一种是UDF稍微解释一下： JS-API:在页面中用JS实现适配，DIY程度较高，这种方式JS工作量会高一些，推荐这种写法； UDF：tradingview
    自己有一套写好的接口，按照tradingview
    规定的API名称写实现接口的功能，这种方法后端工作量大，可以用后端语言，java,go等等去实现；
    如图逻辑：tradingview教程 charting_library

  4. 我这里只讲JS-API，围绕我的Demo讲，Demo加我微信会给出，demo效果如图所示：
    tradingview教程 charting_library

  5. 首先看mychart.vue文件 changeChart方法接受一个 商品id,和时间跨度（分钟，日，周，月等） 然后商品信息传递给 drawKLineChart，这里面要根据商品信息初始化Datafeeds（数据适配器）“this”不是必须的那是我为了让内部能调用到当前对象的方法才传的；然后就是使用widget构造器创建，TradingView实例构造器配置在config.js文件的tradeViewOptions

  6. 当图表实例初始化并准备就绪时会调用onChartReady，可以在这里安全的设置指标、订阅、监听事件等等；

  7. getTVOCHL方法是为了实现图表上面的高开低收，因为自带的高开低收太丑所以我就自己实现了，这个可选；

  8. DataFeeds/index.js，这个文件是官方的JS-api接口，不多说有注释；

  9. DataFeeds/barsUpdater.js 这个文件是数据适配器了，用来更新和请求数据的初始化 页码（翻页用到）订阅者对象（包含商品信息，和更新商品数据等方法） 最后一条数据 （一些实时更新分秒图取数据可能用到）；

  10. 设置商品数据时用getAllBars，在这个方法里面可以根据商品去请求行情数据，请求完成数据用onDataCallback回调设置数据，假如到最后一页没有数据了可以onDataCallback([],
    { noData: true });告诉tradingview
    没有数据了，第一次可以先加载一页的数据，用户滑动到空白处时tradingview 会自动调用getAllBars方法；

  11. demo里面使用了 fmtData方法来创建模拟数据

  12. 到这里也就基本能跑通了，更加详细是肯定写不完的，有问题的好好翻文档吧；

  13. 一些常见的坑或者要注意的地方：
    a.tradingview很多元素是可以css覆盖的，觉得自带的吃藕的话，自己审查元素然后覆盖，配置自定义css的地方在构造器的custom_css_url参数这里；

    b.去掉logo disabled_features中禁用 widget_logo，这个仅供自己学习用，未授权去掉logo商用会有法律责任！
    c.tradingview框架是外国人创造的，外国股市都是绿涨红跌，但中国却相反！框架默认是绿涨红跌为了符合国人习惯请设置柱状图颜色！不然会出大事！在构造器的studies_overrides中添加’volume.volume.color.0’: ‘rgba(29, 178,112,1)’,‘volume.volume.color.1’: ‘rgba(239, 64, 52, 1)’;

    d.无限加载问题：用户滑动到下一页或者页面初始化时画面一直闪，可能是一次请求数据过少，试一试时间跨度大一点让数据多一些，无数据时及时调用onDataCallback([],{ noData: true })； d.这里是买它的分析软件，不是授权这个tradingview 框架，别买错了
    tradingview教程 charting_library
    e.该框架没有任何官方中文的文档，网络上的中文文档是大神翻译过来的，如果你的版本过高可能不适用一些功能；原文档链接https://github.com/tradingview/charting_library/wiki但是现在已经404，最新的鄙人也不知道在哪;

    f.中文文档(大神翻译)：https://b.aitrade.ga/books/lightweight-charts-docs-cn/

    g.仓库：https://github.com/zlq4863947/proficient-tradingview

    h.在线阅读：https://b.aitrade.ga/books/proficient-tradingview

    i.有****是大神制作出来的，售价3000人民币（买过的人说没啥用），QQ群也是付费交流群；

    j.可以加我微信要这个demo, 请备注来意
    tradingview教程 charting_library

相关推荐