Custom Google Bubble Chart Tooltip

问题

I'm trying to create a custom tooltip for my Google Bubble Chart that displays content on mouseover and then goes away on mouseout. Right now it's only displaying the "standard" Google tooltip content. There is another question on here where I got the JS from but I cannot comment on it since my rep is not high enough. My code and jsfiddle are below. All help is greatly appreciated. Thanks!

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Data1','Data2','Data3','Data4','Data5','Data6','Data7','Data8'],
          ['This is Data1',7500,2757,'This is Data 4',4,'This is Data 6','This is Data 8',330],
          ]);

    var options = {
      title: 'Test Title',
      hAxis: {title: 'Test hAxis'},
      vAxis: {title: 'Test vAxis'},
      bubble: {textStyle: {fontSize: 11}}
    };

    var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    var mouseX;
    var mouseY;
      $(document).mousemove( function(e) {
          mouseX = e.pageX;
          mouseY = e.pageY;
      });

    function handler1(e){
      var x = mouseX;
      var y = mouseY - 130;
      var a = 1;
      var b = 2;
      $('#custom_tooltip').html('<div>Value of A is'+a+' and value of B is'+b+'</div>').css({'top':y,'left':x}).fadeIn('slow');
      }

    function handler2(e){
      $('#custom_tooltip').fadeOut('fast');
      }

    google.visualization.events.addListener(chart, 'onmouseover', handler1);
    google.visualization.events.addListener(chart, 'onmouseout', handler2);

  }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

http://jsfiddle.net/erp5a/

来源：https://stackoverflow.com/questions/22812616/custom-google-bubble-chart-tooltip

标签

javascript

charts

tooltip

google-visualization