Красивые диаграммы для сайта — анимация на диаграмме и графике

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

Это не единственный способ, позволяющий сделать Ваш лендинг или сайт особенным. Ниже представлены несколько интересных эффектов, которые можно с легкостью применить и для своих проектов:

• Уникальное оформление Google Maps
• Круговая анимация блоков для сайта и лендинга
• Рисование элементов с нуля при прокрутке лендинга

Все 3 примера анимированных графиков можно посмотреть ниже:

Посмотреть примерСкачать

Как использовать красивые графики в своих целях?

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

Создаются такие красивые графики с помощью библиотеки — Chartist.js.

А с применением CSS3 анимации они "оживают" и притягивают внимание. Теперь представьте реакцию посетителей при виде такого на обычном лендинге! Ведь анимацией при прокрутке уже никого не удивишь, а вот подобные элементы всегда будут повышать качество сайта.

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

1 этап. Подключаем необходимые стили и скрипты

Файлы стилей и скриптов можно скачать и разместить на своем хостинге, но гораздо удобнее просто вставить 2 строчки в HTML и подключить все, что нужно:

1
2

<link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
<script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>

Если размещаете в конце документа данные строки (это делается для ускорения загрузки страницы), то не забывайте прописать атрибут property со значением stylesheet у элемента <link>. Это поможет избежать ошибок валидации.

2 этап. Контейнер на странице для графика

На этом этапе задаем тег, в котором будет находиться наш график:

1

<div class="ct-chart ct-golden-section"></div>

Этого достаточно, чтобы создать первый красивый график или диаграмму. Остался последний шаг.

3 этап. Задаем значения графика (JS)

Для начала я приведу сразу полный код, который создает вот такой график:

А вот тот, собственно, сам код:

1
2
3
4
5
6
7
8
9
10
11
12

new Chartist.Line('.chart1', {
    labels: ['День 1', 'День 2', 'День 3', 'День 4', 'День 5'],
        series: [
            [12, 9, 3, 8, 4],
            [2, 1, 4.7, 5.5, 8]
        ]
    }, {
        fullWidth: true,
        chartPadding: {
            right: 50
        }
});

Пройдемся по каждой строке, чтобы у Вас было полное понимание этого небольшого JS-скрипта. А если Вы будете понимать, за что отвечает каждая строка, то сможете изменить под себя любые значения.

• Строка 1 — в этой строке обратите внимание на значение между одинарными кавычками. Здесь указывается селектор блока, в котором у нас будет находится график или диаграмма.
• Строка 2 — через запятую в одинарных кавычках прописываем названия одного деления по оси X.
• Строки с 3 по 6 — здесь задаются значения по оси Y для каждой линии на графике. Одна строка значений в квадратных скобках (в этом скрипте 4-я и 5-я строки) соответствует одной линии.
• Строка 8 — указав значение true, мы растянули график на всю ширину "блока-родителя".
• Строки с 9 по 11 — задаем внутренний отступ справа. Это делается для того, чтобы описание делений по оси X не обрезалось и помещалось в один блок.

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

Пример 1. Анимированный график

Но как же создать такой график, как на изображении выше (изображение анимированное, если у Вас нет анимации, то подождите, пока загрузится) выше?

Для этого необходимо лишь дописать некоторые свойства элементов на готовом графике. Так как весь график состоит из SVG элементов, то нам лишь необходимо решить какой из них мы хотим анимировать.

Чтобы анимировать две линии, как я это сделал в этом примере, нужно добавить следующий CSS код в Ваш файл стилей:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/*График #1*/
/*Цвет, толщина и стиль первой линии*/
.chart1.ct-chart .ct-series.ct-series-a .ct-line {
    stroke: #F04D3A;
    stroke-width: 5px;
    stroke-dasharray: 5px 5px;
    animation: dashoffset-seven 200ms infinite linear;
}
 
/*Цвет точек первой линии*/
.chart1.ct-chart .ct-series.ct-series-a .ct-point{
    stroke: #B22819;
}
 
/*Цвет, толщина и стиль второй линии*/
.chart1.ct-chart .ct-series.ct-series-b .ct-line {
    stroke: #4DB543;
    stroke-width: 5px;
    stroke-dasharray: 5px 5px;
    animation: dashoffset 200ms infinite linear;
}
 
/*Цвет точек второй линии*/
.chart1.ct-chart .ct-series.ct-series-b .ct-point{
    stroke: #0FB500;
}
 
