动态调整amCharts 4图表大小时触发响应行为



amCharts的最新版本(我使用的是v4.7.8版(包括两种机制,允许进行响应式图表设计。我正在尝试利用chart.responsive.rules功能,它允许根据图表(和/或内部图表元素(的大小使用不同的图表属性值。

同时,我们在所有图表上都实现了"缩放"功能。每个图表都封装在一个"可缩放"的容器元素中,并且图表的样式为容器宽度的95%。单击"缩放"图标按钮时,容器设置为position: fixed; top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;,主要填充屏幕。

问题是图表只是。。。似乎没有注意到这一点。如果我以缩放后的大小创建图表,它将使用正确的规则集,但如果我以较小的大小创建图表,然后将其调整为大,它将继续使用"小"规则集。我试过在调整大小后调用chart.appearchart.invalidatechart.deepInvalidate,但结果总是一样的:图表使用最初初始化时使用的任何规则集进行渲染。

有一件事让我觉得至少发生了一些事情(尽管时间不对(,那就是当我放大(所以图表是全屏的(,然后使用水平滚动条时,滚动条的移动速度比我的鼠标光标快,几乎就像它认为它比实际小一样。这与我最初的印象一致。然而,一旦我将图表调整回较小的大小,滚动条的移动速度就会比鼠标光标慢,就好像它认为图表比实际情况更大一样。

这整件事都是用多个LitElement web组件完成的,所以很难提供一个fiddle/codepen示例,但如果有必要,我可以模拟一个至少应该演示问题的示例。我不确定这是否有必要,因为我怀疑知道他们在谈论什么的人会立刻知道这个问题的答案,但如果你认为这会有所帮助,请告诉我,我会看看我能做些什么。

编辑:我找到了一个变通办法,但并不理想。我发现,如果我在放大/缩小时完全处理掉现有的图表,并以新的大小完全重新创建它,那么它的行为就会按照我想要的方式进行,但重新创建其中一些图表需要大量的处理器。我仍然非常希望找到一个可以利用当前图表并重新计算其布局的解决方案。

在调整大小后尝试使用setTimeout(((=>{chart.responsive.enabled=false;chart.responsive.enabled=true;}(

事实证明,amCharts 4不支持我试图通过响应规则更改的实际属性。所讨论的性质是groupDatagroupCount。支持告诉我,围绕这些功能的逻辑被认为过于复杂,无法支持动态更新。我请他们重新考虑这个决定。我们将看看他们是否这样做。

在此期间,我所做的解决问题的工作是创建两个图表,一个为较大的尺寸配置,另一个为较小的尺寸配置。我只是在放大/缩小时交换显示的图表。

最新更新