amCharts不显示最初隐藏的div的图表

Question

我正在使用amCharts(在幕后使用Raphaël)将一些图表渲染为SVG; 并且注意到如果SVG在最初不可见的div中渲染,则当div变为可见时,浏览器不会立即渲染图像.但是,如果我修改显示,例如通过调整浏览器大小或按Ctrl-鼠标滚轮缩放,则在重绘页面时,SVG图像将按预期呈现.

div可见性切换的确切方法是通过Bootstrap的选项卡式导航栏.

我承认对SVG不是很有经验 - 这是浏览器渲染或amCharts的SVG标记的问题,还是当我能告诉SVG的可见性发生变化时,我是否需要显式调用某种重绘方法？

这是一个说明问题的jsFiddle ; 如果您切换到第2部分(在Chrome,Firefox中),则图表最初不可见.调整显示大小会使其显示.

Answer 1

我已经找到了初始行为和解决方法的原因 - 并且它都是amCharts特定的(与SVG本身无关)所以我相应地重新标记了标题.

当amCharts创建SVG时,它需要(或至少,决定)以绝对值定义宽度和高度.这些是基于目标div的大小,通过offsetWidth和offsetHeight属性获得.

非活动选项卡具有display: none属性集,因此DOM的这部分甚至不会呈现,因此两个大小属性都返回零.这最终会导致amCharts在chart.write为隐藏div调用时创建一个0x0 SVG图表.

调整大小修复因为每个图表都向onresize窗口事件注册一个监听器,该事件调用图表的handleResize方法.这会强制根据div的新(当前)尺寸重新计算宽度和高度.

总而言之,我认为有两种方法可以解决这个问题:

• chart.write当且仅当其选项卡可见时才调用图表.
• handleResize标签更改时调用每个图表的方法.

(第一个选项避免了渲染不可见图表的初始命中,但每次更改标签时都会进行完全重绘.后者需要预先设置,但之后可能更快.对于奖励标记,最佳解决方案是在每次调整大小时,每次调整图表时,第一次变得可见,但这会更复杂,因为它会涉及干扰默认事件监听器等.)

更新:渲染隐形图表还有其他问题; 特别是,我发现高度计算的问题没有考虑域轴所需的空间,因此将图表拉出其div.这不是通过调用来解决的handleResize- measureMargins事先调用它看起来应该工作但是没有.(可能有一种方法可以在此之后调用以使其工作,resetMargins但此时它开始感觉非常脆弱......)

因此我认为在不可见的div上首次渲染图表是不切实际的,所以我选择了上面的子弹组合.当第一次显示图表的选项卡然后调用chart.write相应的图表对象时,我会监听- 每当选项卡发生更改时,所有先前渲染的图表都会被告知处理调整大小.

Answer 2

我有同样的问题，但我的解决方案是显示的替代方案：无，你可以在css中使用此类

.hidden {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

这会在屏幕上消失，但对 amchart 可见，因此图表的分辨率永远不会丢失大小！！！！