Как сделать диаграмму на сайте

Построение графиков и диаграмм в HTML

Графики и диаграммы — отличный способ визуализировать информацию на сайте, не говоря о том, что порой он куда действенее тех же таблиц, списков и других инструментов систематизации данных. Относительно недавно для этих целей использовался Exel, однако теперь куда более актуальны сервисы, делающие акцент на интерактивности. Рассмотрим на примере сервиса Google, где собрано множество графиков, признанных решать самые разнообразные задачи за счет следующих опций:

• Широкий выбор параметров графиков и диаграмм.
• Большая палитра цветов.
• Управление заголовками и многое другое.

Перейдите на сайт сервиса → выберите диаграмму или график нужного формата → скопируйте HTML-код → подставьте свои параметры. Например:

var data = google.visualization.arrayToDataTable([

[‘CMS’, ‘Сайты на базе систем управления контентом’],

title: ‘Самы популярные CMS в 2015 году’,

var chart = new google.visualization.PieChart(document.getElementById(‘donut_single’));

Диаграмма в браузере:

Аналогичным способом создаются любые другие диаграммы и графики в HTML.

Также рекомендуем почитать:

Категории

• Блог
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• Наши новости, акции, нововведения
• Руководства, статьи, инструкции
• Хостинг, домены, мировые новости, обзоры ПО
• Рейтинги, обзоры, отзывы
• RSS

Популярное в категории

• Новая услуга: VPS с выделенным накопителем
• Новая функция в cPanel: установка бесплатного SSL-сертификата от Let’s encrypt
• Авторизация через соцсети в Bitrix
• Создание простого и выпадающего меню на WordPress
• Cron в cPanel: запуск скрипта по расписанию
• Основы JavaScript. Урок 1. Введение в JavaScript. Что такое JavaScript.
• Что делать с ошибкой Strict Standards: Non-static method JLoader?
• Что лучше хостинг или vps?
• Где купить домен и хостинг?
• Инструкция по установке ISPmanager (последняя версия)
• SSL: понятие, суть, предназначение
• Добро пожаловать в наш блог!

Графики и диаграммы

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в Excel, а затем вставляли на сайт картинкой. Но мы ведь живём в век информационных технологий, поэтому хочется вставить диаграмму быстро, просто, да ещё чтобы она была при этом интерактивной и красивой. И вот пришёл Гугл и дал нам такой сервис.

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

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

Круговая диаграмма

Такая диаграмма напоминает торт, разрезанный на разного размера куски. Общая сумма всех частей составляет 100%, части делят круг пропорционально своим значениям.

В примере 1 показан код для отображения состава воздуха в виде круговой диаграммы.

Пример 1. Круговая диаграмма

Результат примера показан на рис. 1.

Рис. 1. Вид круговой диаграммы

В том месте документа, куда мы добавляем диаграмму, вставляем следующий код.

Ширину и высоту диаграммы задаём через стили и добавляем идентификатор для работы скрипта. Этот же идентификатор должен быть указан в document.getElementById .

Параметры диаграммы состоят из двух блоков: собственно данные для отображения (переменная data ) и настройки (переменная options ). Первая строка в data задаёт названия последующих колонок и хотя она никак не выводится, без неё отображение происходит некорректно. В options пишется заголовок диаграммы, также можно указать трёхмерность и другие настройки, все они являются необязательными и если не заданы, то принимаются по умолчанию.

Диаграмма получается интерактивной, её части подсвечиваются если навести на них курсор или на легенду.

Примеры, список параметров и описание круговой диаграммы доступны по этому адресу: https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart

Гистограмма

Гистограмма — это столбчатая диаграмма, которая удобна для сравнения разных значений между собой. В качестве примера возьмём добычу нефти в XIX веке в России и США (рис. 2). На оси абсцисс (горизонтальная ось) нанесены годы, на оси ординат (вертикальная ось) — добыча нефти в тысячах тонн. Высота прямоугольников соответствует указанному значению.

Рис. 2. Гистограмма

Принцип создания этого типа диаграммы аналогичен предыдущему — добавляем тег , связываем его со скриптом, в котором хранятся данные для графика и параметры отображения (пример 2).

Пример 2. Гистограмма

Для начала добавляем тег и указываем ему желаемую ширину и высоту с помощью стилей. Также важен идентификатор через который скрипт будет вставлять выбранный график в элемент . Сам скрипт в сравнении с предыдущим примером сохраняет свою структуру и состоит из двух редактируемых частей — собственно данные для отображения на графике и различные его настройки. Через параметры hAxis и vAxis добавим для наглядности заголовки осей.

Резюме

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

Сами графики выводятся достаточно оперативно, к тому же вызываемые файлы при первой загрузке кэшируются, поэтому последующее отображение графиков на сайте происходит быстрее. Поддерживаются все браузеры, включая старые версии Internet Explorer.

Документация сервиса на русский язык не переведена и доступна только на английском, что способно отпугнуть некоторых пользователей. На это есть только одна мантра — учите языки.

Как добавить графики и диаграммы на сайт

Графики и диаграммы являются важным инструментом в веб-разработке, позволяющим наглядно представлять данные и статистику. В этой статье мы рассмотрим способы добавления графиков и диаграмм на ваш сайт.

Варианты добавления графиков и диаграмм

1. HTML и CSS

С помощью HTML и CSS можно создавать простые графики, такие как столбчатые и круговые диаграммы.

Пример столбчатой диаграммы:

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

2. JavaScript и библиотеки

Используя JavaScript и специализированные библиотеки, такие как Chart.js или Highcharts, можно создавать более динамичные и сложные графики.

Пример создания графика с помощью Chart.js:

Python-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

3. Использование API

Некоторые сервисы предоставляют API для создания графиков и диаграмм, например, Google Charts. Для использования таких сервисов необходимо зарегистрироваться и получить API-ключ.

Пример создания графика с помощью Google Charts:

Теперь вы знаете несколько способов добавления графиков и диаграмм на ваш сайт. Выбирайте подходящий для вас метод и экспериментируйте с различными видами диаграмм, чтобы сделать ваш сайт более наглядным и информативным! ��

Красивые диаграммы для сайта — анимация на диаграмме и графике

Все 3 примера анимированных графиков можно посмотреть ниже:

Посмотреть примерСкачать

Как использовать красивые графики в своих целях?

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

Создаются такие красивые графики с помощью библиотеки — Chartist.js .

А с применением CSS3 анимации они «оживают» и притягивают внимание. Теперь представьте реакцию посетителей при виде такого на обычном лендинге! Ведь анимацией при прокрутке уже никого не удивишь, а вот подобные элементы всегда будут повышать качество сайта.

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

1 этап. Подключаем необходимые стили и скрипты

Файлы стилей и скриптов можно скачать и разместить на своем хостинге, но гораздо удобнее просто вставить 2 строчки в HTML и подключить все, что нужно:

link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"> script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js">/script>

Если размещаете в конце документа данные строки (это делается для ускорения загрузки страницы ), то не забывайте прописать атрибут property со значением stylesheet у элемента . Это поможет избежать ошибок валидации .

2 этап. Контейнер на странице для графика

На этом этапе задаем тег, в котором будет находиться наш график:

div class="ct-chart ct-golden-section">/div>

Этого достаточно, чтобы создать первый красивый график или диаграмму. Остался последний шаг.

3 этап. Задаем значения графика (JS)

Для начала я приведу сразу полный код, который создает вот такой график:

А вот тот, собственно, сам код:

JAVASCRIPT КОД

1 2 3 4 5 6 7 8 9 10 11 12

new Chartist.Line('.chart1', { labels: ['День 1', 'День 2', 'День 3', 'День 4', 'День 5'], series: [ [12, 9, 3, 8, 4], [2, 1, 4.7, 5.5, 8] ] }, { fullWidth: true, chartPadding: { right: 50 } });

Пройдемся по каждой строке, чтобы у Вас было полное понимание этого небольшого JS-скрипта. А если Вы будете понимать, за что отвечает каждая строка, то сможете изменить под себя любые значения.

• Строка 1 — в этой строке обратите внимание на значение между одинарными кавычками. Здесь указывается селектор блока, в котором у нас будет находится график или диаграмма.
• Строка 2 — через запятую в одинарных кавычках прописываем названия одного деления по оси X.
• Строки с 3 по 6 — здесь задаются значения по оси Y для каждой линии на графике. Одна строка значений в квадратных скобках (в этом скрипте 4-я и 5-я строки) соответствует одной линии.
• Строка 8 — указав значение true , мы растянули график на всю ширину «блока-родителя».
• Строки с 9 по 11 — задаем внутренний отступ справа. Это делается для того, чтобы описание делений по оси X не обрезалось и помещалось в один блок.

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

Пример 1. Анимированный график

Но как же создать такой график, как на изображении выше (изображение анимированное, если у Вас нет анимации, то подождите, пока загрузится) выше?

Для этого необходимо лишь дописать некоторые свойства элементов на готовом графике. Так как весь график состоит из SVG элементов, то нам лишь необходимо решить какой из них мы хотим анимировать.

Чтобы анимировать две линии, как я это сделал в этом примере, нужно добавить следующий CSS код в Ваш файл стилей:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/*График #1*/ /*Цвет, толщина и стиль первой линии*/ .chart1.ct-chart .ct-series.ct-series-a .ct-line { stroke: #F04D3A; stroke-width: 5px; stroke-dasharray: 5px 5px; animation: dashoffset-seven 200ms infinite linear; } /*Цвет точек первой линии*/ .chart1.ct-chart .ct-series.ct-series-a .ct-point{ stroke: #B22819; } /*Цвет, толщина и стиль второй линии*/ .chart1.ct-chart .ct-series.ct-series-b .ct-line { stroke: #4DB543; stroke-width: 5px; stroke-dasharray: 5px 5px; animation: dashoffset 200ms infinite linear; } /*Цвет точек второй линии*/ .chart1.ct-chart .ct-series.ct-series-b .ct-point{ stroke: #0FB500; } /*Анимация движения штриховых точек*/ @keyframes dashoffset 0% { stroke-dashoffset: 7px; } 100% { stroke-dashoffset: 0px; } }

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

Пример 2. Анимация выделения главной линии на графике

Здесь (на изображении выше) присутствует анимация. Если Вы ее не видите, то, возможно, у Вас просто не загрузилась картинка, просто подождите.

Это классный способ показать изменения и привлечь внимание к конкретной линии на графике. Все сделано на CSS3. Был использован следующий код для анимации:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

/*График #2*/ /*Цвет, толщина и стиль первой линии*/ .chart2.ct-chart .ct-series.ct-series-a .ct-line { stroke:#949494; stroke-width: 5px; } /*Цвет точки для первой линии на графике*/ .chart2.ct-chart .ct-series.ct-series-a .ct-point{ stroke: #656565; } /*Цвет, толщина и стиль второй линии*/ .chart2.ct-chart .ct-series.ct-series-b .ct-line { stroke: #6765B5; stroke-width: 5px; animation: width-pulse 2s infinite; } /*Цвет точки для второй линии на графике*/ .chart2.ct-chart .ct-series.ct-series-b .ct-point{ stroke: #403CB5; } /*Цвет, толщина и стиль третьей линии*/ .chart2.ct-chart .ct-series.ct-series-c .ct-line { stroke: #949494; stroke-width: 5px; } /*Цвет точки для третьей линии на графике*/ .chart2.ct-chart .ct-series.ct-series-c .ct-point{ stroke: #656565; } /*Анимация пульсации для выделения линии на графике*/ @keyframes width-pulse 0% { stroke-width: 6px; stroke: #403CB5; } 50% { stroke-width: 14px; stroke: #E40DE4; } 100% { stroke-width: 6px; stroke: #403CB5; } }

Пример 3. Анимация в двух направлениях

Ну и последний пример с анимацией CSS3 — это анимация на графике в двух направлениях.

Для такого эффекта необходимо использовать следующий CSS код и анимацию:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/*График #3*/ /*Цвет, толщина и стиль второй линии*/ .chart3.ct-chart .ct-series.ct-series-b .ct-line { stroke: #E44A4A; stroke-width: 5px; stroke-dasharray: 30px 5px; stroke-linecap: round; animation: dasharray-craziness 10s infinite linear; } /*Цвет точки для второй линии на графике*/ .chart3.ct-chart .ct-series.ct-series-b .ct-point{ stroke: #E40D0D; } /*Цвет, толщина и стиль первой линии*/ .chart3.ct-chart .ct-series.ct-series-a .ct-line { stroke: #949494; stroke-width: 5px; } /*Цвет точки для первой линии на графике*/ .chart3.ct-chart .ct-series.ct-series-a .ct-point{ stroke: #656565; } /*Анимация в двух направлениях на графике*/ @keyframes dasharray-craziness 0% { stroke-dasharray: 7px 2px; } 80% { stroke-dasharray: 7px 100px; stroke-width: 10px } 100% { stroke-dasharray: 7px 2px; } }

Этими примерами я хотел показать, что создать красивый и, главное, выделяющийся график действительно просто. Достаточно лишь знать хотя бы основы CSS3 анимации. Об этом можно почитать по ссылке ниже.

Изучите внимательно данную статью, и тогда сможете создать любую анимацию на CSS3: CSS3 анимация для самых маленьких .

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

[ВИДЕО] Возможности библиотеки Chartist.js

Вывод

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

Но, что больше всего радует, так это количество возможностей, которые сейчас есть. В статье Вы познакомились лишь с одной из множества библиотек, с помощью которых можно делать обычные элементы нестандартными. Осталось воспользоваться этим правильно!