Google Chart BarChart onmouseover答案

【问题标题】：Google Chart BarChart onmouseoverGoogle Chart BarChart onmouseover
【发布时间】：2018-08-08 13:37:04
【问题描述】：

我正在尝试在 Google BarChart 上的“onmouseover”事件上添加侦听器，但无法使其正常工作。我想使用“鼠标悬停”元素进行 ajax 调用...（我的代码的 sn-p）：

dataTable = google.visualization.arrayToDataTable(dataRaw, false); 
            var chart = new google.visualization.BarChart(document.getElementById("successChart"));

            //Setting options for the chart
            var options = {}....;

            chart.draw(dataTable, options);
            // Add actionlistener
            google.visualization.events.addListener(chart, 'select', selectHandler);
            google.visualization.events.addListener(chart, 'onmouseover', onmouseoverHandler);

 function onmouseoverHandler() {

                var selectedItem = chartGennemført.getSelection()[0]; // gets the value the vAxis
            }

“select”处理程序工作正常（代码中未显示），但“onmouseover”不能。如何添加 onmouseoverHandler ...有什么建议吗？

【问题讨论】：

标签： charts google-visualization bar-chart onmouseover

【解决方案1】：

需要在图表中在绘制图表之前添加事件监听器

另外，'onmouseover' 事件会将行和列作为参数传递给侦听器函数

并且，getSelection 在选择图表元素和未选择图表元素时返回一个数组，
在尝试访问内容之前需要检查数组的长度...

当一个栏被取消选择

时，这将失败

getSelection()[0]

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataRaw = [
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5]
  ];

  dataTable = google.visualization.arrayToDataTable(dataRaw, false);
  var chart = new google.visualization.BarChart(document.getElementById("successChart"));

  var options = {};

  // Add actionlistener
  google.visualization.events.addListener(chart, 'select', selectHandler);
  google.visualization.events.addListener(chart, 'onmouseover', onmouseoverHandler);

  chart.draw(dataTable, options);

  function onmouseoverHandler(properties) {
    console.log(JSON.stringify(properties));
  }

  function selectHandler() {
    var selectedItem = chart.getSelection();
    if (selectedItem.length > 0) {
      console.log(JSON.stringify(selectedItem[0]));
    } else {
      console.log('nothing selected');
    }
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="successChart"></div>

【讨论】：