谷歌图表时间轴突出显示鼠标悬停时的许多栏

Question

我目前正在开展一些数据可视化工作。对于可视化，我使用嵌入在仪表板中的Google Charts Timeline（实现了在x轴上缩放的功能）。时间线代表球员在排名中的位置（第一，第二和第三位）。我想要实现的是 - 当我将鼠标悬停在玩家的条目上时，我想在时间轴中突出显示他/她的其他条目。使用谷歌总裁，副总裁和国务卿的例子 - 当我担任国务卿时，我在托马斯杰斐逊酒吧上空盘旋时，我希望他的时间作为副总裁和总统在图表上突出显示。我提供jsfiddle作为参考 - https://jsfiddle.net/21aor2ab/

我对使用＆＃39; onmouseover＆＃39;事件，但我在仪表板中正确设置此事件有问题 - 只需使用 google.visualization.events.addListener(dashChart, 'onmouseover', function(){something over here});因某种原因无法工作......

如果有人能建议我解决方案，或者至少指出我正确的方向，我会很高兴。

Answer 1

将图表事件分配给图表包装时

你必须等待包装器上的'ready'事件，
然后在wrapper.getChart()

上听取活动

参见以下示例......

突出显示多个条目，
在这里，我尝试trigger其他行上的onmouseover，
触发事件但行未突出显示

我考虑使用setSelection，而是使用时间轴图表...

在任何特定时刻只能选择一个实体

只有其他选项才能直接修改svg 但不推荐
你需要记录所有颜色，包括高亮颜色，
或尝试提供自己的

此示例突出显示所有Thomas Jefferson行

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

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var dashControl = new google.visualization.ControlWrapper({
      'controlType': 'ChartRangeFilter',
      'containerId': 'control',
      'options': {
        'filterColumnIndex': 3,
        'ui': {
          'chartType': 'ScatterChart',
          'chartOptions': {
            'height': 70,
            'chartArea': {
              width: '80%',
              height: '80%'
            },
            'hAxis': {
              'baselineColor': 'none'
            }
          },
          'chartView': {
            'columns': [3, 4]
          },
          minRangeSize: 12*60*60*1000
        }
      }
    });

    var dashChart = new google.visualization.ChartWrapper({
      'chartType': 'Timeline',
      'containerId': 'chart',
      'options': {
        'chartArea': {
          width: '80%',
          height: '80%'
        },
        hAxis: {
          format: 'dd.MM HH:mm'
        }
      },
      'view': {
        'columns': [0, 1, 2, 3, 4]
      }
    });

    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ 'President', 'George Washington', 'some tooltip content', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', 'some tooltip content', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', 'some tooltip content', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', 'some tooltip content', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', 'some tooltip content', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', 'some tooltip content', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', 'some tooltip content', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', 'some tooltip content', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', 'some tooltip content', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    google.visualization.events.addListener(dashChart, 'ready', function () {
      google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
        Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
          if (bar.getAttribute('fill') === '#f4b400') {
            bar.setAttribute('fill', '#f7cb4d')
          }
        });
      });
      google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
        Array.prototype.forEach.call(document.getElementById(dashChart.getContainerId()).getElementsByTagName('rect'), function(bar) {
          if (bar.getAttribute('fill') === '#f7cb4d') {
            bar.setAttribute('fill', '#f4b400')
          }
        });
      });
    });

    dashboard.bind(dashControl, dashChart);
    dashboard.draw(dataTable);
  },
  packages:['controls', 'corechart', 'timeline']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
    <div id="chart" style="height: 200px;"></div>
    <div id="control"></div>
</div>

Answer 2

通过使用jQuery进行一些调整我能够实现我的目标。只是张贴这个以供将来参考或可能的google'rs

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

    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var dashControl = new google.visualization.ControlWrapper({
      'controlType': 'ChartRangeFilter',
      'containerId': 'control',
      'options': {
        'filterColumnIndex': 3,
        'ui': {
          'chartType': 'ScatterChart',
          'chartOptions': {
            'height': 70,
            'chartArea': {
              width: '80%',
              height: '80%'
            },
            'hAxis': {
              'baselineColor': 'none'
            }
          },
          'chartView': {
            'columns': [3, 4]
          },
          minRangeSize: 12*60*60*1000
        }
      }
    });

    var dashChart = new google.visualization.ChartWrapper({
      'chartType': 'Timeline',
      'containerId': 'chart',
      'options': {
        'chartArea': {
          width: '80%',
          height: '80%'
        },
        hAxis: {
          format: 'dd.MM HH:mm'
        }
      },
      'view': {
        'columns': [0, 1, 2, 3, 4]
      }
    });

    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: "string", id: "", "role": "tooltip", "p" : { "role" : "tooltip" ,'html': true} });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ 'President', 'George Washington', 'some tooltip content', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', 'some tooltip content', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', 'some tooltip content', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', 'some tooltip content', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', 'some tooltip content', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', 'some tooltip content', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', 'some tooltip content', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', 'some tooltip content', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', 'some tooltip content', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', 'some tooltip content', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', 'some tooltip content', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', 'some tooltip content', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', 'some tooltip content', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', 'some tooltip content', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    google.visualization.events.addListener(dashChart, 'ready', function () {
  var original_rect_color;
  var new_rect_color;
  google.visualization.events.addListener(dashChart.getChart(), 'onmouseover', function (e) {
    var original_rect = $("div#dashboard div#chart g rect").filter(function(){return $(this).attr('style') == 'display: none;'})[0];
	var temp_original_color = $(original_rect).attr('fill');
	if(temp_original_color!=original_rect_color)
	{
		$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
			$(this).attr('fill',original_rect_color);
		});
	}
	original_rect_color = temp_original_color;
	var original_rect_x = $(original_rect).attr('x');
	var original_rect_y = $(original_rect).attr('y');
	new_rect_color = $($("div#dashboard div#chart g rect").filter(function(){return $(this).attr('x') == original_rect_x && $(this).attr('y') == original_rect_y})[1]).attr('fill');
	$("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == original_rect_color}).each(function(){
		$(this).attr('fill',new_rect_color);
	});
  });
  google.visualization.events.addListener(dashChart.getChart(), 'onmouseout', function (e) {
    $("div#dashboard div#chart g rect").filter(function(){return $(this).attr('fill') == new_rect_color}).each(function(){
		$(this).attr('fill',original_rect_color);
	});
  });
});

    dashboard.bind(dashControl, dashChart);
    dashboard.draw(dataTable);
  },
  packages:['controls', 'corechart', 'timeline']
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
    <div id="chart" style="height: 200px;"></div>
    <div id="control"></div>
</div>