Создаем анимированные диаграммы на HTML5

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Как всегда, мы начнем с построения разметки HTML, некоторая часть разметки представлена только для демонстрации графиков, по этому при редактировании не забываем ее убирать:

<!DOCTYPE html>

<head>

<title>Создаем анимированные диаграммы с помощью HTML5 | Демонстрация для сайта RUDEBOX</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h3><font color=white>Графики:</h3>

<p>

<input type="radio" name="func" value="1" onclick="toggleFunc(1)" checked> sin

<input type="radio" name="func" value="2" onclick="toggleFunc(2)"> sin(1/x)

</p>

<h3>Визуальные изменения:</h3>

<p>

<input type="radio" name="mode" value="1" onclick="toggleMode(1)" checked> #1

<input type="radio" name="mode" value="2" onclick="toggleMode(2)"> #2

<input type="radio" name="mode" value="3" onclick="toggleMode(3)"> #3

</p>

</div>

</body>

</html>

Теперь рассмотрим стили CSS.

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

margin:0;

padding:0;

}

.container {

color: #000;

margin: 20px auto;

overflow: hidden;

position: relative;

width: 600px;

height: 400px;

}

.controls {

border: 1px dashed gray;

color: #000;

margin: 20px auto;

padding: 25px;

position: relative;

width: 550px;

}

.controls p {

margin-bottom: 10px;

}

.controls input {

margin-left: 10px;

}

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

100

101

102

103

104

105

106

var container = document.getElementById('container');

var start = (new Date).getTime();

var data, graph, offset, i;

var mode = 1;

var fmode = 1; // 1- sin(1/x)

// Переключатель режима

function toggleMode(i) {

mode = i;

}

// Функция переключения

function toggleFunc(i) {

fmode = i;

}

// Нарисовать синусоиду в момент t

function animateSine (t) {

data = [];

data2 = [];

// Немного смещение между ступенями

offset = 2 * Math.PI * (t - start) / 10000;

if (fmode == 2 && offset > 15) {

start = t;

}

for (i = 0; i < 4 * Math.PI; i += 0.2) {

if (fmode == 1) {

data.push([i, Math.sin(i - offset)]);

data2.push([i, Math.sin(i*2 - offset)]);

} else if (fmode == 2) {

data.push([i, Math.sin(1/(i-offset))]);

// data2.push([i, Math.sin(1/(i*2-offset))]);

}

// Подготовка свойства

var properties;

switch (mode) {

case 1:

properties = {

yaxis : {

max : 2,

min : -2

}

};

break;

case 2:

properties = {

yaxis : {

max : 2,

min : -2

bars: {

show: true,

horizontal: false,

shadowSize: 0,

barWidth: 0.5

}

};

break;

case 3:

properties = {

yaxis : {

max : 2,

min : -2

radar: {

show: true

grid: {

circular: true,

minorHorizontalLines: true

}

};

break;

case 4:

properties = {

yaxis : {

max : 2,

min : -2

bubbles: {

show: true,

baseRadius: 5

};

break;

}

// Рисуем график

if (fmode == 1) {

graph = Flotr.draw(container, [ data, data2 ], properties);

} else if (fmode == 2) {

graph = Flotr.draw(container, [ data ], properties);

}

// Основной цикл

setTimeout(function () {

animateSine((new Date).getTime());

}, 50);

}

animateSine(start);

Полная документация по flotr2 библиотеке вы можете найти здесь .
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.