首页 > 资讯 > 正文

TradingView

2021-11-10 09:55:18
 
636

图标库内容

    +/charting_library
        + /static
        - charting_library.min.js
        - charting_library.min.d.ts
        - datafeed-api.d.ts
    + /datafeeds
        + /udf
    - index.html
    - mobile_black.html
    - mobile_white.html
    - test.html
  • /charting_library:图表库的相关文件。
  • /charting_library/static:文件夹中存储图表库内部资源。
  • /charting_library/charting_library.min.js:包含外部的 widget 接口,不应修改此文件。
  • /charting_library/charting_library.min.d.ts:包含 TypeScript 定义的 widget 接口。
  • /charting_library/datafeed-api.d.ts:包含 TypeScript 定义的 datafeed 接口。
  • /charting_library/datafeeds/udf/:包含 UDF-compatible 的 datafeed 包装类,datafeed 包装器类实现了脉冲实时仿真数据。
  • /index.html:为使用 Charting Library widget 的 html 例子。

连接数据

JavaScript API + UDF:用拉模型/脉冲/刷新为基础进行更新数据。

JavaScript API + WebSocket:使用推模型技术实时更新数据。

蓝色部分:必须的图表库部分。

红色部分:(默认数据传输)包含在默认包中(文件夹:/datafeeds/udf/),并可以被替换。

widget构造函数

    //禁用的组件名
    let disabledFeatures = [
        "left_toolbar",//左侧栏
        "header_undo_redo",//撤销、重做按钮
        "header_fullscreen_button",//全屏按钮
        "header_chart_type",//图表类型按钮
        "header_screenshot",//截屏按钮
        "header_symbol_search",//头部搜索按钮
        "header_compare",//比较按钮
        "header_indicators",//显示指标按钮
        "header_saveload",//保存、加载按钮
        "header_settings",//设置按钮
        "header_widget_dom_node",//顶部工具条
        "border_around_the_chart",//边框环绕
        "countdown",//倒计时
        "compare_symbol",
        "symbol_info",//商品信息
        "main_series_scale_menu",
        "study_dialog_search_control",
        "control_bar",//与图表底部的导航按钮相关联
        "hide_left_toolbar_by_default",//当用户第一次打开图表时,隐藏左侧工具栏
        "go_to_date",//左下角日期范围
        "edit_buttons_in_legend"
    ];

    //widget相关参数配置
    let widgetOptions = {
        datafeed: new ReadlTimeDataFeedBase(),//需自己实现的JsApi对象
        debug: true, //查看的库图表错误和警告
        fullscreen: true,//全屏
        symbol: '',//初始商品
        interval: '1',//周期:1分钟
        container_id: "tv_chart_container",//包含widget的DOM元素id
        library_path: "charting_library/",//static文件夹路径
        timezone: "Asia/Chongqing",//图表的初始时区
        locale: "zh",//本地语言
        drawings_access: {type: 'black', tools: [{name: "Regression Trend"}]},//使用在UI中看到的名称相同的名称
        disabled_features: disabledFeatures,//禁用的组件
        enabled_features: ["study_templates"],//启用数组
        charts_storage_url: 'http://saveload.tradingview.com',//高阶图表的保存、加载相关
        client_id: 'tradingview.com',//高阶图表的保存、加载相关
        user_id: 'public_user_id',//高阶图表的保存、加载相关
        charts_storage_api_version: "1.1",  //后台版本
        theme: 'Dark',//为图表添加自定义主题颜色
        loading_screen: {backgroundColor: "#125236"},//定制加载进度条
        timeframe:6M,//设置图表的初始时间范围
        time_frames: [//在图表底部的时间范围选择器中可以看见这个时间范围列表
            {text: "50y", resolution: "6M", description: "50 Years"},
            {text: "3y", resolution: "W", description: "3 Years", title: "3yr"},
            {text: "8m", resolution: "D", description: "8 Month"},
            {text: "3d", resolution: "5", description: "3 Days"}
        ],
        preset:[],//是一组预定义窗口小部件设置的名称
        width:600,//widget的尺寸
        height:600,
        symbol_search_request_delay:1000,//延迟阈值(毫秒),用户在搜索框中键入商品名称时减少商品搜索请求的数量
        autosize:false,//显示图表是否应使用容器中的所有可用空间,并在调整容器本身大小时自动调整大小
        toolbar_bg:blue,//工具栏背景颜色
        snapshot_url:'',//当用户按快照按钮时,使用base64编码将当前图表快照保存并返回URL
        indicators_file_name:''//包含您编写的指标的文件路径
    };

    //widget构造函数需放在onready方法中初始化。
    TradingView.onready(function () {
        new TradingView.widget(widgetOptions);
    });

JSAPI(基础)

创建一个实现JSAPI接口的对象,传递给Widget构造函数。

