Плагин jQuery - Visualize

Visualize - плагин jQuery, который преобразует таблицы в наглядные графики с помощью элемента HTML5 canvas.

Как использовать плагин?

Первым делом нужно создать разметку HTML:

<table >
	<caption>Продажи по категориям в 2009 году</caption>
	<thead>
		<tr>
			<td></td>
			<th>еда</th>
			<th>авто</th>
			<th>домашний скарб</th>
			<th>мебель</th>
			<th>кухни</th>
			<th>ванны</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Маша</th>
			<td>150</td>
			<td>160</td>
			<td>40</td>
			<td>120</td>
			<td>30</td>
			<td>70</td>
		</tr>
		<tr>
			<th>Дима</th>
			<td>3</td>
			<td>40</td>
			<td>30</td>
			<td>45</td>
			<td>35</td>
			<td>49</td>
		</tr>
		<tr>
			<th>Петя</th>
			<td>10</td>
			<td>180</td>
			<td>10</td>
			<td>85</td>
			<td>25</td>
			<td>79</td>
		</tr>
		<tr>
			<th>Катя</th>
			<td>40</td>
			<td>80</td>
			<td>90</td>
			<td>25</td>
			<td>15</td>
			<td>119</td>
		</tr>		
	</tbody>
</table>

Обратите внимание, что используется элемент caption. На его основе плагин создает название графика.

Теперь можно вызывать плагин для отображения диаграммы:

$('table').visualize();

 

Как найти график на странице

Метода  visualize() возвращает новый элемент диаграммы, который позволяет использовать цепочки jQuery для дальнейших действий. Диаграмма сгенерированная плагином содержится в элементе div с классом "visualize" вместе с классом типа диаграммы, например, "visualize-pie". Данные классы облегчают процесс поиска диаграммы после генерации для дальнейших изменений. Также можно использовать хранение диаграммы в переменной: var myChart = $('table').visualize();. Затем можно просто задействовать переменную myChart для внесения изменений или удаления диаграммы со страницы.

 

Обновление диаграммы

Каждая сгенерированная плагином диаграмма имеет пользовательское событие, которое используется для обновления установок, включая изменение данных в исходной таблице. Такой функционал очень удобен на динамических страницах, когда надо часто обновлять диаграмму. Для обновления диаграммы нужно сгенерировать событие  visualizeRefresh для ее элемента:

$('.visualize').trigger('visualizeRefresh');

 

Добавление диаграммы к другой области на странице

Так как вызов метода visualize() возвращает новый элемент диаграммы, то весьма просто добавить диаграмму к другой области на странице с помощью метода jQuery appendTo. Но как только вы переместите диаграмму в другую область DOM, необходимо сгенерировать событие visualizeRefresh для корректного вывода в Internet Explorer 6 и 7. Следующий код демонстрирует добавление диаграммы в конец страницы:

$('table')
   .visualize()
   .appendTo('body')
   .trigger('visualizeRefresh');

 

Изменение стилей диаграммы с помощью CSS

Три файла CSS идут в комплекте с плагином Visualize. В них устанавливаются стили для общего шаблона, цвета для фона и текста для ключей, заголовка, линий сетки и меток осей.

  • visualize.css
  • visualize-dark.css
  • visualize-light.css

 

Конфигурирование плагина Visualize

Доступны следующие опции:

  • type: string. Тип диаграммы. Можно использовать 'bar', 'area', 'pie', 'line'. По умолчанию: 'bar'.
  • width: number. Ширина диаграммы. По умолчанию: ширина таблицы.
  • height: number. Высота диаграммы. По умолчанию: высота таблицы.
  • appendTitle: boolean. Определяет добавление заголовка к диаграмме. По умолчанию: true.
  • title: string. Заголовок таблицы. По умолчанию: элемент caption таблицы.
  • appendKey: boolean. Определяет добавление легенды к диаграмме. По умолчанию: true.
  • colors: array. Массив элементов шестнадцатеричных значений, используемых в порядке указания для цветов диаграммы. По умолчанию:['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744']
  • textColors: array. Массив элементов шестнадцатеричных значений. Каждый пункт соответствует массиву colors. null/неопределенный элемент будет заменен значением из CSS для цвета текста. По умолчанию: [].
  • parseDirection: string. Направление разбора таблицы. Можно использовать 'x' и 'y'. По умолчанию: 'x'.
  • pieMargin: number. Пространство вокруг круговой диаграммы. По умолчанию: 20.
  • pieLabelPos: string. Положение меток в круговой диаграмме. Можно использовать 'inside' и 'outside'. По умолчанию: 'inside'.
  • lineWeight: number. Ширина линии в линейной и областной диаграмме. По умолчанию: 4.
  • barGroupMargin: number. Пространство вокруг каждой группы столбиков в столбиковой диаграмме. По умолчанию: 10.
  • barMargin: number. Пространство вокруг столбика в столбиковой диаграмме (добавляется с каждой стороны столбика). По умолчанию: 1

Для использования опции их надо просто передать в качестве аргументов методу visualize(), используя литеральную нотацию объекта (например: visualize({ optionA: valueA, optionB: valueB});).

 

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^