如何在Amchrts图例中应用水平对齐?

时间:2019-03-20 14:31:38

标签: javascript legend amcharts

我正在使用amcharts创建图表,图例位于单独的容器中。

应用选项

chart.legend.align = 'right'

没有效果

Codepen

2 个答案:

答案 0 :(得分:5)

如果您想使图例的内容(即图例项在右侧)而不是整个图例本身对齐(我想是这样,因为图例位于外部自定义<div>中,并且直接从我们的主题指南中删除。如果您有其他意思,请告知我们。),则必须更改其layout,然后对齐其内容通过contentAlign向右移动。例如

// Align legend items to the right
chart.legend.layout = "vertical";
chart.legend.contentAlign = "right";

这是一个演示:

https://codepen.io/team/amcharts/pen/0aa8b7741a25a86fafa48b747077b8e3

我强烈建议您查看我们的指南"Working with Containers",其中包含有关在amCharts v4中进行布局的各种详细信息。此外,将所有内容向右对齐后,图例仍将被锁定在其html包装器的高度中,即您的情况下为150px,而无法访问其余内容。上面的演示是我们"Making the external legend scrollable" guide中发现的内容的一个分支。

答案 1 :(得分:3)

legend.align不起作用,因为图例的宽度为100%

  

父级Container在布置其子级时使用。

您应将内容与legend.contentAlign对齐:

chart.legend.contentAlign = 'right';

Here我分叉了您的密码笔以显示结果。

代码笔中的另一个错误是legend.valign的值

有效值为:

  

“顶部” | “中间” | “底部” | “没有”

请参见VerticalAlign

所以您应该这样设置:

chart.legend.valign = 'middle';