Google Bubble Chart自定义工具提示列无法呈现

时间:2013-01-28 16:41:09

标签: javascript charts tooltip google-visualization

我正在尝试将自定义工具提示添加到气泡图表中,以替换默认工具提示。我已按照文档网站(here)中的说明向DataTable添加新的string列,其中包含role: 'tooltip'。但是,您可以在以下JS小提琴示例中看到自定义工具提示内容不呈现。该图表仍显示默认工具提示。

任何人都知道我还需要做些什么才能显示此自定义工具提示内容?

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

2 个答案:

答案 0 :(得分:2)

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

假设气泡图的div是这样定义的:

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

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

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

答案 1 :(得分:1)

如帮助文件底部所述:

  

目前,以下图表支持HTML工具提示   类型:

     
      
  • AreaChart
  •   
  • BARCHART
  •   
  • K线
  •   
  • 的ColumnChart
  •   
  • ComboChart
  •   
  • 应用于LineChart
  •   
  • ScatterChart
  •   

不幸的是,没有覆盖气泡图,因此您无法向其添加自定义html工具提示。如果您愿意,可以编写自定义javascript来创建工具提示,但是您无法使用现有功能来执行您想要执行的操作。