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

в 6:26, , рубрики: css3, javascript, веб-дизайн, Веб-разработка

image

В этом учебном руководстве мы создадим интерактивный график, используя jQuery и CSS3. При этом будем использовать популярный плагин jQuery «Flot». Flot — это библиотека графического изображения JavaScript для jQuery. Он непрерывно производит набор графических участков данных со стороны клиента. Этот плагин прост, но в нем достаточно функций для того, чтобы создать хорошие и интерактивные графики. Для получения дополнительной информации можете посмотреть на документацию. Вы можете найти дизайн графиков на Impressionist UI, которые сделал Владимир Кудинов.

ДЕМО
Исходные файлы

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

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

<!-- График 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

Давайте теперь включим JavaScript. Во-первых, мы должны добавить 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. У каждого из них есть некоторые пользовательские параметры (цвета, тени, и т.д.).

// Строки
$.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, по умолчанию, не будут работать в некоторых браузерах. Для этого нам нужно добавить префиксы для каждого браузера. Этот градиент и border-radius будут также использоваться подсказками и кнопками.

/* Градиент и скругление углов */
.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;
}

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

/* Графический контейнер */
.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;

image

Шаг 6 — Легенды и кнопки графиков

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

.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;
}

Для легенд данных графика мы создадим маленький круг с тем же цветом как lines/bars на графике. Чтобы создать этот круг, мы будем использовать псевдо-селектор :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; }

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

/* Кнопки строк и панелей */
#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'); }

Завершая этот шаг, мы можем очистить floats графического контейнера.

/* Чистим Floats */
.graph-info:before, .graph-info:after,
.graph-container:before, .graph-container:after {
    content: '';
    display: block;
    clear: both;
}

image

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

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

$('#graph-bars').hide();
 
$('#lines').on('click', function (e) {
    $('#bars').removeClass('active');
    $('#graph-bars').fadeOut();
    $(this).addClass('active');
    $('#graph-lines').fadeIn();
    e.preventDefault();
});
 
$('#bars').on('click', function (e) {
    $('#lines').removeClass('active');
    $('#graph-lines').fadeOut();
    $(this).addClass('active');
    $('##graph-bars').fadeIn().removeClass('hidden');
    e.preventDefault();
});

Шаг 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;
}

Мы скроем первый и последний «label» для оси y. Чтобы сделать это, мы будем использовать первые и последние псевдо-селекторы.

.yAxis .tickLabel:first-child,
.yAxis .tickLabel:last-child { display: none; }

image

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

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

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 добавим некоторые padding и border.

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

image

Заключение

Вот и всё. Мы закончили этот урок. Сейчас осталось настроить этот график CSS, чтобы использовать все возможности, которые предлагает плагин flot

ДЕМО
Исходные файлы

Автор: Lecaw

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js