Анимированные диаграммы

рейтинг 1.0 из 5

Cкрипт «Анимированные диаграммы» позволяет по-новому представить числовую информацию на вашем сайте. Поддерживается два типа диаграмм: вертикальные пары и горизонтальные линии. Имеется возможность вызова в пределах одной страницы одновременно нескольких диаграмм одного или разных типов, при этом у каждой можно задать свои настройки и использовать свой массив данных. Запуск анимации начинается только в тот момент, когда диаграмма будет в пределах области просмотра пользователя.

«Вертикальные пары» работают следующим образом: задается массив числовых значений (можно использовать как целые, так и дробные значения, например: 8, 6.33, 9.2), размерности и легенда (надпись под спаренными столбцами и выноска с цветным обозначением). Обработчик по циклу обходит пары и выбирает в них наибольшие значения, затем принимает их за 100% и высчитывает доли остальным значениям. Таким образом диаграмма строится в полностью автоматическом режиме с всегда точным процентным соотношением.

  • Скрипт позволяет настроить следующие параметры:
  •  высота блока;
  •  ширина одного столбика;
  •  расстояние между спаренными столбиками;
  •  отступ пар столбцов слева и справа от границы блока;
  •  отступ текста столбика от верхнего края;
  •  цвета столбиков и пунктов легенды;
  •  скорость анимации.

Расстояния между с парами столбцов скрипт рассчитывает автоматически в зависимочти от количества заданных значений в массиве. Стоит учитывать тот факт, что при недостаточной ширине блока необходимо уменьшить число значений в массиве, либо увеличить ширину блока, либо перенастроить ширину столбцов и отступов между ними. В противном случае отображение диаграммы будет нарушено.

«Горизонтальные линии» работают немного иначе: задается массив числовых значений, размерностей и легенды (надписи слева от линии), затем обходчик выбирает наибольшее значение массива и принимает его за 100%, далее высчитываются доли остальных значений и строится диаграмма.

  • Скрипт позволяет настроить следующие параметры:
  •  ширина блока легенды;
  •  высота одной линии;
  •  отступ между линиями;
  •  отступ линий сверху и снизу от границы блока;
  •  отступ текста линии справа;
  •  цвет всех линий, цвет активной линии;
  •  порядковый номер активной линии;
  •  скорость анимации.

Массив данных при любом типе отображения можно формировать вручную, либо при помощи информера. В качестве легенды можно использовать текст и html-теги.

Все предложения по расширению функционала и улучшению работы плагина оставляйте в комментариях.


  • Дата: 27.05.2018, 17:06
  • Просмотры: 53
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий