обработка динамических данных большого или малого размера в div фиксированной ширины

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

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

введите здесь описание изображения


person Parth Choksi    schedule 21.12.2020    source источник


Ответы (1)


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

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

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

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

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

person Parth Choksi    schedule 21.12.2020