График (гистограмма) с помощью javaScript
Поиск

График (гистограмма) с помощью javaScript

Nikel, 20.05.2019

Если вы представляете на сайте для своих посетителей много информации в виде цифр или статистических данных, для наглядности удобно делать графики (чарты). Можно конечно, рисовать их в каких-то программах, но легче пойти другим путем и использовать специальные скрипты. Ведь их использование  не требует особых навыков или специальных знаний.

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

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

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

Итак, приступим к процессу создания базового графика JavaScript для вашего сайта.

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

При построении большинства популярных типов диаграмм нам нужны только данные по X и Y. Однако гистограммы могут быть еще проще, потому что часто  используется только поле Y, а  в качестве X берется индекс или номер элемента.

Подобное  имеет место, когда мы используем массив JavaScript, например:

Подключение библиотеки диаграмм

Вы можете скачать скрипт и разместить у себя в файлах. Для этого заходим на официальный сайт  https://www.anychart.com/ и нажимаем кнопку скачать.

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

Написание простого кода HTML и JavaScript

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

Html-код очень простой, нужно вставить на страницу элемент div с классом container.


Теперь рассмотрим, какой потребуется javaScript код. Он, конечно, будет чуточку сложнее, но все равно написать его не представит особого труда. Сначала я покажу вам весь требуемый код, а потом разберем, что означает та или иная строка.

Первым делом нужно указать данные, по которым будет строиться диаграмма.

Затем мы задаем, какой тип диаграммы нам нужен, вызывая соответствующую функцию(bar — диаграмма в виде прямоугольников, брусков):

По желанию указываем название графика

Теперь добавляем вышеуказанные данные в график, они содержатся в переменной data. Также  мы можем просто перечислить внутри функции addSeries данные по которым нужно строить график.

Поскольку наш график должен иметь контейнер, пропишем для него тот элемент div.container который мы создали.

В итоге вызываем функцию, которая нарисует получившийся график.

Давайте посмотрим, что за результат у нас получился.

See the Pen
EBxEYr
by Elena (@Lliana)
on CodePen.

Можно создать подобный же график в виде столбцов, для этого нужно записать тип диаграммы не bar(), а column().

 

See the Pen
chart5
by Elena (@Lliana)
on CodePen.

И наконец, посмотрите, как можно создать круговую диаграмму (тип диаграммы pie()).

See the Pen
chart6
by Elena (@Lliana)
on CodePen.

Создание более сложных гистограмм

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

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

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

Если вы используете модуль адаптера данных AnyChart, все, что вам нужно, это указать эту таблицу в качестве источника данных. Получаем адаптер, для этого подключаем код в разделе head.

В коде javaScript указываем id нужной таблицы.

Получаем данные из указанного источника

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

See the Pen
chart2
by Elena (@Lliana)
on CodePen.

Изменение типа

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

See the Pen
chart2
by Elena (@Lliana)
on CodePen.

Поскольку мы заранее договорились, что наша конечная цель-100% — ная гистограмма, давайте просто изменим режим, чтобы получить ее:

Это 100% столбчатая гистограмма, которая позволяет выделить отношения «часть к целому».

See the Pen
chart4
by Elena (@Lliana)
on CodePen.

Настройки Дизайна

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

Добавление текста

Мы можем добавлять надписи в график по оси X и по оси Y. Смотрите как это выглядит в коде и на самом графике.

Настройка цветов

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

И вызвать эту тему в начале скрипта

See the Pen
chart45
by Elena (@Lliana)
on CodePen.

Также есть возможность изменять цвета на пользовательские. Чтобы это сделать используем метод background() для цвета фона и palette() чтобы определить цвета самих графиков(внутри этой функции помещаем массив в квадратных скобках, где через запятую будут перечислены цвета). К примеру

По такому же принципу мы задали цвета для вышеприведенного графика.

See the Pen
chart42
by Elena (@Lliana)
on CodePen.

Как видите, строить графики на JavaScript не так уж сложно. Здесь приведены лишь немногие примеры, AnyChart очень мощный инструмент, и разновидностей графиков, которые с его помощью можно создать великое множество. В галерее AnyChart вы найдете примеры создания гистограмм с готовым кодом, который остается просто скопировать.