多图表超出视口高度时光标同步引发页面滚动的解决方法

当使用Recharts的syncId配置同步光标，且图表总高度超出视口时，默认行为会触发页面滚动以确保所有同步图表可见。以下是几种可行的解决办法：

1. 手动同步光标，绕过Recharts默认滚动逻辑 #

放弃依赖Recharts内置的syncId同步机制，通过父组件维护光标位置状态，手动传递给所有图表的Cursor组件。这种方式完全避免了Recharts自带的滚动触发逻辑。

示例代码：

import { useState, useRef } from 'react';
import { LineChart, Line, XAxis, YAxis, Cursor } from 'recharts';

const App = () => {
  const [hoverX, setHoverX] = useState(null);
  const chartRef1 = useRef(null);
  const chartRef2 = useRef(null);
  const data = [{name: 'A', value: 10}, {name: 'B', value: 20}, {name: 'C', value: 15}];

  // 监听鼠标移动，计算当前图表内的X坐标
  const handleChartMouseMove = (e, chartRef) => {
    const bounds = chartRef.current.getBoundingClientRect();
    const x = e.clientX - bounds.left;
    setHoverX(x);
  };

  return (
    <div>
      <div ref={chartRef1} onMouseMove={(e) => handleChartMouseMove(e, chartRef1)}>
        <LineChart width={600} height={300} data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <Line type="monotone" dataKey="value" stroke="#8884d8" />
          <Cursor x={hoverX} />
        </LineChart>
      </div>
      {/* 其他图表复用相同逻辑，共享hoverX状态 */}
      <div ref={chartRef2} onMouseMove={(e) => handleChartMouseMove(e, chartRef2)}>
        <LineChart width={600} height={300} data={data}>
          <XAxis dataKey="name" />
          <YAxis />
          <Line type="monotone" dataKey="value" stroke="#82ca9d" />
          <Cursor x={hoverX} />
        </LineChart>
      </div>
    </div>
  );
};

2. 覆盖scrollIntoView方法，阻止图表滚动 #

Recharts同步时会调用图表元素的scrollIntoView方法，通过重写该方法并过滤图表元素，可以阻止自动滚动行为。

示例代码：

import { useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, Cursor } from 'recharts';

const App = () => {
  const data = [{name: 'A', value: 10}, {name: 'B', value: 20}, {name: 'C', value: 15}];

  useEffect(() => {
    // 保存原生方法
    const originalScrollIntoView = Element.prototype.scrollIntoView;
    
    // 重写方法，仅非Recharts图表元素允许滚动
    Element.prototype.scrollIntoView = function(options) {
      if (!this.closest('.recharts-wrapper')) {
        originalScrollIntoView.call(this, options);
      }
    };

    // 组件卸载时恢复原生方法
    return () => {
      Element.prototype.scrollIntoView = originalScrollIntoView;
    };
  }, []);

  return (
    <div>
      <LineChart width={600} height={300} data={data} syncId="sync-group">
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
        <Cursor />
      </LineChart>
      <LineChart width={600} height={300} data={data} syncId="sync-group">
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="#82ca9d" />
        <Cursor />
      </LineChart>
    </div>
  );
};

3. 限制同步范围，仅同步可视区域内的图表 #

监听页面滚动，判断哪些图表处于可视区域，仅对这些图表启用syncId，避免Recharts尝试滚动到不可见的图表。

示例代码：

import { useState, useEffect } from 'react';
import { LineChart, Line, XAxis, YAxis, Cursor } from 'recharts';

const App = () => {
  const [visibleChartIds, setVisibleChartIds] = useState([]);
  const chartIds = ['chart-1', 'chart-2', 'chart-3'];
  const data = [{name: 'A', value: 10}, {name: 'B', value: 20}, {name: 'C', value: 15}];

  useEffect(() => {
    const checkVisibility = () => {
      const visible = chartIds.filter(id => {
        const chart = document.getElementById(id);
        if (!chart) return false;
        const bounds = chart.getBoundingClientRect();
        // 判断元素是否部分或完全在视口内
        return bounds.top < window.innerHeight && bounds.bottom > 0;
      });
      setVisibleChartIds(visible);
    };

    window.addEventListener('scroll', checkVisibility);
    checkVisibility(); // 初始检查

    return () => window.removeEventListener('scroll', checkVisibility);
  }, [chartIds]);

  return (
    <div>
      {chartIds.map(id => (
        <div id={id} key={id}>
          <LineChart 
            width={600} 
            height={300} 
            data={data}
            // 仅可视图表启用同步
            syncId={visibleChartIds.includes(id) ? 'sync-group' : undefined}
          >
            <XAxis dataKey="name" />
            <YAxis />
            <Line type="monotone" dataKey="value" stroke="#8884d8" />
            <Cursor />
          </LineChart>
        </div>
      ))}
    </div>
  );
};

4. 自定义Tooltip定位，避免触发滚动 #

如果滚动是由同步Tooltip导致的，可以通过自定义Tooltip的定位逻辑，将其限制在当前图表范围内，避免Recharts为显示Tooltip而触发页面滚动。

示例代码：

import { LineChart, Line, XAxis, YAxis, Cursor, Tooltip } from 'recharts';

const App = () => {
  const data = [{name: 'A', value: 10}, {name: 'B', value: 20}, {name: 'C', value: 15}];

  return (
    <div>
      <LineChart width={600} height={300} data={data} syncId="sync-group">
        <XAxis dataKey="name" />
        <YAxis />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
        <Cursor />
        <Tooltip
          // 自定义定位函数，基于当前图表位置计算Tooltip坐标
          position={(point, props) => {
            const chartBounds = props.chartWrapper.getBoundingClientRect();
            return {
              top: chartBounds.top + 10,
              left: point.x + chartBounds.left
            };
          }}
          // 设置Tooltip为绝对定位，避免脱离图表容器
          wrapperStyle={{ position: 'absolute', zIndex: 10 }}
        />
      </LineChart>
    </div>
  );
};

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