修复行情区 MACD/RSI 副图分区与 scaleMargins 布局错误

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/chart.js

@@ -447,48 +447,42 @@
     const macdOn = indicatorState.macd;
     if (!rsiOn && !macdOn) {
       return {
-        candleBottom: CANDLE_SCALE_BOTTOM,
-        volTop: VOLUME_SCALE_TOP,
-        volBottom: VOLUME_SCALE_BOTTOM,
-        macdTop: null,
-        macdBottom: null,
-        rsiTop: null,
-        rsiBottom: null,
-        rsiOn: false,
-        macdOn: false,
+        candle: { top: 0.06, bottom: CANDLE_SCALE_BOTTOM },
+        volume: { top: VOLUME_SCALE_TOP, bottom: VOLUME_SCALE_BOTTOM },
+        macd: null,
+        rsi: null,
       };
     }
-    let stackH = 0;
-    if (rsiOn) stackH += PANEL_RSI_H;
-    if (macdOn) stackH += PANEL_MACD_H;
-    const volBottom = VOLUME_SCALE_BOTTOM + stackH;
-    const volTop = volBottom + PANEL_VOL_H;
-    let rsiTop = null;
-    let rsiBottom = null;
-    let macdTop = null;
-    let macdBottom = null;
-    let cursor = VOLUME_SCALE_BOTTOM;
+
+    const gap = 0.02;
+    let stackBottom = gap;
+    let rsiMargins = null;
+    let macdMargins = null;
+
     if (rsiOn) {
-      rsiBottom = cursor;
-      rsiTop = cursor + PANEL_RSI_H;
-      cursor = rsiTop;
+      rsiMargins = {
+        top: 1 - stackBottom - PANEL_RSI_H,
+        bottom: stackBottom,
+      };
+      stackBottom += PANEL_RSI_H;
     }
     if (macdOn) {
-      macdBottom = cursor;
-      macdTop = cursor + PANEL_MACD_H;
-      cursor = macdTop;
+      macdMargins = {
+        top: 1 - stackBottom - PANEL_MACD_H,
+        bottom: stackBottom,
+      };
+      stackBottom += PANEL_MACD_H;
     }
-    const candleBottom = Math.max(CANDLE_SCALE_BOTTOM, volTop + 0.02);
+
+    const volBottom = stackBottom;
+    const volTop = 1 - volBottom - PANEL_VOL_H;
+    const candleBottom = Math.max(CANDLE_SCALE_BOTTOM, 1 - volTop + 0.01);
+
     return {
-      candleBottom,
-      volTop,
-      volBottom,
-      macdTop,
-      macdBottom,
-      rsiTop,
-      rsiBottom,
-      rsiOn,
-      macdOn,
+      candle: { top: 0.06, bottom: candleBottom },
+      volume: { top: volTop, bottom: volBottom },
+      macd: macdMargins,
+      rsi: rsiMargins,
     };
   }
 
@@ -496,21 +490,24 @@
     if (!chart) return;
     const L = panelLayout();
     chart.priceScale("right").applyOptions({
-      scaleMargins: { top: 0.06, bottom: L.candleBottom },
+      scaleMargins: L.candle,
     });
-    chart.priceScale("volume").applyOptions({
-      scaleMargins: { top: L.volTop, bottom: L.volBottom },
-    });
-    if (L.macdOn && L.macdTop != null) {
-      chart.priceScale("macd").applyOptions({
-        scaleMargins: { top: L.macdTop, bottom: L.macdBottom },
+    if (volumeSeries && volumeSeries.priceScale) {
+      volumeSeries.priceScale().applyOptions({
+        scaleMargins: L.volume,
+        borderColor: "#2a4058",
+      });
+    }
+    if (indSeries.macdLine && indSeries.macdLine.priceScale) {
+      indSeries.macdLine.priceScale().applyOptions({
+        scaleMargins: L.macd,
         borderColor: "#2a4058",
         autoScale: true,
       });
     }
-    if (L.rsiOn && L.rsiTop != null) {
-      chart.priceScale("rsi").applyOptions({
-        scaleMargins: { top: L.rsiTop, bottom: L.rsiBottom },
+    if (indSeries.rsi && indSeries.rsi.priceScale) {
+      indSeries.rsi.priceScale().applyOptions({
+        scaleMargins: L.rsi,
         borderColor: "#2a4058",
         autoScale: true,
       });
@@ -550,7 +547,6 @@
     readIndicatorState();
     clearIndicatorSeries();
     divergenceMarkers = [];
-    applyScaleLayout();
 
     if (indicatorState.ema) {
       const pf = tickToPriceFormat(priceTick);
@@ -580,13 +576,21 @@
         color: "#5b9cf5",
         title: "MACD",
         priceScaleId: "macd",
+        priceLineVisible: false,
+        lastValueVisible: false,
       });
       indSeries.macdSignal = createLineSeries({
         color: "#ffb84d",
         title: "Signal",
         priceScaleId: "macd",
+        priceLineVisible: false,
+        lastValueVisible: false,
+      });
+      indSeries.macdHist = createHistSeries({
+        priceScaleId: "macd",
+        priceLineVisible: false,
+        lastValueVisible: false,
       });
-      indSeries.macdHist = createHistSeries({ priceScaleId: "macd" });
       if (indSeries.macdLine) indSeries.macdLine.setData(macd.macdLine);
       if (indSeries.macdSignal) indSeries.macdSignal.setData(macd.signalLine);
       if (indSeries.macdHist) indSeries.macdHist.setData(macd.histData);
@@ -598,9 +602,11 @@
       const rsiPack = buildRsiByIndex(lastCandles, 14);
       indSeries.rsi = createLineSeries({
         color: "#8fc8ff",
-        title: "RSI",
+        title: "RSI(14)",
         priceScaleId: "rsi",
         priceFormat: { type: "price", precision: 1, minMove: 0.1 },
+        priceLineVisible: false,
+        lastValueVisible: true,
       });
       if (indSeries.rsi) {
         indSeries.rsi.setData(rsiPack.series);
@@ -629,6 +635,7 @@
 
     updateDivergenceLegend(rsiDiv, macdDiv);
     applyCandleDivergenceMarkers();
+    applyScaleLayout();
     scheduleChartResize();
   }
 
@@ -1093,7 +1100,7 @@
 
     const volOpts = {
       priceFormat: { type: "volume" },
-      priceScaleId: "volume",
+      priceScaleId: "",
       lastValueVisible: false,
     };
     if (typeof chart.addHistogramSeries === "function") {
@@ -1107,9 +1114,6 @@
     }
     if (!volumeSeries) return false;
 
-    chart.priceScale("macd");
-    chart.priceScale("rsi");
-
     applyScaleLayout();
     applyChartPriceFormat();
     applyPriceAutoScale();