如何为Google Charts桑基图（Sankey）的各链接单独指定RGB颜色？

Google Charts桑基图默认不支持通过数据列的style属性为单个链接设置颜色，可按以下方案实现需求：

方法1：官方配置适配（推荐） #

该方法不需要修改DOM，完全通过官方配置实现：

• 按你输入数据的行顺序，将每一行第4位的RGB值提取为独立的颜色数组，确保数组顺序和你往DataTable中添加行的顺序完全一致
• 在配置项中设置sankey.link.colorMode为static，禁用默认的节点颜色渐变逻辑，让链接直接取用指定颜色列表
• 将提取好的颜色数组传入sankey.link.colors配置项

示例代码：

google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 原始数据集结构：[from, to, value, color]
  const rawData = [
    ['A', 'X', 5, 'rgb(255,0,0)'],
    ['A', 'Y', 3, 'rgb(0,255,0)'],
    ['B', 'X', 2, 'rgb(0,0,255)'],
    ['B', 'Y', 4, 'rgb(255,0,255)']
  ];

  // 提取对应顺序的颜色数组
  const linkColorList = rawData.map(item => item[3]);

  // 构造绘图用DataTable，仅保留前3列业务数据
  const data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Value');
  data.addRows(rawData.map(item => [item[0], item[1], item[2]]));

  const options = {
    sankey: {
      link: {
        colorMode: 'static',
        colors: linkColorList
      }
    }
  };

  const chart = new google.visualization.Sankey(document.getElementById('sankey_container'));
  chart.draw(data, options);
}

方法2：DOM修改兜底 #

如果遇到复杂场景下链接顺序和数据行顺序不匹配的情况，可以监听图表渲染完成事件，直接修改SVG元素的填充属性：
在chart.draw()之前添加以下代码即可：

google.visualization.events.addListener(chart, 'ready', () => {
  // 选中所有桑基图链接元素
  const linkElements = document.querySelectorAll('#sankey_container path[fill-opacity="0.8"]');
  rawData.forEach((item, index) => {
    if(linkElements[index]) linkElements[index].setAttribute('fill', item[3]);
  });
});

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