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

Question

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

应用选项

chart.legend.align = 'right'

没有效果

Codepen

Answer 1

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

This is used by parent Container when layouting its children.

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

chart.legend.contentAlign = 'right';

Here我把你的码笔分叉出来显示结果

你码笔的另一个错误是legend.valign

的值

有效值为：

"top" | "middle" | "bottom" | "none"

参见 VerticalAlign。

所以你应该这样设置:

chart.legend.valign = 'middle';

Answer 2

如果您希望对齐图例的内容，即右侧的图例项，而不是整个图例本身（我假设是这样，因为图例位于外部自定义 <div>，这是直接从我们关于该主题的指南中摘录的。如果您还有其他意思，请告诉我们。），那么您必须更改其 layout，然后对齐其 contents 通过 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", it contains various details regarding laying things out in amCharts v4. Also, once you align everything to the right, the legend is still going to be locked into the height of its html wrapper, i.e. 150px in your case, with no way to access the rest of the content. The demo above is a fork of what's found in our "Making the external legend scrollable" guide。

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

How to apply horizontal alignment in amchrts legend?

javascript

legend

amcharts