Диаграммы и графики на 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Диаграммы и графики на HTML5 | | 2012-07-06 16:36:40 | | Статьи Web-мастеру | | В данном уроке используется интересная библиотека – flotr2, которая предназначена для вывода графиков и диаграмм HTML5. Она позволяет выводить диаграммы в нескольких режимах: линиями, столбиками, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: