如何在 amcharts 图例中应用水平对齐？

Posted 2023-02-16

【中文标题】如何在 amcharts 图例中应用水平对齐？

【英文标题】：How to apply horizontal alignment in amchrts legend?

【发布时间】：2019-08-11 07:01:57

【问题描述】：

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

申请选项

chart.legend.align = 'right'

没有效果

Codepen

【问题讨论】：

你能附上一张你想要达到什么目的的图片吗？图表左侧的图例项列？

【参考方案1】：

如果您要对齐图例的内容，即图例项向右对齐，而不是整个图例本身（我假设这是因为图例位于外部自定义 <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 中的一个分支。

【讨论】：

是的，这正是我要找的，非常感谢！

【参考方案2】：

legend.align 没有效果，因为图例的宽度是100%。

这是由父容器在布局其子容器时使用的。

你应该将内容与legend.contentAlign对齐：

chart.legend.contentAlign = 'right';

Here我fork了你的代码笔来显示结果。

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

有效值为：

"顶部" | “中间” | “底部” | “无”

见VerticalAlign。

所以你应该这样设置：

chart.legend.valign = 'middle';