Charts Google可视化中两个图表的常见图例

我有一个样本，其中包含两个来自不同数据源的谷歌可视化组合图

google.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2004/05',  165,      938,         522,             998,           450,      614.6],
    ['2005/06',  135,      1120,        599,             1268,          288,      682],
    ['2006/07',  157,      1167,        587,             807,           397,      623],
    ['2007/08',  139,      1110,        615,             968,           215,      609.4],
    ['2008/09',  136,      691,         629,             1026,          366,      569.6]
  ]);

    var data2 = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
    ['2009/05',  755,      451,         44,          854,           356,      785],
    ['2010/06',  43,       1512,        96,          7545,          565,      312],
    ['2011/07',  523,      2465,        895,         454,           256,      623],
    ['2012/08',  198,      1503,        615,         968,           215,      785],
    ['2013/09',  53,       691,         854,         1026,          296,      751]
  ]);

  var options = {
    title : 'Monthly Coffee Production by Country (2004 - 2008)',
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
      isStacked: true,
      'legend': {'position': 'top'},
  };

      var options2 = {
    title : 'Monthly Coffee Production by Country (2009 - 2013)',
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {5: {type: "line"}},
      isStacked: true,
      'legend': {'position': 'top' },
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);

     var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2'));
  chart2.draw(data2, options2);
}

---

如何在选择两个图表中突出显示各自堆栈的图例时为两个图表创建一个通用图例。

有点棘手，但找到了一种方法：

1） 将

工具提示：{trigger:'tware'}，

添加到两个图表选项中。当您使用

chart.setSelection（）

2） 添加事件处理程序以在数据点的鼠标悬停上设置两个图表的选择：

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    var chart2 = new google.visualization.ComboChart(document.getElementById('chart_div2'));

    function handler(e) { // e = {row, column}
        if (e != null) {
            chart2.setSelection([e]); // set same selection for both charts
            chart.setSelection([e]);// set same selection for both charts
        }
    }

    google.visualization.events.addListener(chart, 'onmouseover', handler);
    google.visualization.events.addListener(chart2, 'onmouseover', handler);

    chart.draw(data, options);

    chart2.draw(data2, options2);

---

以下是您的工作示例：

当鼠标悬停在一个数据点上时，是否要同时显示两个图表工具提示？是的。。。如果可能的话，情况可能会更好。或者至少高亮显示所选内容如何在单击图例时高亮显示两个图表？@mps只需将

'onmouseover'

事件更改为：

['onmouseover'，'select']