如何在react-google-charts的Timeline图表中绘制当前时间竖线

问题描述 #

已通过react-google-charts实现Timeline图表，代码如下，需要在图表中添加一条竖线标记当前时间，效果参考带当前时间刻度的垂直标线。

原代码：

import { Chart } from "react-google-charts";
export function GoogleTimeLineChart(props){
  const dataSource=[
    [{"type":"string","id":"Plan"},{"type":"string","id":"Job"},{"type":"date","id":"Start"},{"type":"date","id":"End"}],
    ["Base Line","1","2022-08-05T04:30:00.000Z","2022-08-05T04:35:00.000Z"],
    ["Base Line","2","2022-08-05T05:00:00.000Z","2022-08-05T05:05:00.000Z"],
    ["Base Line","3","2022-08-05T05:30:00.000Z","2022-08-05T05:35:00.000Z"],
    ["Base Line","4","2022-08-05T06:00:00.000Z","2022-08-05T06:05:00.000Z"],
    ["Base Line","5","2022-08-05T06:40:00.000Z","2022-08-05T06:45:00.000Z"],
    ["Base Line","6","2022-08-05T07:05:00.000Z","2022-08-05T07:10:00.000Z"],
    ["Base Line","7","2022-08-05T07:40:00.000Z","2022-08-05T07:45:00.000Z"],
    ["Actual",".1","2022-08-05T04:47:00.000Z","2022-08-05T04:52:00.000Z"],
    ["Actual",".2","2022-08-05T05:10:00.000Z","2022-08-05T05:15:00.000Z"],
    ["Actual",".3","2022-08-05T05:50:00.000Z","2022-08-05T05:55:00.000Z"],
    ["Actual",".4","2022-08-05T06:20:00.000Z","2022-08-05T06:25:00.000Z"],
    ["Actual",".5","2022-08-05T06:30:00.000Z","2022-08-05T06:35:00.000Z"],
    ["Actual",".6","2022-08-05T06:50:00.000Z","2022-08-05T06:55:00.000Z"],
    ["Revised","7.","2022-08-05T07:35:00.000Z","2022-08-05T07:40:00.000Z"]
  ]
  const colors=["#062373","#062373","#062373","#062373","#062373","#062373","#062373","green","red","red","red","red","green","green"]
  return ( 
    <Chart 
      chartType="Timeline" 
      data={dataSource} 
      width="100%" 
      height="500px" 
      options={{ colors: [...colors], }} 
    />
  )
}

实现方法 #

Timeline图表本身没有内置的垂直标线配置，需要借助图表的ready事件，手动在SVG画布上绘制竖线，具体步骤：

1. 监听图表ready事件：当图表渲染完成后触发回调，此时才能获取到图表的SVG元素和坐标信息
2. 计算当前时间对应的x坐标：利用Google Charts的API将当前时间转换为图表上的像素位置
3. 绘制SVG竖线：创建line元素，设置样式后添加到图表的SVG中

修改后的完整代码：

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

export function GoogleTimeLineChart(props) {
  const dataSource = [
    [{ type: "string", id: "Plan" }, { type: "string", id: "Job" }, { type: "date", id: "Start" }, { type: "date", id: "End" }],
    ["Base Line", "1", "2022-08-05T04:30:00.000Z", "2022-08-05T04:35:00.000Z"],
    ["Base Line", "2", "2022-08-05T05:00:00.000Z", "2022-08-05T05:05:00.000Z"],
    ["Base Line", "3", "2022-08-05T05:30:00.000Z", "2022-08-05T05:35:00.000Z"],
    ["Base Line", "4", "2022-08-05T06:00:00.000Z", "2022-08-05T06:05:00.000Z"],
    ["Base Line", "5", "2022-08-05T06:40:00.000Z", "2022-08-05T06:45:00.000Z"],
    ["Base Line", "6", "2022-08-05T07:05:00.000Z", "2022-08-05T07:10:00.000Z"],
    ["Base Line", "7", "2022-08-05T07:40:00.000Z", "2022-08-05T07:45:00.000Z"],
    ["Actual", ".1", "2022-08-05T04:47:00.000Z", "2022-08-05T04:52:00.000Z"],
    ["Actual", ".2", "2022-08-05T05:10:00.000Z", "2022-08-05T05:15:00.000Z"],
    ["Actual", ".3", "2022-08-05T05:50:00.000Z", "2022-08-05T05:55:00.000Z"],
    ["Actual", ".4", "2022-08-05T06:20:00.000Z", "2022-08-05T06:25:00.000Z"],
    ["Actual", ".5", "2022-08-05T06:30:00.000Z", "2022-08-05T06:35:00.000Z"],
    ["Actual", ".6", "2022-08-05T06:50:00.000Z", "2022-08-05T06:55:00.000Z"],
    ["Revised", "7.", "2022-08-05T07:35:00.000Z", "2022-08-05T07:40:00.000Z"]
  ];
  const colors = ["#062373", "#062373", "#062373", "#062373", "#062373", "#062373", "#062373", "green", "red", "red", "red", "red", "green", "green"];

  const handleChartReady = (chart) => {
    const googleChart = chart.getChart();
    const chartArea = googleChart.getBoundingBox('chartarea');
    const currentTime = new Date();
    // 将当前时间转换为图表x轴的像素位置
    const xPos = googleChart.getXAxisValue(currentTime);

    if (xPos < chartArea.left || xPos > chartArea.left + chartArea.width) {
      // 当前时间不在图表显示范围内，不绘制
      return;
    }

    // 获取图表的SVG元素
    const svg = document.getElementById(chart.getContainerId()).querySelector('svg');
    if (!svg) return;

    // 创建竖线元素
    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
    line.setAttribute('x1', xPos);
    line.setAttribute('y1', chartArea.top);
    line.setAttribute('x2', xPos);
    line.setAttribute('y2', chartArea.top + chartArea.height);
    line.setAttribute('stroke', '#ff0000'); // 竖线颜色
    line.setAttribute('stroke-width', '2'); // 线宽
    line.setAttribute('stroke-dasharray', '5,5'); // 虚线样式，可选

    // 添加到SVG中
    svg.appendChild(line);
  };

  return (
    <Chart
      chartType="Timeline"
      data={dataSource}
      width="100%"
      height="500px"
      options={{ colors: [...colors] }}
      ready={handleChartReady} // 绑定ready事件
    />
  );
}

说明 #

• 代码中通过ready回调获取图表实例，计算当前时间对应的x坐标
• 若当前时间不在图表的时间范围内，会自动跳过绘制
• 可以通过修改stroke、stroke-width、stroke-dasharray属性调整竖线的样式
• 如果需要实时更新竖线（比如每分钟刷新），可以结合setInterval在ready事件后定时重新绘制，注意先移除旧的竖线再添加新的

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