amCharts的最新版本(我正在使用v4.7.8)包括一些机制,可以进行响应式图表设计。我正在尝试利用chart.responsive.rules
功能,该功能允许根据图表(和/或内部图表元素)的大小使用不同的图表属性值。
同时,我们在所有图表上实现了“缩放”功能。每个图表都包装在“可缩放”容器元素中,并且图表的样式设置为容器宽度的95%。单击“缩放”图标按钮时,该容器将设置为position: fixed; top: 3rem; right: 3rem; bottom: 3rem; left: 3rem;
,大部分会填满屏幕。
问题在于图表只是……似乎没有注意到这一点。如果我按缩放尺寸创建图表,则它使用正确的规则集,但是如果我按较小的尺寸创建图表,然后将其调整为较大的尺寸,它将继续使用“小”规则集。我尝试过在调整大小后调用chart.appear
,chart.invalidate
和chart.deepInvalidate
,但是结果总是一样的:图表使用最初初始化时使用的任何规则集进行渲染。
让我认为至少发生了一些事情(尽管时机错误)的事实是,当我放大(因此图表为全屏)然后使用水平滚动条时,滚动条的移动速度比我快鼠标光标-几乎好像认为它小于实际大小。这符合我的最初印象。但是,一旦我将图表调整为较小的大小,滚动条就会比鼠标光标移动慢,好像它认为图表比实际的大。
这整个过程都是由多个LitElement Web组件完成的,因此很难提供一个小提琴/ codepen示例,但是如果有必要,我可以模拟一个至少应该演示该问题的示例。我不确定这是否有必要,因为我怀疑知道他们在说什么的人会知道此问题的答案,但是如果您认为这会有所帮助,请告诉我,我会看看我的意思。可以做到。
编辑:我找到了一种解决方法,但这并不理想。我发现,如果我完全按照放大/缩小处理现有图表并以新大小完全重新创建它,那么它会按照我想要的方式工作,但是重新创建其中一些图表会占用大量处理器资源。我仍然非常希望找到一种可以利用当前图表并重新计算其布局的解决方案。