动态调整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组件完成的,因此很难提供一个小提琴/ codepen示例,但是如果有必要,我可以模拟一个至少应该演示该问题的示例。我不确定这是否有必要,因为我怀疑知道他们在说什么的人会知道此问题的答案,但是如果您认为这会有所帮助,请告诉我,我会看看我的意思。可以做到。

编辑:我找到了一种解决方法,但这并不理想。我发现,如果我完全按照放大/缩小处理现有图表并以新大小完全重新创建它,那么它会按照我想要的方式工作,但是重新创建其中一些图表会占用大量处理器资源。我仍然非常希望找到一种可以利用当前图表并重新计算其布局的解决方案。

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

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

,

结果是,答案是amCharts 4不支持我尝试通过响应规则更改的实际属性。有问题的属性为groupDatagroupCount。支持人员告诉我,围绕这些功能的逻辑被认为过于复杂,无法支持动态更新。我请他们重新考虑这个决定。我们将看看他们是否这样做。

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

本文链接:https://www.f2er.com/3077872.html

大家都在问