Как создать интерактивный график используя CSS3 и jQuery Flot

В этом учебном руководстве мы создадим интерактивный график, используя jQuery и CSS3. Также будем использовать популярный плагин jQuery Flot. Flot - это библиотека для рисования графиков JavaScript и jQuery. Он непрерывно принимает данные со стороны клиента и строит график. Хоть этот плагин очень прост в реализации, в нем достаточно функций для построения хороших и интерактивных графиков.

Сложность

Шаг 1 – Разметка HTML

Для начала перейдем к HTML разметке страницы. Мы создадим контейнер с классом graph-wrapper, в котором будет находиться еще два контейнера. Первый из которых будет иметь класс graph-info и содержит шкалу графика и кнопки, которые позволят переключаться между графиками, второй контейнер содержит два графика (линии и столбцы).

<!-- График HTML -->
<div id="graph-wrapper">
<div class="graph-info">
<a href="javascript:void(0)" class="visitors">Visitors</a>
<a href="javascript:void(0)" class="returning">Returning Visitors</a>

<a href="#" id="bars"><span></span></a>
<a href="#" id="lines" class="active"><span></span></a>
</div>

<div class="graph-container">
<div id="graph-lines"></div>
<div id="graph-bars"></div>
</div>
</div>
<!-- Конец графика HTML -->

Шаг 2 – jQuery Flot

Подключаем библиотеки jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="/js/jquery.flot.min.js"></script>
<script>
$(document).ready(function () {
// Графические scripts здесь
});
</script>

Шаг 3 - Данные графика

Данные графика - это массив. Ряд может быть обработан данными или свойствами объекта (например: [ [x1, y1], [x2, y2], … ]). Мы также установим некоторые пользовательские параметры для каждого типа данных.

var graphData = [{
// Посещения
data: [ [6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000] ],
color: '#71c73e'
}, {
// Возврат посещений
data: [ [6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000] ],
color: '#77b7c5',
points: { radius: 4, fillColor: '#77b7c5' }
}
];

Шаг 4 – Загрузка графиков

Сейчас мы загрузим эти два графика, один с lines и один с bars. У каждого из них есть некоторые пользовательские параметры (цвета, тени, и т.д.). Также плагин берет данные из переменной graphData.

// Строки
$.plot($('#graph-lines'), graphData, {
series: {
points: {
show: true,
radius: 5
},
lines: {
show: true
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
tickDecimals: 2
},
yaxis: {
tickSize: 1000
}
});

// Панели
$.plot($('#graph-bars'), graphData, {
series: {
bars: {
show: true,
barWidth: .9,
align: 'center'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
tickColor: 'transparent',
tickDecimals: 2
},
yaxis: {
tickSize: 1000
}
});

Шаг 5 - Стиль контейнера

Во-первых, сбросим стандартные стили.

/* Сброс */
.graph-container,
.graph-container div,
.graph-container a,
.graph-container span {
margin: 0;
padding: 0;
}

Во-вторых, добавим градиент и закругленные углы. Обратите внимание, что мы добавляем префиксы для свойств CSS3.

/* Градиент CSS */
.graph-container, #tooltip, .graph-info a {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f9f9f9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9));
background: -webkit-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f9f9f9 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f9f9f9 100%);

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

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

/* Графический контейнер */
.graph-container {
position: relative;
width: 550px;
height: 300px;
padding: 20px;

-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.1);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,.1);
box-shadow: 0px 1px 2px rgba(0,0,0,.1);
}

.graph-container > div {
position: absolute;
width: inherit;
height: inherit;
top: 10px;
left: 25px;
}

.graph-info {
width: 590px;
margin-bottom: 10px;

Шаг 6 - Шкала и кнопки графика

Добавим основные css стили для ссылок.

.graph-info a {
position: relative;
display: inline-block;
float: left;
height: 20px;
padding: 7px 10px 5px 30px;
margin-right: 10px;
text-decoration: none;
cursor: default;
}

Шкала графика будет иметь маленький круг с тем же цветом как линии/столбцы на графике. Для создания такого круга, используем псевдо-элемент :before.

/* Цветные круги */
.graph-info a:before {
position: absolute;
display: block;
content: '';
width: 8px;
height: 8px;
top: 13px;
left: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.graph-info .visitors { border-bottom: 2px solid #71c73e; }
.graph-info .returning { border-bottom: 2px solid #77b7c5; }

.graph-info .visitors:before { background: #71c73e; }
.graph-info .returning:before { background: #77b7c5; }

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

/* Кнопки строк и панелей */
#lines, #bars {
width: 34px;
height: 32px;
padding: 0;
margin-right: 0;
margin-left: 10px;
border-bottom: 2px solid #71c73e;
float: right;
cursor: pointer;
}

#lines.active, #bars.active {
background: #82d344;
background: -moz-linear-gradient(top, #82d344 0%, #71c73e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d344), color-stop(100%,#71c73e));
background: -webkit-linear-gradient(top, #82d344 0%,#71c73e 100%);
background: -o-linear-gradient(top, #82d344 0%,#71c73e 100%);
background: -ms-linear-gradient(top, #82d344 0%,#71c73e 100%);
background: linear-gradient(to bottom, #82d344 0%,#71c73e 100%);
}

#lines span, #bars span {
display: block;
width: 34px;
height: 32px;
background: url('../img/lines.png') no-repeat 9px 12px;
}

#bars span { background: url('../img/bars.png') no-repeat center 10px; }

#lines.active span { background-image: url('../img/lines_active.png'); }

#bars.active span { background-image: url('../img/bars_active.png'); }

Шаг 7 – Переключатель типа Графика

На этом шаге мы добавим обработчик событий click для кнопок "bars" и "lines". При загрузке мы спрячем график bars, этот график пользователь сможет увидеть, если нажмет на кнопку "bars", то же самое с lines.

<code class="jscript string">$('#graph-bars</code>').hide();<br /> <br />$('#<code class="jscript string">lines</code>').on('click', function (e) {<br />    $('#bars').removeClass('active');<br />    $('#graph-bars').fadeOut();<br />    $(this).addClass('active');<br />    $('#graph-lines').fadeIn();<br />    e.preventDefault();<br />});<br /> <br />$('#bars').on('click', function (e) {<br />    $('#<code class="jscript string">lines</code>').removeClass('active');<br />    $('#<code class="jscript string">graph-lines</code>').fadeOut();<br />    $(this).addClass('active');<br />    $('#<code class="jscript string">#graph-bars</code>').fadeIn().removeClass('hidden');<br />    e.preventDefault();<br />});

Шаг 8 - Оформление

Настроим стиль ссылок, шкалы и подсказок.

#tooltip, .graph-info a {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 12px;
line-height: 20px;
color: #646464;
}

.tickLabel {
font-weight: bold;
font-size: 12px;
color: #666;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Шаг 9 – Подсказки

Для отображения всплывающей подсказки, добавим id="tooltip" для body и div. Положение этой подсказки будет зависеть от положения фиксированной точки графика.

function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
top: y - 16,
left: x + 20
}).appendTo('body').fadeIn();
}

var previousPoint = null;

$('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$('#tooltip').remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, y + ' visitors at ' + x + '.00h');
}
} else {
$('#tooltip').remove();
previousPoint = null;
}
});

Зададим абсолютную позицию, скроем ее, используя свойство display: none, добавим отступы и рамки.

#tooltip {
position: absolute;
display: none;
padding: 5px 10px;
border: 1px solid #e1e1e1;
}

Перевод статьи How to Create an Interactive Graph using CSS3 & jQuery

Тэги: transform

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.