咨询:图表创建跳转至标的代码的链接及点击标的代码跳转对应图表可行性
图表中标的代码跳转实现方案
问题解答
两个问题本质都是实现点击图表上的标的代码(symbol)跳转至对应标的的图表页面,以下是具体实现方式:
1. 基于第三方图表工具(如TradingView)的实现
如果你使用的是自带筛选器(Screener)的成熟图表工具:
- 开启内置交互:在筛选器设置中找到「可点击标的代码」选项,勾选后图表上显示的symbol会自动变为可点击链接,点击直接跳转至该标的专属图表页面。
- 自定义跳转逻辑:若需要个性化规则,可通过工具提供的回调函数编写脚本实现,以TradingView Pine Script为例:
study("可点击标的代码", overlay=true) symbolName = tickerid if barstate.islast label.new(bar_index, high, symbolName, color=color.blue, textcolor=color.white, style=label.style_label_down)
之后在嵌入图表的页面中,通过JavaScript监听标签点击事件,拼接目标图表URL完成跳转。
2. 自定义开发的图表/筛选器实现
如果是自主开发的图表系统:
- 绑定点击事件:渲染标的代码时,将其包装为带标识的可点击DOM元素(如
<span class="clickable-symbol" data-symbol="XXX">XXX</span>)。 - 实现跳转逻辑:通过JavaScript监听点击事件,获取标的代码后拼接目标页面路由跳转,示例:
document.querySelectorAll('.clickable-symbol').forEach(el => { el.addEventListener('click', function() { const symbol = this.dataset.symbol; window.location.href = `/charts/${symbol}`; // 替换为你的图表页面路由 }); });
- 后端配合:确保后端能根据传入的symbol参数返回对应标的的图表数据页面。
内容的提问来源于stack exchange,提问作者Exlusivité Web
相关产品推荐
相关产品推荐

