Google Charts多数据集Diff图表官方不支持，求可行解决方案

Google Charts的computeDiff()确实只支持两两数据集对比，但可以通过以下几种方式实现多数据集的差值可视化：

1. 多次调用computeDiff并合并结果 #

针对N个数据集，依次计算相邻两组的差值（比如A-B、B-C、C-D），然后将这些差值数据集合并到同一个数据表中，通过不同样式区分各组差值。

示例代码：

// 假设已加载Google Charts，且有三个原始数据表dataA、dataB、dataC
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawMultiDiffChart);

function drawMultiDiffChart() {
  // 计算两两差值
  const diffAB = google.visualization.data.computeDiff(dataA, dataB);
  const diffBC = google.visualization.data.computeDiff(dataB, dataC);

  // 创建合并后的差值数据表
  const combinedDiff = new google.visualization.DataTable();
  // 添加类别列（复用第一组Diff的基准列）
  combinedDiff.addColumn(diffAB.getColumnType(0), diffAB.getColumnLabel(0));
  // 添加A-B差值列及样式
  combinedDiff.addColumn('number', 'A vs B 差值');
  combinedDiff.addColumn({type: 'string', role: 'style'});
  // 添加B-C差值列及样式
  combinedDiff.addColumn('number', 'B vs C 差值');
  combinedDiff.addColumn({type: 'string', role: 'style'});

  // 填充数据行
  for (let i = 0; i < diffAB.getNumberOfRows(); i++) {
    const category = diffAB.getValue(i, 0);
    const valAB = diffAB.getValue(i, 1);
    const styleAB = valAB > 0 ? 'color: green; fill-color: #90EE90' : 'color: red; fill-color: #FFCCCB';
    const valBC = diffBC.getValue(i, 1);
    const styleBC = valBC > 0 ? 'color: blue; fill-color: #ADD8E6' : 'color: darkorange; fill-color: #FFE4B5';
    
    combinedDiff.addRow([category, valAB, styleAB, valBC, styleBC]);
  }

  // 绘制柱状图
  const chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(combinedDiff, {
    title: '多组数据集差值对比',
    legend: {position: 'top'},
    bar: {groupWidth: '60%'}
  });
}

2. 自定义计算差值，绕过computeDiff #

如果不需要computeDiff()自动生成的样式标记，可以自己遍历数据集计算差值，完全自定义差值表的结构。这种方式灵活性更高，适合非相邻数据集的对比（比如A-C、B-D）。

示例代码：

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

function drawCustomDiffChart() {
  // 原始数据集数组及对应标签
  const datasets = [dataA, dataB, dataC];
  const labels = ['数据集A', '数据集B', '数据集C'];
  
  const customDiff = new google.visualization.DataTable();
  // 添加类别列
  customDiff.addColumn(datasets[0].getColumnType(0), datasets[0].getColumnLabel(0));
  
  // 添加所有需要对比的差值列（比如A-B、A-C）
  customDiff.addColumn('number', `${labels[0]} vs ${labels[1]} 差值`);
  customDiff.addColumn({type: 'string', role: 'style'});
  customDiff.addColumn('number', `${labels[0]} vs ${labels[2]} 差值`);
  customDiff.addColumn({type: 'string', role: 'style'});

  // 遍历计算差值
  for (let row = 0; row < datasets[0].getNumberOfRows(); row++) {
    const rowData = [datasets[0].getValue(row, 0)];
    // 计算A-B差值
    const diffAB = datasets[0].getValue(row, 1) - datasets[1].getValue(row, 1);
    rowData.push(diffAB, diffAB > 0 ? 'fill-color: #2ECC71' : 'fill-color: #E74C3C');
    // 计算A-C差值
    const diffAC = datasets[0].getValue(row, 1) - datasets[2].getValue(row, 1);
    rowData.push(diffAC, diffAC > 0 ? 'fill-color: #3498DB' : 'fill-color: #F39C12');
    
    customDiff.addRow(rowData);
  }

  const chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(customDiff, {
    hAxis: {title: '差值'},
    vAxis: {title: '类别'},
    legend: {position: 'right'}
  });
}

3. 用多系列图表替代纯Diff展示 #

如果不需要单独的差值柱形，可以将原始数据和差值结合展示——比如用柱形显示原始值，用折线显示多组差值，让用户同时看到绝对值和差异趋势。这种方式更直观，适合需要兼顾原始数据的场景。

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