多个 Google 图表 - 一次在所有图表上显示工具提示/十字准线

Question

我正在尝试绘制两个单独的 Google 图表并让它们共享一个共同的 x 轴。这个想法是我可以将鼠标悬停在一个图表上，然后在正确的日期看到工具提示出现在另一个图表上。

有点像这样，但有一个工具提示。 focusTarget 属性适用于单个图表，但不能同时适用。

我想我必须以某种方式创建一个通用日期列，但不知道如何去做。

我的工作（缩写）代码（到目前为止）用于显示图表。

var link = function(scope,element,attrs) {

  google.charts.setOnLoadCallback(drawUsageChart);

  google.charts.setOnLoadCallback(drawChartOne);

  function drawChartOne() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sessions');

    var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

    var start = new Date(1458345600 * 1000);
    var date;

    var dates = [];

    for(var i = 0; i < sessions.length; i++) {
      var newDate = start.setDate(start.getDate() + 1);
      data.addRow([new Date(newDate), sessions[i]]);
    }

    var options = {title:'Wot',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };

    var chart = new google.visualization.LineChart(document.getElementById('mcs-chart'));
    chart.draw(data, options);
  }

  function drawChartTwo() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Other Sessions');

    var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

    var start = new Date(1458345600 * 1000);
    var date;

    var dates = [];

    for(var i = 0; i < sessions.length; i++) {
      var newDate = start.setDate(start.getDate() + 1);
      // dates.push(new Date(newDate));
      data.addRow([new Date(newDate), sessions[i]]);
    }

    var options = {
      title:'WOOOOT',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };

    var chart = new google.visualization.LineChart(document.getElementById('snr-chart'));
    chart.draw(data, options);
  }

};

Answer 1

尝试使用google.visualization.events.trigger 同步两个'onmouseover' 事件

虽然'onmouseover' 事件在另一个图表上触发，但工具提示并未显示

显然，it's not possible to force a tooltip to display

您必须使用数据点的坐标编写自己的代码

但您可以在 'select' 上同步图表

扩展问题中的示例...

google.charts.load('current', {
  callback: function () {

    var chart1;
    var chart2;

    var data1 = new google.visualization.DataTable();
    var data2 = new google.visualization.DataTable();

    var outDiv1 = document.getElementById('mcs-chart-event');
    var outDiv2 = document.getElementById('snr-chart-event');

    var options1 = {title:'Wot',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };

    var options2 = {
      title:'WOOOOT',
      height:300,
      lineWidth: 1.5,
      legend: { position: 'none' },
      crosshair: {
        trigger: 'both',
        orientation: 'vertical'
      },
      focusTarget: 'category',
    };


    drawChartOne(data1);
    drawChartTwo(data2);

    google.visualization.events.addListener(chart1, 'select', function () {
      chart2.setSelection(chart1.getSelection());
    });

    google.visualization.events.addListener(chart2, 'select', function () {
      chart1.setSelection(chart2.getSelection());
    });

    google.visualization.events.addListener(chart1, 'onmouseover', function (properties) {
      outDiv1.innerHTML = 'chart1.onmouseover' + JSON.stringify(properties);
      google.visualization.events.trigger(chart2, 'onmouseover', properties);
    });

    google.visualization.events.addListener(chart2, 'onmouseover', function (properties) {
      outDiv2.innerHTML = 'chart2.onmouseover' + JSON.stringify(properties);
    });

    chart1.draw(data1, options1);
    chart2.draw(data2, options2);

    function drawChartOne(data) {
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Sessions');

      var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

      var start = new Date(1458345600 * 1000);
      var date;

      var dates = [];

      for(var i = 0; i < sessions.length; i++) {
        var newDate = start.setDate(start.getDate() + 1);
        data.addRow([new Date(newDate), sessions[i]]);
      }

      chart1 = new google.visualization.LineChart(document.getElementById('mcs-chart'));
    }

    function drawChartTwo(data) {
      data.addColumn('date', 'Date');
      data.addColumn('number', 'Other Sessions');

      var sessions = [786, 450, 866, 814, 192, 466, 984, 780, 922, 458, 786, 758, 701, 831, 901, 557, 114, 393, 689, 658, 103, 837, 164, 727, 593, 193, 945, 583, 948, 338];

      var start = new Date(1458345600 * 1000);
      var date;

      for(var i = 0; i < sessions.length; i++) {
        var newDate = start.setDate(start.getDate() + 1);
        data.addRow([new Date(newDate), sessions[i]]);
      }

      chart2 = new google.visualization.LineChart(document.getElementById('snr-chart'));
    }
  },
  packages: ['corechart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="mcs-chart"></div>
<div id="snr-chart"></div>
<div id="mcs-chart-event"></div>
<div id="snr-chart-event"></div>