Диаграммы и графики на 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);
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/eGD3PHx5T-c/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.