Как применить горизонтальное выравнивание в легенде amchrts?

Question

Я использую amcharts для создания своего графика, легенда находится в отдельном контейнере.

Применение опции

chart.legend.align = 'right'

не имеет никакого эффекта

Codepen

Answer 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

Я настоятельно рекомендую проверить наше руководство, "Работа с контейнерами" , оносодержит различные детали относительно выкладки вещей в amCharts v4.Кроме того, как только вы выровняете все вправо, легенда все еще будет заблокирована в высоту ее HTML-оболочки, то есть 150px в вашем случае, без возможности доступа к остальному содержимому.Вышеприведенная демонстрация представляет собой развилку того, что можно найти в нашем руководстве «Создание прокручиваемой внешней легенды» .

Answer 2

legend.align не имеет никакого эффекта, потому что ширина легенды 100%.

Используется родительским контейнером при разметке его дочерних элементов.

Вы должны выровнять содержимое с legend.contentAlign:

chart.legend.contentAlign = 'right';

Здесь Я раздвоил твой код, чтобы показать результат.

Еще одна ошибка в вашем коде пера - значение legend.valign

Допустимые значения:

"top" | "средний" | "дно" | "Ни один"

См. VerticalAlign .

Так что вы должны установить это так:

chart.legend.valign = 'middle';