Создание адаптивной диаграммы в amchart v4 - PullRequest
0 голосов
/ 15 декабря 2018

Итак, я прочитал в документации, что адаптивность для amchart 4 все еще находится в стадии разработки, и, возможно, это объясняет мои трудности здесь.

Я пытаюсь создать диаграмму, которая будет правильно уменьшаться без искажения отображения данных.Я пытался сжать родительский контейнер с помощью правила @media, но это исказило данные.

Что происходит: когда я сужаю представление (то есть открываю инспектор или запускаю веб-приложение на меньшем компьютере), половина ярлыков категорий на оси X исчезает по какой-то странной причине.Кажется, что любой другой лейбл точно ушел.

Я пробовал установить:

categoryAxis.minWidth = 0;

В качестве аппроксимации свойства minHor horizontalGap в v3, но, конечно, они не совпадают.

Я попытался установить ширину столбца в надежде, что это повлияет на метки.

series.columns.template.width = am4core.percent(50);

И, наконец, я попытался настроить как всю диаграмму как адаптивную, так и категорию Axis:

categoryAxis.responsive.enabled = true;

Но при этом возникает следующая ошибка, которую я не могу найти в сети для поддержки:

bootstrap:114 Uncaught (in promise) Error: Loading chunk vendors~responsivedefaults failed.

Я не уверен, в чем проблема или как ее решитьЯ не могу поверить, что они выпустили версию амхартов, у которых не было реагирования в этом возрасте, и поэтому я думаю, что это должно быть что-то, что я делаю неправильно.

1 Ответ

0 голосов
/ 16 декабря 2018

Итак, я нашел v4, эквивалентный minHorizontGap, и это решило проблему для меня.

categoryAxis.renderer.minGridDistance = 60;

Это так просто.Я до сих пор не знаю, почему responseive.enabled не работает, но это удовлетворительное решение.

...