Анимированные диаграммы при помощи Raphael

В этом уроке мы покажем вам, как создавать прикольные диаграммы при помощи Raphaël – небольшой JavaScript библиотеки, которая работает с векторными элементами. Идея очень проста: мы нарисуем несколько дуг при помощи математических функций, основываясь на некоторых данных.

Давайте начнём с HTML.

HTML

HTML структура будет состоять из основного контейнера с классом ‘get’. Тут будет храниться вся информация необходимая нам для рисования дуг. Затем мы создаём элемент с id ‘diagram’, который будет служить контейнером для элементов диаграммы:

<div id="diagram"></div>
<div class="get">
    <div class="arc">
        <span class="text">jQuery</span>
        <input type="hidden" class="percent" value="95" />
        <input type="hidden" class="color" value="#97BE0D" />
    </div>
    <div class="arc">

        <span class="text">CSS3</span>
        <input type="hidden" class="percent" value="90" />
        <input type="hidden" class="color" value="#D84F5F" />
    </div>
    <div class="arc">
        <span class="text">HTML5</span>
        <input type="hidden" class="percent" value="80" />
        <input type="hidden" class="color" value="#88B8E6" />

    </div>
    <div class="arc">
        <span class="text">PHP</span>
        <input type="hidden" class="percent" value="53" />
        <input type="hidden" class="color" value="#BEDBE9" />
    </div>
    <div class="arc">
        <span class="text">MySQL</span>
        <input type="hidden" class="percent" value="45" />
        <input type="hidden" class="color" value="#EDEBEE" />
    </div>
</div>

CSS

В CSS нам нужно оформить только 2 вещи: скрыть все элементы с классом ‘get’ и установить размеры блока с id ‘diagram’:

.get {
    display:none;
}

#diagram {
    float:left;
    width:600px;
    height:600px;
}

JavaScript

В первую очередь нам необходимо создать объект Raphael (переменная ‘r’) и нарисовать первый круг с радиусом, который хранится в переменной ‘rad’.

Затем мы создаём новый круг в объекте Raphael (x: 300px и y: 300px) и добавляем текст.

var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var r = Raphael('diagram', 600, 600),
            rad = 73;

        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

        var title = r.text(300, 300, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();

    }
}

Теперь давайте двинемся дальше.
Мы расширим объект Raphael следующими атрибутами:

  • alpha – угол дуги
  • random – случайно число из диапазона
  • sx, sy – начало рисования в точках
  • x, y – конец рисования в точках
  • путь
    • M – определить начальную точку. Все данные пути должны быть сопровождены командой ‘moveto’.
    • A – радиус-x, радиус-y x-ось-вращения, флаг дуги, флаг-развёртки, x, y
var o = {
    init: function(){
        this.diagram();
    },
    random: function(l, u){
        return Math.floor((Math.random()*(u-l+1))+l);
    },
    diagram: function(){
        var r = Raphael('diagram', 600, 600),
            rad = 73;

        r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

        var title = r.text(300, 300, 'Skills').attr({
            font: '20px Arial',
            fill: '#fff'
        }).toFront();

        r.customAttributes.arc = function(value, color, rad){
            var v = 3.6*value,
                alpha = v == 360 ? 359.99 : v,
                random = o.random(91, 240),
                a = (random-alpha) * Math.PI/180,
                b = random * Math.PI/180,
                sx = 300 + rad * Math.cos(b),
                sy = 300 - rad * Math.sin(b),
                x = 300 + rad * Math.cos(a),
                y = 300 - rad * Math.sin(a),
                path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
            return { path: path, stroke: color }
        }

        $('.get').find('.arc').each(function(i){
            var t = $(this),
                color = t.find('.color').val(),
                value = t.find('.percent').val(),
                text = t.find('.text').text();

            rad += 30;
            var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

            z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
                    this.toFront();
                title.animate({ opacity: 0 }, 500, '>', function(){
                    this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, 500, '<');
                });
            }).mouseout(function(){
                this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
        });
    }
}

Далее мы передали данные, такие как значения в процентах, цвет текста и других элементов. Потом увеличили радиус дуг и других элементов.

В самом конце мы добавили немного анимации, которая будет включаться при наведении мыши.

Вывод

В сегодняшнем уроке, я показал вам основы работы с Raphaël. Это очень мощная библиотека, при помощи которой вы можете делать то, о чём раньше могли только мечтать. Посетите сайт Raphaël, чтобы увидеть больше примеров.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/5p_sCHWxcsk/lessons.php

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

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



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

Анимированные диаграммы при помощи Raphael | | 2012-06-19 12:08:40 | | Статьи Web-мастеру | | В этом уроке мы покажем вам, как создавать прикольные диаграммы при помощи Raphaël – небольшой JavaScript библиотеки, которая работает с векторными элементами. Идея очень проста: мы нарисуем | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: