React Plotly多子图如何共享缩放状态

要实现垂直堆叠的3个子图同步缩放X轴，核心是让所有子图的X轴关联起来，你当前代码里的grid.pattern: "independent"是导致子图交互独立的关键，调整以下几点即可满足需求：

• 将grid.pattern改为"coupled"，让同列子图共享X轴交互逻辑
• 为xaxis2和xaxis3添加matches: 'x'属性，指定它们匹配第一个X轴的缩放、平移行为
• 可简化重复的domain配置，coupled模式下子图会自动对齐宽度

修改后的完整代码：

import Plot from "react-plotly.js";
import { useMemo } from "react";

function MyComponent() {

  const layout = useMemo(
    (): Partial<Plotly.Layout> => ({
      grid: { rows: 3, columns: 1, pattern: "coupled" },
      autosize: true,
      xaxis: { 
        anchor: "y", 
        showticklabels: false
      },
      xaxis2: { 
        anchor: "y2", 
        showticklabels: false,
        matches: 'x'
      },
      xaxis3: {
        anchor: "y3",
        showticklabels: true,
        matches: 'x',
        title: {
          text: "Time",
          font: {
            size: 16,
          },
        },
      },
      yaxis: {
        anchor: "x",
        domain: [0.67, 0.93],
      },
      yaxis2: {
        anchor: "x2",
        domain: [0.33, 0.59],
      },
      yaxis3: {
        anchor: "x3",
        domain: [0, 0.26],
      },

      margin: {
        t: 15,
        b: 75,
        l: 80,
      },
      legend: {
        x: 1,
        y: 0.5,
      }
    }), []
  );

  return (
    <Plot layout={layout} config={{ autosizable: true }} data={[...]} />
  )

}

关键说明： #

• grid.pattern: "coupled"：此配置会让同列的子图自动共享X轴交互，同行子图共享Y轴交互，适配垂直堆叠的场景
• matches: 'x'：显式绑定子图X轴与主X轴的交互状态，确保缩放、平移操作完全同步
• 移除了重复的domain: [0, 0.99]，coupled模式下子图会自动占据容器全宽，无需手动指定

测试时缩放任意一个子图的X轴，另外两个子图会同步按相同比例缩放，完全符合需求。

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