Javascript 自定义谷歌气泡图工具提示_Javascript_Charts_Tooltip_Google Visualization

Javascript 自定义谷歌气泡图工具提示

javascript charts google-visualization

Javascript 自定义谷歌气泡图工具提示,javascript,charts,tooltip,google-visualization,Javascript,Charts,Tooltip,Google Visualization,我正在尝试为我的Google气泡图创建一个自定义工具提示，它在鼠标悬停时显示内容，然后在鼠标悬停时消失。现在它只显示“标准”谷歌工具提示内容。这里还有一个问题，我是从哪里得到JS的，但我不能对此发表评论，因为我的代表级别不够高。下面是我的代码和JSFIDLE。非常感谢您的帮助。谢谢 <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"><

我正在尝试为我的Google气泡图创建一个自定义工具提示，它在鼠标悬停时显示内容，然后在鼠标悬停时消失。现在它只显示“标准”谷歌工具提示内容。这里还有一个问题，我是从哪里得到JS的，但我不能对此发表评论，因为我的代表级别不够高。下面是我的代码和JSFIDLE。非常感谢您的帮助。谢谢

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Data1'、'Data2'、'Data3'、'Data4'、'Data5'、'Data6'、'Data7'、'Data8']，
['这是数据1'，75002757，'这是数据4'，4，'这是数据6'，'这是数据8'，330]，
]);
变量选项={
标题：'测试标题'，
hAxis:{title:'Test hAxis'}，
vAxis:{title:'Test vAxis'}，
气泡：{textStyle:{fontSize:11}}
};
var chart=new google.visualization.BubbleChart（document.getElementById（'chart_div'））；
图表绘制（数据、选项）；
var mouseX；
var mouseY；
$（文档）.mousemove（函数（e）{
mouseX=e.pageX；
mouseY=e.pageY；
});
功能手柄1（e）{
var x=鼠标；
变量y=mouseY-130；
var a=1；
var b=2；
$（“#自定义工具提示”）.html（'A的值为“+A+”，B的值为“+B+”）.css（{'top'：y，'left'：x}）.fadeIn（'slow'）；
}
功能手柄2（e）{
$（“#自定义工具提示”）.fadeOut（'fast'）；
}
google.visualization.events.addListener（图表'onmouseover'，handler1）；
google.visualization.events.addListener（图表'onmouseout'，handler2）；
}

您缺少自定义工具提示div。请参见此示例：您做错了。谷歌图表的工具提示可以通过使用默认API轻松定制：谢谢你！你让它按照我需要的方式工作。vorrtex，如果你查看该页面底部，它表明气泡图不支持自定义工具提示。+1@asgallant是一个很好的参考，尽管事实是Google图表不支持自定义工具提示。大多数可视化API图表都支持自定义工具提示；BubbleCharts是少数几个不这样做的人之一。