React Google Charts图表持续重渲染及Tooltip异常问题求助

问题1：图表持续重渲染 #

每次组件渲染时，options对象都会被重新创建，React会判定Chart组件的options prop发生变化，进而触发重复渲染。如果父组件传递的data是每次渲染都重新生成的数组/对象，也会导致同样问题。

解决方法： #

用useMemo缓存options和传入的data（如果父组件未做处理），确保只有依赖项变化时才重新生成：

import React, { useMemo } from "react";
import { Chart } from "react-google-charts";

export const AreaChart = ({ data }) => {
  // 缓存options，无依赖项则仅生成一次
  const options = useMemo(() => ({
    title: "Heart Rate",
    hAxis: { maxValue: 500, minValue: 0, baselineColor: "transparent" },
    vAxis: {
      gridlines: { color: "grey", minSpacing: 10, count: 1 },
      minorGridlines: { color: "grey", count: 0 },
      maxValue: 120,
      minValue: 0,
      baselineColor: "transparent",
    },
    curveType: "function",
    legend: { position: "none" },
    chartArea: { width: "80%", height: "90%" },
    areaOpacity: 0.2,
    colors: ["red", "green"],
    // 同时配置Tooltip修复拉伸问题
    tooltip: {
      isHtml: true,
      style: {
        maxWidth: "auto",
        whiteSpace: "nowrap"
      }
    }
  }), []);

  // 缓存data，避免父组件传递不稳定引用导致重渲染
  const memoizedData = useMemo(() => data, [data]);

  return (
    <Chart
      chartType="AreaChart"
      width="100%"
      height="90px"
      data={memoizedData}
      options={options}
    />
  );
};

问题2：Tooltip被拉伸至图表全宽 #

这通常是全局CSS样式污染了Google Charts生成的Tooltip元素，或者默认Tooltip样式未限制宽度。

解决方法： #

1. 如上代码中配置tooltip属性，开启HTML Tooltip并强制宽度随内容自适应。
2. 检查全局CSS是否存在div { width: 100% !important }这类强制宽度的规则，避免影响Chart内部元素。
3. 若仍有问题，可添加全局CSS修正：

.google-visualization-tooltip {
  max-width: unset !important;
  width: auto !important;
}

内容的提问来源于stack exchange，提问作者Hassan Muhammad Sabir