amChart3设置cluster为false仍居中?如何实现重叠图表?

完全可以通过编程实现示例图的错位重叠柱状图效果。你遇到的“设置cluster: false后图表依然居中”的问题,本质是amCharts3的属性设置位置错误、默认自动居中逻辑未关闭导致的,按以下步骤调整即可:
- 修正
clustered属性的设置位置
不要在chart根配置上寻找全局cluster开关,amCharts3中控制系列是否同位置并排的属性,是挂载在每一个柱状图graph实例上的clustered参数,需要给所有需要重叠的柱状图单独设置clustered: false,才能真正关闭同分类下的自动并排逻辑,这是实现重叠效果的基础前提。 - 配置水平偏移实现错位效果
当所有系列关闭并排逻辑后,amCharts3默认会把同分类下的所有柱体强制居中堆叠在刻度正中心,要实现示例图的散开重叠效果,需要给每个graph单独配置位置参数:- 给不同系列设置差异化的
offset值,比如靠左的柱设offset: -15,居中的柱设offset: 0,靠右的柱设offset: 15,数值大小匹配柱宽调整,即可实现沿分类轴中心向左右散开的重叠效果 - 如需更精准的位置控制,可以给每个graph配套设置
columnWidth、startLocation、endLocation参数,为每个系列划定独立的分类轴占位区间,避免柱体溢出刻度边界
- 给不同系列设置差异化的
- 关闭自动居中校准逻辑
在chart全局配置中设置syncWithGrid: false,这个属性默认会自动将同分类下的柱体组居中对齐到刻度网格线位置,不关闭的话,之前设置的所有偏移量都会被强制校准回中心位置,无法实现错位效果。
内容的提问来源于stack exchange,提问作者seotaejun
相关产品推荐
相关产品推荐

