修改TradingView高级实时图表组件的移动平均线周期

你只需要修改配置中的studies数组项，在SMA后通过括号指定周期参数即可：

原来的studies配置是：

"studies": [
  "STD;SMA"
],

将其修改为：

"studies": [
  "STD;SMA(length=50)"
],

修改后的完整代码 #

// TradingViewWidget.tsx
import { Box } from "@mui/material";
import React, { useEffect, useRef, memo } from "react";

const TechnicalAnalysis: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const script = document.createElement("script");
    script.src =
      "https://s3.tradingview.com/external-embedding/embed-widget-advanced-chart.js";
    script.type = "text/javascript";
    script.async = true;
    script.innerHTML = `
    {
      "autosize": true,
      "symbol": "CME:LBR1!",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "dark",
      "style": "1",
      "locale": "en",
      "hide_side_toolbar": false,
      "allow_symbol_change": true,
      "save_image": false,
      "calendar": false,
      "studies": [
        "STD;SMA(length=50)"
      ],
      "support_host": "https://www.tradingview.com"
    }`;

    containerRef.current.appendChild(script);
  }, []);

  return (
    <Box height="90vh" sx={{ border: "1px var(--black) solid" }}>
      <Box className="tradingview-widget-container" ref={containerRef}>
        <Box className="tradingview-widget-container__widget" />
      </Box>
    </Box>
  );
};

export default memo(TechnicalAnalysis);

原理说明：该Widget的studies参数支持在指标名称后通过括号传递配置参数，SMA指标的length参数用于控制周期天数，默认值为9，修改为50即可实现需求。

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