我有一个有效的谷歌组合图。现在,当我将鼠标悬停在图例中的某个项目上时,我想删除特定时刻的突出显示。我使用了“enableInteractivity”选项,但这也删除了工具提示之类的东西。
我当然想保留工具提示。我似乎无法在互联网上找到任何关于这如何可能的信息。我知道我只能禁用工具提示,但不能禁用此突出显示的方法(我想要的)..
有人知道我怎么能做到这一点吗?
提前致谢!
我有一个有效的谷歌组合图。现在,当我将鼠标悬停在图例中的某个项目上时,我想删除特定时刻的突出显示。我使用了“enableInteractivity”选项,但这也删除了工具提示之类的东西。
我当然想保留工具提示。我似乎无法在互联网上找到任何关于这如何可能的信息。我知道我只能禁用工具提示,但不能禁用此突出显示的方法(我想要的)..
有人知道我怎么能做到这一点吗?
提前致谢!
遵循这种在悬停时进行样式设置的方法,您可以通过应用此 css 样式来消除悬停时突出显示的灰色轮廓。
#mychart svg g g g g rect {
stroke-width:0px;
}
没有内置的方法可以做到这一点。高光被绘制到 SVG 中,工具提示也由谷歌内部图表 API 代码绘制。因此,要么你必须找到一种方法来阻止高光被绘制到 SVG 中(同时仍然允许工具提示),或者像这个答案一样禁用交互性并实现你自己的工具提示。下面引用的答案(由jeffery_the_wind 提供):
我最终制作了一个运行良好的自定义工具提示弹出窗口。
假设气泡图的 div 定义如下:
<div id="bubble_chart_div"></div>
然后我使用了下面的 JavaScript。请注意,我遗漏了有关如何设置您的谷歌图表数据和加载谷歌图表包的内容。此代码仅显示如何获取自定义工具栏弹出窗口。
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);