//JSAPI对象
let DataFeedBase = (function () {

        let _lastBar = {time: 0, open: 0, high: 0, low: 0, close: 0, volume: 0};
        let SymbolList = []; //正在订阅的对象数组

        /**
         * Widget初始化对象之后立即调用,提供填充配置数据的对象
         * @callback 回调函数
         */
        DataFeedBase.prototype.onReady = function (callback) {
            //默认配置
            let _configuration = {
                supports_search: false,
                supports_group_request: true,
                supported_resolutions: ['1', '5', '15', '30', '60', '1D', '1W', '1M'],//数据源支持哪些K线周期
                supports_marks: false,// 是否支持在K线上显示标记
                supports_timescale_marks: false,// 是否支持时间刻度标记
                supports_time: true
            };
            //回调函数参数为配置项
            callback(_configuration);
        };

        /**
         * 通过symbolName(Widget中的name)
         * 发送请求到服务器端,返回symbolInfo对象
         * 调用onResolve
         *
         * @symbolName 商品名
         * @onResolve 成功回调函数
         * @onError 错误回调函数
         */
        DataFeedBase.prototype.resolveSymbol = function (symbolName, onResolve,
                                                                  onError) {
            //发送的参数
            let requestParams = {
               name:symbolName
            };
            //请求symbolInfo对象:ajax或websocket
            let symbolInfo = ajax(url,requestParams);
            //调用回调函数,传入对象到TradingView
            onResolve(symbolInfo);
        };

        /**
         * 发送url到后端
         * 后端返回商品的在rangeStartDate—rangeEndDate区间的历史数据
         *
         * @symbolInfo 商品信息对象
         * @resolution 周期
         * @rangeStartDate 时间戳,最左边请求的K线时间
         * @rangeEndDate 时间戳, 最右边请求的K线时间
         * @onResult 历史数据回调函数
         * @onError 错误回调函数
         * @isFirstCall 标识是否第一次调用此商品/周期的历史记录
         */
        DataFeedBase.prototype.getBars = function (symbolInfo, resolution, rangeStartDate, rangeEndDate, onResult, onError,isFirstCall) {
            //参数信息
            let requestParams = {
                symbol: symbolInfo.ticker || '',//ticker:symbolInfo对象唯一标识
                resolution: resolution,//周期
                from: rangeStartDate,
                to: rangeEndDate,
            };
            //请求历史数据:ajax或websocket
            let dataList = ajax(url,requestParams);
            //调用回调方法,传入历史数据到TradingView
            onResult(formatDataList, {noData: false});
        };

        /**
         * 订阅商品
         *
         * @symbolInfo symbolInfo对象
         * @resolution 周期
         * @onTick 将我们更新的Bar传递给此回调以更新图表
         * @listenerGuid 此交易对的唯一ID和表示订阅的分辨率,生成规则:ticker+'_'+周期
         * @onResetCacheNeededCallback 调用次回调让图表再次请求历史K线数据
         */
        DataFeedBase.prototype.subscribeBars = function (symbolInfo, resolution, onTick, listenerGuid, onResetCacheNeededCallback) {
            //记录商品信息
            let newSymbol = {
                symbolName,//商品名
                listenerGuid,
                resolution,//周期
                symbolInfo,//商品信息对象
                lastBar: _lastBar,//k线的lastBar
                listener: onTick,//回调函数的引用
            };
            //存入记录数组
            SymbolList.push(newSymbol);
        };

        /**
         * 取消订阅商品
         * 
         * @listenerGuid 此交易对的唯一ID和表示订阅的分辨率,生成规则:ticker+'_'+周期
         */
        DataFeedBase.prototype.unsubscribeBars = function (listenerGuid) {
            //找出订阅的商品对象
            let symbolIndex = SymbolList.findIndex(listenerGuid);
            if (-1 == symbolIndex) {
                return;
            }
            //清除信息
            SymbolList.splice(symbolIndex,1);
        };

symbolInfo对象

var symbolInfo = {
        name : '',//商品名称,若不使用tickers,它将用于数据请求
        description : '',//商品说明,打印在图表的标题栏
        type : 'crypto',//仪表的可选类型:stock,index,forex,futures,bitcoin,expression,spread,cfd,或其他字符串
        session : '24x7",//商品交易时间
        timezone : 'Asia/Chongqing",//交易所时区
        ticker : '',//唯一标识符,值将用于所有数据请求,必须指定
        pricescale : 100000000,//交易对小数精度:8位
        has_intraday : true,//商品是否具有日内(分钟)历史数据
        intraday_multipliers : ,//包含日内周期(分钟单位)的数组
        supported_resolution : ["1", "3", "5", "15", "30", "60", "120", "240", "D"],//周期选择器中启用一个周期数组
        volume_precision : 8,//显示此商品成交量的小数位:8位
        data_status : 'endofday//数据状态码:streaming(实时)endofday(已收盘)pulsed(脉冲)delayed_streaming(延迟流动中)

}

demo页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script type="text/javascript" src="charting_library/charting_library.min.js"></script>
</head>
<body>
<div id="tv_chart_container" style="height: 700px;width: 1900px;"></div>
<script>

    let ReadlTimeDataFeedBase = (function () {

        ReadlTimeDataFeedBase.prototype.onReady = function (callback) {
            callback(this._configuration);
        };

        ReadlTimeDataFeedBase.prototype.resolveSymbol = function (symbolName, onResolve,
                                                                  onError) {
            ...
        };

        ReadlTimeDataFeedBase.prototype.getBars = function (symbolInfo, resolution, rangeStartDate, rangeEndDate, onResult, onError,isFirstCall) {
            ...
        };

        ReadlTimeDataFeedBase.prototype.subscribeBars = function (symbolInfo, resolution, onTick, listenerGuid, onResetCacheNeededCallback) {
            ...
        };

        ReadlTimeDataFeedBase.prototype.unsubscribeBars = function (listenerGuid) {
            ...
        };
        return ReadlTimeDataFeedBase;
    }());

    let widgetOptions = {
        datafeed: new ReadlTimeDataFeedBase(),
        container_id: "tv_chart_container",//包含widget的DOM元素id
        ...
    };

    TradingView.onready(function () {
        new TradingView.widget(widgetOptions);
    });
</script>
</body>
</html>

附上两个文档链接:

官方文档链接:https://github.com/tradingview/charting_library/wiki(需向官方申请)

中文文档链接:https://zlq4863947.gitbooks.io/tradingview/(转)

声明:
本文内容不代表斑马投诉网站观点,内容仅供参考,不构成投资建议。投资有风险,选择需谨慎! 如涉及内容、版权等问题,请联系我们,我们会在第一时间作出调整!