В течение многих лет 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
Это все на сегодня. Веселитесь с графиками