使用CSS浮动属性与Google可视化图表 [英] Using CSS Float property with Google Visualization Charts

问题描述

我有几个饼图使用Google可视化工具和一个PHP后端服务器。工作很好。

I have several Pie Charts made using Google Visualization tools and a PHP backend server. Works just fine.

但是，如果我向容器div添加一个简单的内联样式（特别是float：left style），图表将失去所有的交互性。它绘制精细，它只是不会突出任何东西，当有一个鼠标悬停或弹出的工具提示（正常的GVis行为）。

However, if I add a simple inline style to the container div (specifically the float:left style) the chart loses all interactivity. It draws fine, it just won't highlight anything when there is a mouse-over or popup with a tooltip (normal GVis behavior).

基本上，我想知道什么技术上发生，什么是解决方法。最终结果应该是两个饼图并排，第三个在下面。

Basically, I was wondering what was happening technically, and what would be a workaround. The end result should be two pie charts side-by-side with a third one below.

谢谢。

这里是未来后代的工作Div结构和CSS标记。

Here's the working Div structure and CSS markup for future posterity.

<div id="firstLineofCharts">
  <div id="chart1" style="display:inline-block; width:400px; height:350px;"></div>
  <div id="chart2" style="display:inline-block; width:400px; height:350px;"></div>
</div>
<div id="secondLineofCharts" style="float:clear"></div>

显然，您可以使用id和类将它转换为完整的CSS标记。

Obviously you can convert this to full CSS Markup using the id's and classes.

推荐答案

之后你做了一个clearfix吗？或者，您可以将以下样式应用于div并比较其效果：

Did you do a clearfix afterwards? Alternatively, you can apply the following style to the div and compare its effect:

display: inline-block;

这篇关于使用CSS浮动属性与Google可视化图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！