Question

我有一个示例fiddle here，其中包含从不同数据源中提取的两个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);
}

如何选择两个图表的常用图例，这些图例将突出显示两个图表中的相应堆栈。

Answer 1

有点棘手，但找到了办法：

1）将tooltip: { trigger: 'both' },添加到两个图表选项中。这将在您使用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);

以下是您的工作示例：http://jsfiddle.net/oxra70jL/3/

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

1 个答案: