删除高亮显示的酒吧谷歌图表

Question

我有一个谷歌Combochart工作。现在，我想删除特定时刻的高光，当我将鼠标悬停在图例中的某个项目上时。我使用了选项“enableInteractivity”，但这也删除了诸如工具提示之类的东西。

我想保留当然的工具提示。我似乎无法在互联网上找到任何可能的方式。我知道我可以只禁用工具提示，但不是禁用此突出显示的方法（我想要的）。

任何人都有一个想法，我可以实现这一点？

在此先感谢！

Answer 1

没有内置的方法来做到这一点。重点是绘制到SVG和工具提示也由谷歌内部图表API代码绘制。所以要么找到一种方法来阻止突出显示被引入SVG（同时允许提示），或者禁用交互性并实现自己的工具提示，如this answer。答案（由jeffery_the_wind）引用如下：

我最终使正在工作的相当好 一个自定义的工具提示弹出。

假设你的气泡图格的定义如下：

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

然后我用JavaScript的下方。请注意，我忽略了关于如何设置谷歌图表数据和加载 谷歌图表软件包的内容 。此代码仅显示如何获取自定义 toolip弹出窗口。

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