TradingView 1.13未来绘制坐标获取及无K线区域绘图问题咨询

1. 未来坐标正确获取方式 #

放弃使用K线数组索引作为坐标基准，1.13版本支持通过时间戳定位绝对点位：

• 调用chart.timeScale().getVisibleRange()获取当前可视区域的时间范围，取to字段即为最新一根K线的结束时间戳（毫秒级）
• 根据当前K线周期计算未来点位的时间戳，比如1小时周期每根K线间隔为3600 * 1000毫秒，要定位到往后第N根K线的位置，时间戳为最新结束时间戳 + N * 周期毫秒数
• 所有linetool的x坐标直接传入计算得到的时间戳即可，不受K线实时新增的影响

2. 无数据区绘图异常+Bybit环境限制修复 #

在初始化配置中新增配置项解锁无数据区绘图权限，同时使用绝对点位创建图形：

• 在disabled_features数组中加入lock_no_data_range_drawings，关闭TradingView默认的无数据区绘图限制，即可解决Bybit环境下无法在无K线区域绘图的问题
• 创建linetool时使用setPoints方法传入{time: 时间戳, price: 价格}格式的绝对点位，不要使用相对坐标，即可避免线条垂直的问题
• 恢复历史绘制的图形时直接复用历史存储的点位时间戳即可，不需要额外转换，即使对应时间暂无K线数据也能正常渲染

修改后的初始化代码示例 #

const widgetOptions = {
    debug: false,
    symbol: this.props.symbol,
    datafeed: Datafeed,
    interval: this.props.interval,
    container_id: this.props.containerId,
    library_path: this.props.libraryPath,
    locale: getLanguageFromURL() || 'en',
    // 新增lock_no_data_range_drawings禁用项解锁无数据区绘图
    disabled_features: ['use_localstorage_for_settings', 'lock_no_data_range_drawings'],
    enabled_features: ['study_templates'],
    charts_storage_url: this.props.chartsStorageUrl,
    charts_storage_api_version: this.props.chartsStorageApiVersion,
    client_id: this.props.clientId,
    user_id: this.props.userId,
    fullscreen: this.props.fullscreen,
    autosize: this.props.autosize,
    studies_overrides: this.props.studiesOverrides,
    overrides: {
        "mainSeriesProperties.showCountdown": true,
        "paneProperties.background": "#131722",
        "paneProperties.vertGridProperties.color": "#363c4e",
        "paneProperties.horzGridProperties.color": "#363c4e",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor" : "#AAA",
        "mainSeriesProperties.candleStyle.wickUpColor": '#336854',
        "mainSeriesProperties.candleStyle.wickDownColor": '#7f323f',
    }
};

Datafeed.onReady(() => {
    const widget = (window.tvWidget = new window.TradingView.widget(widgetOptions));
    widget.onChartReady(() => {
        console.log('Chart has loaded!')
        // 示例：在未来第2根1小时K线位置画水平线
        const chart = widget.chart();
        const timeScale = chart.timeScale();
        const visibleRange = timeScale.getVisibleRange();
        const latestTime = visibleRange.to;
        // 1小时周期毫秒数 3600*1000
        const futureTime = latestTime + 2 * 3600000;
        // 创建linetool
        const line = chart.createShape(
            {time: futureTime, price: 28000},
            {
                shape: "horizontal_line",
                lock: false,
                disableSelection: false,
                disableDrag: false
            }
        );
    });
});

内容的提问来源于stack exchange，提问作者kausmil