如何为TradingView高级图表组件添加自定义Pine Script？

首先明确核心限制：你当前使用的TradingView公开嵌入版高级图表组件，不支持直接注入本地编写的Pine Script代码——因为Pine Script是运行在TradingView服务器端的逻辑，官方公开嵌入API未开放本地代码注入权限。以下是两种可行实现路径：

方案1：使用TradingView已发布指标（免费、官方推荐） #

这是公开组件唯一支持的自定义指标方式，步骤如下：

1. 在TradingView官网的Pine Editor中编写并测试你的自定义指标，完成后发布（可设为仅自己可见或公开）
2. 获取指标ID：发布后打开指标页面，URL中的script/后的字符串即为指标ID（例：页面URL为https://www.tradingview.com/script/XYZ123/，则ID为XYZ123）
3. 在嵌入组件配置中添加该指标：修改widget初始化参数，在studies数组中加入格式为STD;指标ID的项

示例纯JS代码（适配任意前端框架）：

<div id="tradingview-chart"></div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
  "container_id": "tradingview-chart",
  "width": "100%",
  "height": 600,
  "symbol": "NYSE:SPY",
  "interval": "D",
  "studies": ["STD;XYZ123"], // 替换为你的指标ID
  "theme": "dark",
  "locale": "zh_CN"
});
</script>

若设置为私有指标，需在TradingView后台配置该指标的嵌入授权域名，确保你的页面域名在允许列表内。

方案2：使用TradingView Charting Library（付费专业方案） #

如果必须实现直接加载本地Pine Script代码的需求，只能选择TradingView官方的付费Charting Library：

• 该库提供addCustomIndicator方法，可直接传入未发布的Pine Script代码
• 示例代码片段：

// 初始化Charting Library实例后执行
chart.addCustomIndicator(
  {
    script: `//@version=5
    indicator("自定义均线")
    ma20 = ta.sma(close, 20)
    plot(ma20, color=color.new(color.blue, 0))`
  },
  {} // 可选：指标参数配置对象
);

此方案需向TradingView申请商业授权，不属于免费公开服务范畴。

NextJS适配提示（方案1） #

在NextJS中使用时，需通过useEffect避免SSR渲染问题，示例组件代码：

import { useEffect } from 'react';

export default function CustomTradingViewChart() {
  useEffect(() => {
    const tvScript = document.createElement('script');
    tvScript.src = 'https://s3.tradingview.com/tv.js';
    tvScript.async = true;
    tvScript.onload = () => {
      new window.TradingView.widget({
        container_id: 'tv-chart-container',
        symbol: 'NASDAQ:AAPL',
        interval: '60',
        studies: ['STD;你的指标ID'],
        // 其他配置项...
      });
    };
    document.body.appendChild(tvScript);

    return () => {
      document.body.removeChild(tvScript);
      document.getElementById('tv-chart-container').innerHTML = '';
    };
  }, []);

  return <div id="tv-chart-container" className="w-full h-[600px]" />;
}

内容的提问来源于stack exchange，提问作者Aneeq Ur Rehman Shafique