如何将SVG文件中的纯色组合应用到Google Timeline Chart条形上

安全阿岳

2026-8-19

实现SVG颜色应用到Google Timeline Chart条形

步骤1：提取SVG中的颜色值

从你提供的SVG文件中，可直接获取两种目标颜色：

对应.color类的颜色：#888
对应.color1类的颜色：red（可转为十六进制格式#ff0000，和Google图表的颜色格式更兼容）

方法一：直接在数据行中指定颜色

沿用你当前的addRows写法，将SVG中的颜色值替换原有的纯色值即可：

// 使用SVG中第一种颜色
dataTable.addRows(['Washington', '#888', new Date(2022, 5, 1), new Date(2022, 6, 2)]);
// 使用SVG中第二种颜色
dataTable.addRows(['New York', '#ff0000', new Date(2022, 6, 1), new Date(2022, 7, 2)]);

方法二：通过图表配置批量应用颜色

如果需要让图表循环使用这两种颜色，可在图表的options中设置colors数组，无需在每一行单独指定：

// 定义图表配置，引入SVG中的两种颜色
const options = {
  colors: ['#888', '#ff0000']
};

// 初始化并绘制图表
const chart = new google.visualization.Timeline(document.getElementById('timeline-container'));
chart.draw(dataTable, options);

进阶：动态读取外部SVG文件中的颜色

如果SVG是独立文件，可通过JS动态加载并解析颜色，避免硬编码：

// 加载外部SVG文件
fetch('your-svg-file.svg')
  .then(res => res.text())
  .then(svgContent => {
    // 解析SVG内容为DOM对象
    const svgDoc = new DOMParser().parseFromString(svgContent, 'image/svg+xml');
    
    // 获取两个矩形的计算样式颜色（处理defs中style定义的颜色）
    const color1 = window.getComputedStyle(svgDoc.querySelector('.color')).fill;
    const color2 = window.getComputedStyle(svgDoc.querySelector('.color1')).fill;
    
    // 将颜色应用到数据行
    dataTable.addRows(['Washington', color1, new Date(2022, 5, 1), new Date(2022, 6, 2)]);
    dataTable.addRows(['New York', color2, new Date(2022, 6, 1), new Date(2022, 7, 2)]);
    
    // 绘制图表
    chart.draw(dataTable);
  });