Блог

У меня есть динамические данные (количество просмотров (количество) в / с месяцев) в качестве входных данных для моего многострочного графика библиотеки apexchart.

Это хорошо работает с небольшими данными. Однако, когда я увеличиваю размер данных, график выглядит очень плохо (показано на рисунке ниже). Я знаю причину этого. Это связано с фиксированной шириной графика. Ширина строки рассчитывается на основе ширины графика и количества элементов данных. Но тогда как это исправить? Как обрабатывать большие и маленькие данные в div фиксированного размера?

Шаг 1: Добавьте ползунок в родительский div графа (переполнение-x: авто).

Шаг 2: увеличьте ширину графика на основе ваших данных. Не оставляйте его фиксированным. Создайте логику, которая изменяет ширину графика (а не ширину div, содержащую график) на основе данных. Даже если это выходит за пределы родительского div, это нормально, поскольку мы добавили ползунок только для решения этой проблемы.

Шаг 3: добавьте логику для ширины столбцов. В apexcharts ширина полосы задается в процентах. Так, например: ширина строки для меньшего количества данных = 10 (10% от ширины графика). ширина строки для дополнительных данных = 30 (30% от ширины графика)

Таким образом, даже если ширина нашего div, содержащего график, фиксирована, он сможет обрабатывать динамические данные больших и малых размеров.

Пример решения: https://drive.google.com/file/d/1LzSNaYfzZNKQzOs8r9NVDqmQiFil-Xho/view?usp=sharing