Google 气泡图自定义工具提示列不会呈现

Google Bubble Chart custom tooltip column does not render

本文关键字：工具提示 气泡 自定义 Google      更新时间：2023-09-26

我正在尝试向气泡图添加自定义工具提示，以替换默认工具提示。 我已经按照文档站点（此处）的说明向数据表添加了一个新的string列，并带有role: 'tooltip' . 但是，您可以在以下 JS 小提琴示例中看到，自定义工具提示内容不会呈现。 图表仍显示默认工具提示。

有人知道我还需要做什么才能显示此自定义工具提示内容吗？

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

我最终制作了一个自定义工具提示弹出窗口，效果很好。

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

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

然后我使用了下面的JavaScript。 请注意，我省略了有关如何设置谷歌图表数据和加载谷歌图表包的内容。 此代码仅显示如何获取自定义工具ip弹出窗口。

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

如帮助文档底部所述：

目前，以下图表支持 HTML 工具提示 类型：

  • 面积图
  • 条形图
  • 蜡烛图
  • 柱形图
  • 组合图
  • 折线图
  • 散点图

遗憾的是，气泡图未被覆盖，因此您无法向其添加自定义 html 工具提示。如果需要，您可以编写自定义 JavaScript 来创建工具提示，但不能使用现有功能来执行您想要执行的操作。

相关文章：