Question

我有一个有效的Google Combochart。现在，当我将鼠标悬停在图例中的某个项目上时，我想删除特定时刻的突出显示。我使用了“enableInteractivity”选项，但这也删除了工具提示等内容。

我想保留工具提示当然。我似乎无法在互联网上找到关于如何做到这一点的任何事情。我知道我只能禁用工具提示，但不能禁用此突出显示的方法（我想要的东西）..

任何人都知道如何实现这一目标？

提前致谢！

Answer 1

没有内置方法可以做到这一点。高亮显示在SVG中，工具提示也由谷歌内部图表API代码绘制。因此，您必须找到一种方法来阻止高亮显示被吸引到SVG（同时仍然允许工具提示），或者禁用交互性并实现您自己的工具提示，如this answer。下面引用的答案（jeffery_the_wind）：

我最终制作了一个非常漂亮的自定义工具提示弹出窗口好。

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

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

然后我使用了下面的JavaScript。请注意，我遗漏了有关如何设置您的谷歌图表数据和加载的东西谷歌图表包。此代码仅显示如何获取您的自定义 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);

Answer 2

关注this approach for styling on hover，您可以通过应用此css样式摆脱悬停时突出显示的灰色轮廓。

#mychart svg g g g g rect {
    stroke-width:0px;
}

从谷歌谷歌图表中删除突出显示

2 个答案: