Здравствуйте, уважаемые читатели XoZbloga! Диаграммы являются одним из лучших способов отображения данных и гораздо более информативными, чем таблицы. В этой статье рассмотрим пример построения диаграмм с помощью отличного javascript плагина — Chart.js. Для построения диаграмм, гистограмм, линейных графиков, круговых диаграммы и много другого плагин использует HTML5 Canvas. В качестве примера использования chart.js рассмотрим набор из 3 элементов, один будет показывать количество покупателей вымышленного продукта в течение 6 месяцев — это будет график, второй покажет, из каких стран клиенты — это будет круговая диаграмма и наконец мы будем использовать гистограмму, чтобы показать прибыль за этот период.
Подключение
Первое, что нужно сделать, это загрузить Chart.js. Остается только подключить его к странице. Допустим файлы html и js находятся в одном каталоге, тогда в общем виде разметка страницы выглядит так:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Chart.js демо</title> <script src='Chart.min.js'></script> </head> <body> </body> </html> |
Как Вы наверняка заметили подключение библиотеки jQuery не обязательно, однако если она необходима для иных целей можно смело подключать, конфликтов возникнуть не должно.
Использование
Рисуем график
Чтобы нарисовать линейную диаграмму, нам нужно создать графический элемент HTML, в котором можно будет с помощью Chart.js сделать график:
1 | <canvas id="buyers" width="600" height="400"></canvas> |
Задаем размеры элемента и указываем идентификатор.
Далее, нам нужно написать скрипт, начнем с переменных. В первую переменную извлекаем контекст графического элемента, а во вторую заносим параметры и данные для отображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 | var buyers = document.getElementById('buyers').getContext('2d'); var buyerData = { labels : ["Январь","Февраль","Март","Апрель","Май","Июнь"], datasets : [ { fillColor : "rgba(172,194,132,0.4)", strokeColor : "#ACC26D", pointColor : "#fff", pointStrokeColor : "#9DB86D", data : [200,155,100,250,305,250] } ] } |
С помощью класса Chart определяем линейную диаграмму.
1 | new Chart(buyers).Line(buyerData); |
Найти полное описание всех параметров и опций данного скрипта можно ЗДЕСЬ.
Круговая диаграмма
Линейный график сделан, так что давайте перейдем к круговой диаграмме. Выполняем аналогичные шаги, как и в предыдущем варианте. Сначала создаем графический элемент:
1 | <canvas id="countries" width="600" height="400"></canvas> |
Теперь задаем параметры и данные для отображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var countries= document.getElementById("countries").getContext("2d"); var pieData = [ { value: 20, color:"#878BB6" }, { value : 40, color : "#4ACAB4" }, { value : 10, color : "#FF8153" }, { value : 30, color : "#FFEA88" } ]; |
Для более «точечной» настройки также можно использовать опции:
1 2 3 4 | var pieOptions = { segmentShowStroke : false, animateScale : true } |
И определяем круговую диаграмму:
1 | new Chart(countries).Pie(pieData, pieOptions); |
Гистограмма
Ну и на последок гистограмма, описывать шаги не имеет смыла, они точно такие же. Параметры, данные и с помощью класса Chart определяем гистограмму.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <canvas id="income" width="600" height="400"></canvas> <script> var income = document.getElementById("income").getContext("2d"); var barData = { labels : ["Январь","Февраль","Март","Апрель","Май","Июнь"], datasets : [ { fillColor : "#48A497", strokeColor : "#48A4D1", data : [456,479,324,569,702,600] }, { fillColor : "rgba(73,188,170,0.4)", strokeColor : "rgba(72,174,209,0.4)", data : [364,504,605,400,345,320] } ] } new Chart(income).Bar(barData); </script> |
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/