/*Анимация движения штриховых точек*/
@keyframes dashoffset {
    0% {
        stroke-dashoffset: 7px;
    }
    100% {
        stroke-dashoffset: 0px;
    }
}

JS часть я здесь не пишу, она очень похожа в каждом из примеров. Если Вы внимательно изучили описание JS кода выше, где я разобрал все буквально по строкам, то и здесь Вам не составит труда разобраться.

Пример 2. Анимация выделения главной линии на графике

Здесь (на изображении выше) присутствует анимация. Если Вы ее не видите, то, возможно, у Вас просто не загрузилась картинка, просто подождите.

Это классный способ показать изменения и привлечь внимание к конкретной линии на графике. Все сделано на CSS3. Был использован следующий код для анимации:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

/*График #2*/
/*Цвет, толщина и стиль первой линии*/
.chart2.ct-chart .ct-series.ct-series-a .ct-line {
    stroke:#949494;
    stroke-width: 5px;
}
 
/*Цвет точки для первой линии на графике*/
.chart2.ct-chart .ct-series.ct-series-a .ct-point{
    stroke: #656565;
}
 
/*Цвет, толщина и стиль второй линии*/
.chart2.ct-chart .ct-series.ct-series-b .ct-line {
    stroke: #6765B5;
    stroke-width: 5px;
    animation: width-pulse 2s infinite;
}
 
/*Цвет точки для второй линии на графике*/
.chart2.ct-chart .ct-series.ct-series-b .ct-point{
    stroke: #403CB5;
}
 
/*Цвет, толщина и стиль третьей линии*/
.chart2.ct-chart .ct-series.ct-series-c .ct-line {
    stroke: #949494;
    stroke-width: 5px;
}
 
/*Цвет точки для третьей линии на графике*/
.chart2.ct-chart .ct-series.ct-series-c .ct-point{
    stroke: #656565;
}
 
/*Анимация пульсации для выделения линии на графике*/
@keyframes width-pulse {
    0% {
        stroke-width: 6px;
        stroke: #403CB5;
    }
    50% {
        stroke-width: 14px;
        stroke: #E40DE4;
    }
    100% {
        stroke-width: 6px;
        stroke: #403CB5;
    }
}

Пример 3. Анимация в двух направлениях

Ну и последний пример с анимацией CSS3 — это анимация на графике в двух направлениях.

Для такого эффекта необходимо использовать следующий CSS код и анимацию:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*График #3*/
/*Цвет, толщина и стиль второй линии*/
.chart3.ct-chart .ct-series.ct-series-b .ct-line {
    stroke: #E44A4A;
    stroke-width: 5px;
    stroke-dasharray: 30px 5px;
    stroke-linecap: round;
    animation: dasharray-craziness 10s infinite linear;
}
 
/*Цвет точки для второй линии на графике*/
.chart3.ct-chart .ct-series.ct-series-b .ct-point{
    stroke: #E40D0D;
}
 
/*Цвет, толщина и стиль первой линии*/
.chart3.ct-chart .ct-series.ct-series-a .ct-line {
    stroke: #949494;
    stroke-width: 5px;
}
 
/*Цвет точки для первой линии на графике*/
.chart3.ct-chart .ct-series.ct-series-a .ct-point{
    stroke: #656565;
}
 
/*Анимация в двух направлениях на графике*/
@keyframes dasharray-craziness {
    0% {
        stroke-dasharray: 7px 2px;
    }
    80% {
        stroke-dasharray: 7px 100px;
        stroke-width: 10px
    }
    100% {
        stroke-dasharray: 7px 2px;
    }
}

Этими примерами я хотел показать, что создать красивый и, главное, выделяющийся график действительно просто. Достаточно лишь знать хотя бы основы CSS3 анимации. Об этом можно почитать по ссылке ниже.

Изучите внимательно данную статью, и тогда сможете создать любую анимацию на CSS3: CSS3 анимация для самых маленьких.

Как понимаете, здесь представлена лишь маленькая часть всех возможностей этой библиотеки. Если быть честным, то я рассмотрел просто процесс создания графиков, а на самом деле у данной библиотеки возможностей гораздо больше. Об остальных возможностях я рассказал на видео ниже.

[ВИДЕО] Возможности библиотеки Chartist.js

Вывод

В настоящее время недостаточно просто сделать лендинг или просто сделать сайт. Это уже не работает. Сейчас время, когда необходимо каждый элемент, каждый блок на сайте прорабатывать и делать максимально уникальным, не забывая при этом об основном дизайне сайта.

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

Успехов!

С Уважением, Юрий Немец