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

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

На сайтах иной раз приходится использовать разные диаграммы, что позволяют наглядно и доступно донести данные до пользователя. Раньше подобные графики делали в 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.

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

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

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

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

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

var data = google.visualization.arrayToDataTable([

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

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

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

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

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

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

Как вставить диаграмму на страницу?

Доброго времени суток! Уважаемый, вебмастера, подскажите пожалуйста по сервису Google Charts Google Charts. Мне необходимо на одну страницу, вставить несколько диаграмм: Pie Chart Возьмем к примеру, предлагаемый там шаблон:

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

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

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

Гистограмма

Резюме

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

Категории

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

Как вставить диаграмму на страницу?