在 TradingView 图表小部件上绘制水平直线

Question

你好

我已将 TradingView 高级实时图表小部件添加到我的 React 加密项目中。我在图表上画线时遇到问题，从后端我得到一系列价格，我必须在该水平的图表上画线。我看到了 TradingView 轻量级图表库，但它没有提供我需要的所有期货（绘图、写作等）。

例如，从后端我得到价格 29000，我必须使用代码而不是小部件工具在 29000 水平上画线。

线路视图

图表组件代码：

/* eslint-disable new-cap */
/* eslint-disable no-return-assign */
/* eslint-disable no-new */
/* eslint-disable @typescript-eslint/no-use-before-define */
import React, { useEffect, useRef } from "react"
import s from "./Chart.module.scss"

let tvScriptLoadingPromise

export default function Chart() {
  const onLoadScriptRef = useRef()

  useEffect(() => {
    onLoadScriptRef.current = createWidget

    if (!tvScriptLoadingPromise) {
      tvScriptLoadingPromise = new Promise((resolve) => {
        const script = document.createElement("script")
        script.id = "tradingview-widget-loading-script"
        script.src = "https://s3.tradingview.com/tv.js"
        script.type = "text/javascript"
        script.onload = resolve

        document.head.appendChild(script)
      })
    }

    tvScriptLoadingPromise.then(
      () => onLoadScriptRef.current && onLoadScriptRef.current()
    )

    return () => (onLoadScriptRef.current = null)

    function createWidget() {
      if (
        document.getElementById("tradingview_81848") &&
        "TradingView" in window
      ) {
        const widget = new window.TradingView.widget({
          width: 1000,
          height: 680,
          symbol: "BINANCE:BTCUSDT",
          interval: "D",
          timezone: "Etc/UTC",
          theme: "dark",
          style: "1",
          locale: "en",
          toolbar_bg: "#f1f3f6",
          enable_publishing: false,
          hide_side_toolbar: false,
          allow_symbol_change: true,
          container_id: "tradingview_81848",
        })
      }
    }
  }, [])

  return (
    <div className="tradingview-widget-container">
      <div id="tradingview_81848" />
    </div>
  )
}

我没有找到任何小部件的 api 或文档，因此我将感谢您的帮助。另外，如果您知道任何类似 Chart 的图表库并且可以轻松自定义，请随时分享链接。感谢您的关注和帮助。

Answer 1

你找到解决办法了吗？我面临着完全相同的问题..