如何在React Google Charts时间线的特定点位添加自定义图标

核心思路 #

Google Charts 原生 Timeline 组件没有提供条形上方自定义元素的内置API，我们可以通过监听图表渲染完成事件，获取图表坐标体系，计算目标位置后手动插入自定义图标。

具体实现步骤 #

1. 给Chart组件补充实例获取和事件监听属性，拿到图表渲染后的容器和比例尺信息，计算目标位置后插入图标即可，完整示例代码如下：

import { useRef } from 'react';
import Chart from 'react-google-charts';

const TimelineChart = () => {
  // 存储已添加的图标，避免重复渲染
  const iconsRef = useRef([]);

  // 图标插入逻辑
  const addCustomIcon = (chartWrapper) => {
    // 先清空之前添加的图标，避免重复
    iconsRef.current.forEach(icon => icon.remove());
    iconsRef.current = [];

    const chart = chartWrapper.getChart();
    const container = chartWrapper.getContainer();
    const layout = chart.getChartLayoutInterface();

    // 示例：在Adams任期的1799年7月4日位置加图标，可根据需求替换为你的目标参数
    const targetRowIndex = 1; // 目标条形对应的行索引，从0开始计数
    const targetDate = new Date(1799, 6, 4); // 目标日期，注意JS中月份从0开始计数

    // 计算坐标：x坐标是目标日期对应的水平位置，y坐标是对应条形的顶部往上偏移
    const xPos = layout.getXLocation(targetDate);
    const barBounds = layout.getBoundingBox(`bar#${targetRowIndex}#0`);
    const yPos = barBounds.top - 24; // 偏移量可根据图标大小自行调整

    // 创建自定义图标元素
    const icon = document.createElement('img');
    icon.src = '替换为你的图标地址';
    icon.style.position = 'absolute';
    icon.style.left = `${xPos - 12}px`; // 水平居中对齐目标日期，偏移值根据图标宽度调整
    icon.style.top = `${yPos}px`;
    icon.style.width = '24px';
    icon.style.height = '24px';
    icon.style.zIndex = 10;

    container.appendChild(icon);
    iconsRef.current.push(icon);
  };

  // 你的原有列配置和行数据
  const columns = [
    { type: "string", id: "President" },
    { type: "string", id: "dummy bar label" },
    { type: "string", role: "tooltip" },
    { type: "date", id: "Start" },
    { type: "date", id: "End" }
  ];

  const rows = [
    ["Washington", null, "George", new Date(1789, 3, 29), new Date(1797, 2, 3)],
    ["Adams", null, "John", new Date(1797, 2, 3), new Date(1801, 2, 3)],
    ["Jefferson", null, "Thomas", new Date(1801, 2, 3), new Date(1809, 2, 3)]
  ];

  return (
    {/* 外层容器必须加相对定位，否则图标会偏移 */}
    <div style={{ position: 'relative' }}>
      <Chart
        chartType="Timeline"
        data={[columns, ...rows]}
        width="100%"
        height="400px"
        chartEvents={[
          {
            eventName: 'ready',
            callback: ({ chartWrapper }) => {
              addCustomIcon(chartWrapper);
            }
          },
          // 监听图表重绘事件，缩放、交互后自动更新图标位置
          {
            eventName: 'statechange',
            callback: ({ chartWrapper }) => {
              addCustomIcon(chartWrapper);
            }
          }
        ]}
      />
    </div>
  );
};

注意事项 #

• 如果需要添加多个图标，只需要循环处理所有目标日期和对应的行索引即可
• 所有偏移数值都可以根据你的图标尺寸、设计需求自行调整

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