可能是 Javascript 冲突答案

【问题标题】：Probably Javascript conflicts可能是 Javascript 冲突
【发布时间】：2014-03-23 10:24:36
【问题描述】：

我不是专业开发人员，仅对 html 和 css 了解不多。我正在尝试在 joomla 网站上工作。我试图将 Google 图表添加到我的页面。实际上它是我通过加载模块功能插入到文章中的一个模块。但似乎有冲突，图表显示不正确。似乎与这些问题存在一些冲突，但我不确定如何计算。 http://goo.gl/v1GVWk 如果您转到上面的链接并转到选项卡并打开徒步地图选项卡，您将看到该错误。图表的宽度非常小。我想显示 100% 以便它可以响应。我也尝试将宽度更改为 px，但没有运气。请帮我。 ..

【问题讨论】：

为了记录，我刚刚重新访问了页面，图表现在以全宽显示，这意味着这个问题不能独立存在（因为它依赖于无法正常工作的实时站点） .最好使用损坏的代码对其进行编辑并添加您所做的修复以使其再次正常工作。
不确定它是缓存还是其他东西，但在检查元素后它会工作一段时间。一段时间后它再次停止工作。我正在使用 JA Google Chart 模块。我从内容中的模块位置导入图表。

标签： joomla conflict

【解决方案1】：

即使外包装 div#ja-google-chart-wrapper-404 设置为 100% 宽度，两个子元素仍固定为 400 像素。具体来说，将图像设置为固定宽度的<svg width="400"> 元素加上包裹它的div 的宽度设置为400px。即使您将它们的父级设置为 100%，如果图像本身具有固定宽度，它也不会扩展以填充空间。

检查您的模块或 Google 图表本身中是否有允许您在插入的图像上设置不同宽度（或根本没有）的设置。

一种解决方案是在单击 a#tab1-trekking-map 时调整 SVG 元素的大小。我刚刚在 Chrome 控制台中对此进行了测试，它可以触发地图调整到容器的全宽：

jQuery("#ja-google-chart-wrapper-404 svg").resize();

将这个（或类似的东西）添加到你的其他脚本中，当你的标签被点击时调用。如果图表包装器的 ID 是动态生成的，您可能需要稍作调整，但触发 resize()（如 Niet 和 miguelmpn 所述）应该可以很好地解决问题。

【讨论】：

亲爱的摩根感谢您的快速回答。但是，如果您在任何浏览器中检查元素，图表就会变得正确。有什么想法吗？
我刚刚又试了一次，如果我在刷新页面时打开了该选项卡，图表会显示为全角。如果我打开并刷新了另一个选项卡，则当我选择选项卡时图表为 400 像素，即使我检查了元素（使用 Chrome）。
那么您认为问题出在哪里？艾米的解决方案？
用我刚刚成功测试的一些代码编辑了我的答案。试一试。
是的，chart wrapper 的 id 是动态生成的

【解决方案2】：

我从未使用过 Google 图表，但您遇到的情况也发生在 Google 地图上。

您有两个选择，要么使用不透明度（或者可能隐藏可见性）而不是显示：无，这将使图表在页面打开时自动调整大小。

另一个选项是触发调整大小事件，类似这样...Google chart redraw/scale with window resize

希望对你有帮助

【讨论】：

你真快。很抱歉我的java脚本知识这么差。

【解决方案3】：

隐藏元素的宽度为零。因此，图表认为您的窗口宽度为零并最终使用其最小宽度。

尝试在显示选项卡时在窗口上触发resize 事件，这应该会导致响应代码运行。

【讨论】：

你是怎么做到的？请问是哪个文件？
我不知道，也没有时间去了解 - 但这是您需要做的，并且考虑到您是负责人，您应该这样做。不要使用你不懂的工具，好吗？