Google Visualizations甘特图标签位置修改后复位问题求助

问题根源 #

Google Visualizations的Gantt图表会在窗口缩放、数据更新等场景下自动重绘，重绘时会重置所有SVG元素属性，导致手动修改的标签位置和颜色被覆盖。此外你当前代码存在嵌套绑定ready事件和依赖固定DOM索引的问题：前者会导致逻辑触发混乱，后者会因图表结构变动导致选择器失效。

解决步骤 #

• 把标签修改逻辑封装成独立函数，避免重复代码
• 使用MutationObserver监听SVG元素变化，图表重绘后自动重新应用修改
• 替换脆弱的DOM索引选择器，改用更稳定的属性/层级选择器定位元素

修改后的代码 #

<Chart
  chartType="Gantt"
  data={dt}
  height={1600}
  chartEvents={[
    {
      eventName: "ready",
      callback: e => {
        const container = document.getElementById("chart_div");
        const svg = container.getElementsByTagName("svg")[0];
        const chart = e.chartWrapper.getChart();

        // 封装标签修改逻辑
        const updateTaskLabels = () => {
          // 定位任务条矩形（通过fill-opacity区分任务条和背景）
          const taskRects = svg.querySelectorAll("rect[fill-opacity='1']");
          taskRects.forEach(rect => {
            // 找到同一组内的标签文本
            const parentGroup = rect.closest("g");
            if (!parentGroup) return;
            const labelText = parentGroup.querySelector("text");
            if (!labelText) return;

            // 计算新的x坐标
            let x = parseFloat(rect.getAttribute("x")) - parseFloat(rect.getAttribute("width")) / 2;
            if (x < 100) {
              x += 900;
            } else if (x > 1200) {
              x -= 300;
            }

            // 应用自定义样式和位置
            labelText.setAttribute("fill", "#211BF1");
            labelText.setAttribute("transform", `translate(${x})`);
          });
        };

        // 首次加载执行一次
        updateTaskLabels();

        // 监听SVG元素变化，重绘后自动更新
        const observer = new MutationObserver((mutations) => {
          if (mutations.some(m => m.type === "attributes" || m.addedNodes.length > 0)) {
            updateTaskLabels();
          }
        });

        observer.observe(svg, {
          attributes: true,
          childList: true,
          subtree: true,
          attributeFilter: ["transform", "fill"]
        });

        // 图表销毁时清理监听，避免内存泄漏
        window.google.visualization.events.addListener(chart, "destroy", () => {
          observer.disconnect();
        });
      }
    },
    {
      eventName: "select",
      callback: e => {
        if (email !== "oneweb@umich.edu") return;
        const selection = e.chartWrapper.getChart().getSelection()[0];
        if (selection) {
          handleClickOpen(dt[selection.row + 1]);
        }
      }
    }
  ]}
/>

关键改动说明 #

1. 独立修改函数：将标签样式和位置的修改逻辑封装为updateTaskLabels，方便重复调用。
2. 稳定元素选择：通过rect[fill-opacity='1']定位任务条，再通过父组关联标签文本，彻底摆脱对固定DOM索引的依赖。
3. MutationObserver监听：监控SVG的子元素和属性变化，一旦图表重绘重置标签，就自动重新应用自定义设置。
4. 内存泄漏防护：绑定destroy事件，在图表销毁时断开Observer监听。
5. select事件优化：增加选择项存在性判断，避免无选择时触发报错。

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