Skillset - графики для сайта

 

Модуль отображения числовой информации в виде графиков. Подойдет для бизнес порталов, при предоставлении какой либо статистики. 

Модуль может выводить данные в 3-х вариантах: горизонтальная диаграмма, круговая диаграмма и калькуляция. Вывод данных анимирован.

Модуль Skillset устанавливается стандартным установщиком Joomla. После установки перейдем в меню панели администратора "Расширения -> Модули".

В окне "Модули" появился новый модуль Skillset. На данный момент он не активен.  Заменим заголовок модуля на необходимый нам. Выберем место положения модуля в шаблоне сайта и активируем его. Так же при использование дополнительных плагинов возможно вывести модуль в статью.

Приступим к настройке.

Рассмотрим вкладку "Модуль".

В данной вкладке первое поле "Display" - данная настройка позволяет выбрать один из трех вариантов отображения информации:

Count

 Circular

Skills

Для создание нужных данных щёлкнем на кнопку "Add a new skill".

В первом поле внесем название отображаемого элемента, во второе поле внесем нужно число. Таким образом можно создать неограниченное количество элементов. После создания и сохранения элементов, при выборе вариантов отображение в поле "Display", примеры вывода данных будут отображаться в самом модуле. 

Теперь нажав на один из внесенных элементов в примере, выведется окно смены цвета диаграммы. Таким образом можно поменять цвета отображения для всех внесенных вами элементов.

Кнопка "Remove skill" удаляет внесенный элемент из списка.

Вкладка "Привязка к пунктам меню".

Позволяет выбрать один, несколько или все пункты меню, в которых будет отображаться модуль.

Вкладка "Advanced Settings".

В данную вкладку входят следующие насройки:

Load jQuery? - загружать или нет библиотеку JQuery, данная библиотека необходима для анимированного эффекта пересчета введенных вами цифр в элемент графика. Если данная библиотека уже используется в вашем шаблоне, то не нужно ее дополнительно подгружать.

Load CSS? - загружать или нет CSS файл для отображения графиков. Если вы не хотите подгружать CSS стили отдельно, то вы можете скопировать CSS код из файла "/mod_skillset/css/skillset.css" в файл CSS стилей вашего шаблона.

Circle Options - настройки для отображения графиков в виде кругов.

Circle Diameter - диаметр отображаемой круговой диаграммы в пикселях.

Circle Thickness - толщина круговой диаграммы внутри круга в пикселях.

Circle Font Size - размер текста.

Circle Color - цвет текста.

Circle Background Color - задний фон.

Module Options - дополнительные настройки.

Module Class Suffix - в данное поле вводится Класс суффикс из вашего CSS файла для изменения отображения графиков.

HTML-тег модуля - данное окно позволяет выбрать тег модуля, внутри которого будет располагаться диаграмма.

Размер Bootstrap - позволяет задать сколько колонок будет использовано в модуле.

HTML-тег заголовка - позволяет выбрать формат заголовка.

CSS-класс заголовка - позволяет выбрать CSS класс для отображения заголовка.

Вложения:
Скачать этот файл (jb-skillset-module_1.4.1.zip)Skillset[ ]47 kB

Печать

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

Защитный код
Обновить