如何在lightweight-charts或TradingView嵌入图表中用JS绘制线条、文本与图形？

你使用的TradingView嵌入组件支持通过Widget API实现线条、文本、图形的绘制，核心是调用createShape方法，以下是具体实现步骤：

1. 等待图表初始化完成 #

图表是异步加载的，必须在初始化完成后才能调用绘制API，通过onChartReady事件监听：

widget.onChartReady(function() {
  // 所有绘制操作放在这里执行
});

2. 各类图形的绘制示例 #

绘制水平线 #

widget.createShape({
  price: 30000,          // 线条对应的价格位置
  time: Date.now()/1000 - 3600, // 时间锚点（Unix时间戳，单位秒）
  shape: 'horizontal_line',
  color: '#FF0000',      // 线条颜色
  style: 2,              // 线条样式：1=实线，2=虚线，3=点线
  width: 2,              // 线条宽度
  text: '阻力位'         // 线条旁的标注文本
});

绘制文本标签 #

widget.createShape({
  price: 28000,
  time: Date.now()/1000,
  shape: 'label',
  text: '支撑区域',
  color: '#00FF00',      // 文本颜色
  background: '#000000', // 文本背景色
  fontSize: 12           // 字号大小
});

绘制矩形 #

widget.createShape({
  time: Date.now()/1000 - 7200,  // 矩形起始时间
  time2: Date.now()/1000,        // 矩形结束时间
  price: 27000,                  // 矩形起始价格
  price2: 29000,                 // 矩形结束价格
  shape: 'rectangle',
  color: '#0000FF',
  fill: true,                    // 是否填充
  fillColor: '#0000FF',
  fillTransparency: 50           // 填充透明度（0-100）
});

3. 整合到你的现有代码中 #

修改后的完整代码如下：

<div class="tradingview-widget-container">
  <div id="main"></div>
  <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSDT/?exchange=BINANCE"
      rel="noopener" target="_blank"><span class="blue-text">BTCUSDT chart</span></a> by TradingView</div>
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
    widget = new TradingView.widget(
      {
        "autosize": true,
        "symbol": "BINANCE:BTCUSDT",
        "interval": "1",
        "timezone": "Etc/UTC",
        "theme": "dark",
        "style": "1",
        "locale": "en",
        "toolbar_bg": "#f1f3f6",
        "enable_publishing": true,
        "withdateranges": true,
        "hide_side_toolbar": false,
        "allow_symbol_change": true,
        "details": true,
        "hotlist": true,
        "calendar": true,
        "container_id": "main"
      }
    );

    // 图表加载完成后执行绘制
    widget.onChartReady(function() {
      // 绘制阻力位水平线
      widget.createShape({
        price: 30000,
        time: Date.now()/1000 - 3600,
        shape: 'horizontal_line',
        color: '#FF0000',
        style: 2,
        width: 2,
        text: '阻力位'
      });

      // 绘制支撑区文本标签
      widget.createShape({
        price: 28000,
        time: Date.now()/1000,
        shape: 'label',
        text: '支撑区域',
        color: '#00FF00',
        background: '#000000',
        fontSize: 12
      });
    });
  </script>
</div>

4. 支持的图形类型 #

shape参数可取值包括：

• horizontal_line（水平线）、vertical_line（垂直线）
• label（文本标签）
• rectangle（矩形）、ellipse（椭圆）
• triangle_up（向上三角形）、triangle_down（向下三角形）
• arrow_up（向上箭头）、arrow_down（向下箭头）

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