Question

我正在尝试为我的Google气泡图创建自定义工具提示，该图表在鼠标悬停时显示内容，然后在mouseout上消失。现在它只显示＆＃34;标准＆＃34; Google工具提示内容。还有另外一个问题我在这里得到了JS，但由于我的代表不够高，所以我无法评论它。我的代码和jsfiddle在下面。非常感谢所有帮助。谢谢！

<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/

自定义Google Bubble Chart工具提示

0 个答案: