TradingView Charting Library：如何修改已创建标记的形状与位置

我已经通过TradingView Charting Library的getMarks函数创建了标记，当前是默认的标记样式，现在需要把标记修改为指定的形状和位置（类似在K线对应价格位置显示箭头或特定形状的标记）。以下是我目前的getMarks函数代码：

getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
    var arr = [
        {
            id: 1,
            time:  1683185400000 / 1000,
            color: 'yellow',
            text: ['hello'],
            label: 'how',
            labelFontColor: 'black',
            minSize: 20,
            // shape: 'rectangle',
        },
        {
            id: 2,
            time:  1681975800000 / 1000,
            color: 'red',
            text: '400',
            label: 'c',
            labelFontColor: 'green',
            minSize: 20,
        },
        {
            id: 3,
            time:  1681111800000 / 1000,
            color: 'yellow',
            text: '500',
            label: 'd',
            labelFontColor: 'white',
            minSize: 20,
        },
    ]
   
    onDataCallback(arr);
},

修改方案 #

要实现目标的形状和位置效果，需要给每个标记对象添加以下关键属性：

• shape：定义标记的形状，可选值有arrowUp、arrowDown、circle、square等，对应你需要的箭头或特定图形
• price：绑定标记到指定价格位置，这样标记会显示在对应K线的价格点上，而非默认的时间轴区域
• position：控制标记相对于K线的位置，可选aboveBar（K线上方）、belowBar（K线下方）、inBar（K线内部）

修改后的代码示例 #

getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
    var arr = [
        {
            id: 1,
            time:  1683185400000 / 1000,
            color: 'yellow',
            text: ['hello'],
            label: 'how',
            labelFontColor: 'black',
            minSize: 20,
            shape: 'arrowUp', // 设置为向上箭头
            price: 180, // 绑定到对应价格（请替换为实际需要的价格值）
            position: 'aboveBar' // 显示在K线上方
        },
        {
            id: 2,
            time:  1681975800000 / 1000,
            color: 'red',
            text: '400',
            label: 'c',
            labelFontColor: 'green',
            minSize: 20,
            shape: 'arrowDown', // 设置为向下箭头
            price: 160, // 绑定到对应价格
            position: 'belowBar' // 显示在K线下方
        },
        {
            id: 3,
            time:  1681111800000 / 1000,
            color: 'yellow',
            text: '500',
            label: 'd',
            labelFontColor: 'white',
            minSize: 20,
            shape: 'circle', // 设置为圆形标记
            price: 170, // 绑定到对应价格
            position: 'inBar' // 显示在K线内部
        },
    ]
   
    onDataCallback(arr);
},

说明 #

• 请根据实际需求替换price字段的数值，确保和对应时间点的K线价格匹配
• 如果需要自定义形状，还可以结合customShape属性（需配合SVG路径定义），不过基础形状已经能覆盖大部分需求

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