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

5417

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

Создать диаграмму на сайте, если делать ее с нуля с помощью javascript, будет довольно сложно. Поэтому для построения диаграммы я буду использовать готовую библиотеку от google. С помощью этой библиотеки можно быстро создать абсолютно любую диаграмму: линейную, круговую, диаграмму Ганта, гистограмму, а так же различные графики, таблицы, таймлайны и пр.

В примере я разберу круговую 3d диаграмму. Для ее создания переходим по ссылке выше, выбираем в меню слева PIE CHARTS нужный тип диаграммы и копируем код под ней.

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 1],
['Sleep', 8]
]);

var options = {
title: 'My Daily Activities',
is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>

1Находим в коде массив:

var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 1],
['Sleep', 8]
]);

И меняем в нем данные на свои. Например:

var data = google.visualization.arrayToDataTable([
['Задачи', 'Часов/день'],
['Работа', 11],
['Прием пищи', 2],
['Соцсети', 2],
['Баревич', 1],
['Сон', 8]
]);

2Ниже находим строки, где прописывается заголовок

var options = {
title: 'My Daily Activities',
is3D: true,
};

И прописываем там свой:

var options = {
title: 'Распорядок дня',
is3D: true,
};

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

Или задаем высоту диаграммы в пикселях

И прописываем медиазапрос, который будет менять высоту с пикселей на проценты при нужном разрешении экрана:

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

4Итоговый код диаграммы:

var options = {
title: 'Распорядок дня',
is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 100%; height: 500px;"></div>
</body>
</html>
<style>
@media(max-width:900px){
#piechart_3d{
height:100%!important
}
}
</style>

Конечный результат:

Световые вывески на заказ в Архангельске от рекламного агентства Гранат.