- Главная»
- Уроки»
- HTML и DHTML»
- Диаграммы и графики на HTML5
Диаграммы и графики на HTML5
В данном уроке используется интересная библиотека – flotr2, которая предназначена для вывода графиков и диаграмм HTML5. Она позволяет выводить диаграммы в нескольких режимах: линиями, столбиками, секторами. Дле ее работы не требуется никаких других библиотек. Кроме того, она имеет отличную совместимость с различными браузерами.
Разметка HTML
Разметка нашего примера будет иметь следующий вид:
!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Графики и диаграмы на HTML5 с помощью Flotr2 | Материалы сайта RUSELLER.COM</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>Функции:</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
Для демонстрации используются следующие стили:
*{ margin:0; padding:0; } body { background-color:#eee; color:#fff; font:14px/1.3 Arial,sans-serif; } header { background-color:#212121; box-shadow: 0 -1px 2px #111111; display:block; height:70px; position:relative; width:100%; z-index:100; } header h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } header a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0; } header .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .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; }
JavaScript
Для полноценного функционала нашего примера требуются библиотеки flotr2 и flashcanvas.
var container = document.getElementById('container'); var start = (new Date).getTime(); var data, graph, offset, i; var mode = 1; var fmode = 1; // 1 - sin, 2 - 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);
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.script-tutorials.com/html5-charts-and-graphs/
Перевел: Сергей Фастунов
Урок создан: 4 Июля 2012
Просмотров: 46258
Правила перепечатки
5 последних уроков рубрики "HTML и DHTML"
-
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
-
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
-
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
-
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
-
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.