Скрипт Chart.js. Создание анимированных диаграмм

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

В этой статье рассмотрим пример построения диаграмм с помощью скрипта — Chart.js.

В качестве примера рассмотрим набор из 3 элементов — график, круговая диаграмма и гистограмма.

Подключение

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

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

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

Рисуем график

Чтобы нарисовать линейную диаграмму, нам нужно создать графический элемент HTML, в котором можно будет с помощью Chart.js сделать график:

Задаем размеры элемента и указываем идентификатор.

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

С помощью класса Chart определяем линейную диаграмму.

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

Линейный график сделан, так что давайте перейдем к круговой диаграмме.

Выполняем аналогичные шаги, как и в предыдущем варианте.

Сначала создаем графический элемент:

Теперь задаем параметры и данные для отображения:

Для более «точечной» настройки также можно использовать опции:

И определяем круговую диаграмму:

Гистограмма

Параметры, данные и с помощью класса Chart определяем гистограмму.

 

А на этом все, до новых встреч.

С уважением, Сергей Кривцов


Понравилась статья? Поделитесь с друзьями!

Читайте также на моем блоге:

Подписка на обновления блога:


  • https://www.facebook.com/app_scoped_user_id/1222104547829003/ Petr Litvin

    А как задержать анимацию до прокрутки пользователем до нужной области экрана?