Все для веб-дизайнера
Создаем анимированные диаграммы на HTML5
На серьезных проектах можно часто встретить информацию поданную в диаграммах, это весьма правильный маркетинговый ход, ведь информация в полной мере доносится до посетителя, с помощью диаграмм можно показать наглядную разницу между определенными продуктами, или коэффициент посещаемости на вашем сайта. В данном уроке мы рассмотрим как сделать анимированные диаграммы с помощью html. Мы рассмотрим несколько вариантов построения графиков, c различным движением кривых и вариантом анимации.
Как всегда, мы начнем с построения разметки HTML, некоторая часть разметки представлена только для демонстрации графиков, по этому при редактировании не забываем ее убирать:
|
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 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>Создаем анимированные диаграммы с помощью HTML5 | Демонстрация для сайта RUDEBOX</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/flotr2.min.js"></script> <!--[if lt IE 9]> <script type="text/javascript" src="js/flashcanvas.js"></script> <![endif]--> </head> <body> <div id="container" class="container"></div> <div class="controls"> <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> <script src="js/script.js"></script> </body> </html> |
Теперь рассмотрим стили CSS.
В них нет ничего особенного, мы будем использовать класс container, для позиционирования та размеров диаграммы:
|
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 |
*{ 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, в котором мы будем создавать само построения графика, использовать координаты для разметки.
|
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 библиотеке вы можете найти здесь .
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 21.05.2012 в 13:42, в категории Интересно. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...