Google气泡图自定义工具提示栏不显示 [英] Google Bubble Chart custom tooltip column does not render

问题描述

我正在尝试向气泡图中添加自定义工具提示，以替换默认工具提示。我已按照文档网站（此处）中的说明添加新的 string 列到DataTable，使用 role：'tooltip'。但是，您可以在以下JS小提示示例中看到自定义工具提示内容不呈现。图表仍显示默认工具提示。

任何人都知道我还需要做些什么才能让这个自定义工具提示内容显示出来？

http://jsfiddle.net/MPBmY/2 /

解决方案

我最终创建了一个工作效果非常好的自定义工具提示弹出窗口。 p>

假设您的气泡图的div定义如下：

  ; div id =bubble_chart_div>< / div> 
  

然后我使用下面的JavaScript。请注意，我没有提供有关如何设置Google图表数据和加载Google图表包的信息。此代码仅显示如何获取您的自定义toolip弹出窗口。

  var mouseX; 
 var mouseY; 
 $（document）.mousemove（function（e）{
 mouseX = e.pageX; 
 mouseY = e.pageY; 
}）; 
 
 / * 
 * 
 *实例化并将图表渲染到屏幕
 * 
 * / 
 var bubble_chart = new google.visualization .BubbleChart（document.getElementById（'bubble_chart_div'））; 
 bubble_chart.draw（customer_product_grid_data_table，options）; 
 
 / * 
 *这些函数处理自定义工具提示显示
 * / 
 function handler1（e）{
 var x = mouseX; 
 var y = mouseY  -  130; 
 var a = 1; 
 var b = 2; 
 $（'＃custom_tooltip'）。html（'< div> A的值是'+ a +'，B的值是'+ b +'< / div>'）。css（{'top' ：y，'left'：x}）。fadeIn（'slow'）; 
} 
 function handler2（e）{
 $（'＃custom_tooltip'）。fadeOut（'fast'）; 
} 
 
 / * 
 *附加处理工具提示弹出窗口的函数
 * handler1在鼠标移动到气泡中时被调用，处理程序2当鼠标移出泡泡时被调用
 * / 
 google.visualization.events.addListener（bubble_chart，'onmouseover'，handler1）; 
 google.visualization.events.addListener（bubble_chart，'onmouseout'，handler2）; 
  

I am trying to add a custom tooltip to a Bubble chart, to replace the default tooltip. I have followed the instructions from the docs site (here) to add a new string column to the DataTable, with role: 'tooltip'. However, you can see in the following JS fiddle example, that the custom tooltip content does not render. The chart still shows the default tooltip.

Anyone know what I still need to do to get this custom tooltip content to show up?

http://jsfiddle.net/MPBmY/2/

解决方案

I ended up making a custom tool-tip pop-up that is working pretty well.

Assuming your div for the bubble chart is defined like this:

<div id="bubble_chart_div"></div>

Then I used the JavaScript below. Please note that I left out that stuff about how to set up your google chart data and loading the google charts package. This code just shows how to get your custom toolip popup.

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

    /*
     *
     *instantiate and render the chart to the screen
     *
     */
    var bubble_chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart_div'));
    bubble_chart.draw(customer_product_grid_data_table, options);

    /*
     * These functions handle the custom tooltip display
     */
    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');
    }

    /*
     *  Attach the functions that handle the tool-tip pop-up
     *  handler1 is called when the mouse moves into the bubble, and handler 2 is called when mouse moves out of bubble
     */
    google.visualization.events.addListener(bubble_chart, 'onmouseover', handler1);
    google.visualization.events.addListener(bubble_chart, 'onmouseout', handler2);

这篇关于Google气泡图自定义工具提示栏不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！