Статьи

Как легко создавать диаграммы с использованием jQuery и HTML5

Октябрь 15, 2017

В течение многих лет Flash был единственным решением для отображения динамического графика на веб-сайте. Но благодаря современным технологиям умирающая вспышка больше не нужна. В этом уроке я покажу вам, как легко преобразовать простую таблицу HTML в профессионально выглядящую диаграмму с помощью очень полезного плагина jQuery visualize.js.

Шаг 1: Подготовка файлов

Вот так! Первое, что нужно сделать, это, очевидно, создать каталог на вашем Mac (или ПК, никто не идеален ;)). Вы должны назвать это диаграммой например. После этого загрузите необходимые файлы Javascript и CSS и сохраните их на жестком диске.

Теперь создайте новый HTML-документ с именем charts.html . Скопируйте приведенную ниже структуру html и вставьте ее в созданный вами файл charts.html .

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<title>Charts!</title>       

</head>

<body>

</body>
</html>

Вы заметили, что я использовал тип документа <! DOCTYPE html>? Это правильный тип документа для использования, так как код JavaScript, который мы добавим позже, превратит HTML-таблицу в холст HTML 5.

Шаг 2: Добавление данных

Теперь, когда мы загрузили файлы javascript и создали HTML-документ, пришло время добавить данные. Скопируйте приведенный ниже код и вставьте его в теги < body> и </ body> вашего файла charts.html .

<table>
	<caption>Visits from August 16 to August 21</caption>
	<thead>
		<tr>
			<td></td>
			<th scope="col">Monday</th>
			<th scope="col">Tuesday</th>
			<th scope="col">Wednesday</th>
			<th scope="col">Thursday</th>
			<th scope="col">Friday</th>
			<th scope="col">Saturday</th>
			<th scope="col">Sunday</th>
		</tr>
	</thead>
	<tbody>

		<tr>
			<th scope="row">CatsWhoCode.com</th>
			<td>12541</td>
			<td>11204</td>
			<td>11354</td>
			<td>10058</td>
			<td>9871</td>
			<td>8254</td>
			<td>5477</td>
		</tr>
		<tr>
			<th scope="row">WpRecipes.com</th>
			<td>9855</td>
			<td>8870</td>
			<td>8731</td>
			<td>7488</td>
			<td>8159</td>
			<td>6547</td>
			<td>4512</td>
		</tr>
		<tr>
			<th scope="row">CatsWhoBlog.com</th>
			<td>3241</td>
			<td>2544</td>
			<td>2597</td>
			<td>3108</td>
			<td>2114</td>
			<td>2045</td>
			<td>950</td>
		</tr>
	</tbody>
</table>

Конечно, не стесняйтесь добавлять свои собственные данные, чтобы сделать пример более интересным для вас.

Шаг 3: Пусть волшебство случится

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

  • картирование / CSS / basic.css
  • картирование / CSS / visualize.css
  • графиков / CSS / Visualize-light.css
  • картирование / JS / visualize.js

После этого нам, очевидно, придется связать файлы CSS и Javascript с нашим документом. Вставьте следующее после тега <title> документа:

<link href="basic.css" type="text/css" rel="stylesheet" />
<link href="visualize.css" type="text/css" rel="stylesheet" />
<link href="visualize-light.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="visualize.js"></script>

Пришло время оживить наш график. Вставьте последний фрагмент кода после вызова скрипта:

<script type="text/javascript">
	$(function(){
		$('table').visualize();
	});
</script>

После сохранения файла ваша HTML-таблица должна отображаться вместе с красивой диаграммой. Если вы не хотите, чтобы таблица была видимой, просто скройте ее, используя свойство display: none css.

Дополнительные объяснения

Генерация гистограмм — это, безусловно, здорово, но что, если вы предпочитаете круговую диаграмму? Нет проблем, visualize.js допускает 4 различных типа диаграмм: гистограмма, площадь, круговая диаграмма и линия

Изменить тип по умолчанию довольно просто: просто добавьте параметр типа, как показано ниже:

$('table').visualize({type: 'pie'});

Круто, не правда ли? Visualize.js принимает еще больше параметров, чтобы убедиться, что ваша диаграмма будет выглядеть именно так, как вы хотите. Вот параметры, которые можно использовать:

  • Тип: строка . Принимает «бар», «площадь», «пирог», «линия». По умолчанию: «бар».
  • ширина: число . Ширина графика. По умолчанию ширина таблицы
  • высота: номер . Высота графика. По умолчанию высота стола
  • appendTitle: логическое значение . Добавьте заголовок к диаграмме. По умолчанию: правда.
  • Название: строка . Название для диаграммы. По умолчанию используется текст элемента Caption таблицы.
  • appendKey: логическое значение . Добавляет цветовой ключ к диаграмме. По умолчанию: правда.
  • цвета: массив . Элементы массива — это шестнадцатеричные значения, используемые в порядке появления. По умолчанию: [‘# be1e2d’, ‘# 666699’, ‘# 92d5ea’, ‘# ee8310’, ‘# 8d10ee’, ‘# 5a3b16’, ‘# 26a4ed’, ‘# f45a90’, ‘# e9e744’]
  • textColors: массив . Элементы массива имеют шестнадцатеричные значения. Каждый элемент соответствует массиву цветов. Нулевые / неопределенные элементы будут возвращаться к цвету текста CSS. По умолчанию: [].
  • parseDirection: строка . Направление для разбора данных таблицы. Принимает «х» и «у». По умолчанию: «х».
  • pieMargin: число . Пробел вокруг внешнего круга круговой диаграммы. По умолчанию: 20.
  • pieLabelPos: строка . Положение текстовых меток в круговой диаграмме. Принимает «внутри» и «снаружи». По умолчанию: «внутри».
  • lineWeight: номер . Масса штриха для линий в линейных и площадных диаграммах. По умолчанию: 4.
  • barGroupMargin: число . Пробел вокруг каждой группы баров в гистограмме. По умолчанию: 10.
  • barMargin: число. Создает пространство вокруг баров в гистограмме (добавляется с обеих сторон каждого бара). По умолчанию: 1

Это все на сегодня. Веселитесь с графиками:)

46
Share: