React Google Charts时间轴仅显黑色图像，悬停可查数据求助

问题描述 #

使用react-google-charts组件渲染Timeline图表时，图表区域显示为全黑色，鼠标悬停时能正常显示每个条形的信息，控制台无报错，修改背景色无效。组件代码如下：

import { Chart } from "react-google-charts";

export const data = [
  [
    { type: "string", id: "Room" },
    { type: "string", id: "Name" },
    { type: "date", id: "Start" },
    { type: "date", id: "End" }
  ],
  [
    "Magnolia Room",
    "Beginning JavaScript",
    new Date(0, 0, 0, 12, 0, 0),
    new Date(0, 0, 0, 13, 30, 0)
  ],
  [
    "Magnolia Room",
    "Intermediate JavaScript",
    new Date(0, 0, 0, 14, 0, 0),
    new Date(0, 0, 0, 15, 30, 0)
  ],
  [
    "Magnolia Room",
    "Advanced JavaScript",
    new Date(0, 0, 0, 16, 0, 0),
    new Date(0, 0, 0, 17, 30, 0)
  ],
  [
    "Willow Room",
    "Beginning Google Charts",
    new Date(0, 0, 0, 12, 30, 0),
    new Date(0, 0, 0, 14, 0, 0)
  ],
  [
    "Willow Room",
    "Intermediate Google Charts",
    new Date(0, 0, 0, 14, 30, 0),
    new Date(0, 0, 0, 16, 0, 0)
  ],
  [
    "Willow Room",
    "Advanced Google Charts",
    new Date(0, 0, 0, 16, 30, 0),
    new Date(0, 0, 0, 18, 0, 0)
  ]
];

export function Timeline() {
  return (
    <Chart
      chartType="Timeline"
      data={data}
      width="100%"
      height="400px"
      options={{
        timeline: {
          colorByRowLabel: true
        }
      }}
    />
  );
}

解决方案 #

1. 加载Timeline专属可视化包 #

Timeline是Google Charts的特殊图表类型，需要单独加载对应的timeline包，react-google-charts默认不会自动加载该包，导致渲染异常但交互功能正常。

修改组件代码，为Chart添加packages属性：

export function Timeline() {
  return (
    <Chart
      chartType="Timeline"
      data={data}
      width="100%"
      height="400px"
      packages={["timeline"]} // 新增该行，指定加载timeline包
      options={{
        timeline: {
          colorByRowLabel: true
        },
        backgroundColor: "#ffffff" // 明确设置背景色，避免继承全局样式
      }}
    />
  );
}

2. 排查全局样式冲突 #

如果项目中存在全局CSS对SVG元素设置了fill属性（例如svg { fill: black; }），会覆盖Timeline图表的条形颜色。可以给图表容器添加自定义类名，针对性覆盖样式：

.timeline-chart svg g rect {
  fill: inherit !important;
}

然后在组件中添加className：

<Chart
  className="timeline-chart"
  // 其他属性保持不变
/>

3. 更新react-google-charts版本 #

如果上述方法无效，尝试更新react-google-charts到最新版本，修复可能存在的版本兼容问题：

npm update react-google-charts
# 或使用yarn
yarn upgrade react-google-charts

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