Google Chart BarChart鼠标悬停 [英] Google Chart BarChart onmouseover

问题描述

我正在尝试在Google BarChart的"onmouseover"事件上添加侦听器，但无法使其正常工作.我想使用"mouseover"元素进行ajax调用...(我的代码的一部分):

I am trying to add an listener on a "onmouseover" event on a Google BarChart, but cannot get it to work. I want to use the "mouseover"-element to make a ajax call...(a snippet of my code):

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
            }

选择"处理程序工作正常(代码中未显示)，但是"onmouseover"无效.如何添加onmouseoverHandler ...任何建议?

The "select" handler is working fine (not shown in code), but not "onmouseover". How do I add the onmouseoverHandler ...Any suggestions ?

推荐答案

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

event listeners need to be added to the chart before the chart is drawn

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

also, the 'onmouseover' event will pass the row and column as arguments to the listener function

和返回一个数组，既当选择图表元素和未被选择的，结果 尝试访问内容之前，需要检查数组的长度...

and, getSelection returns an array, both when a chart element is selected and unselected,
need to check the length of the array before trying to access the contents...

当未取消选择栏

getSelection()[0]

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于Google Chart BarChart鼠标悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！