В этом уроке мы покажем вам, как создавать прикольные диаграммы при помощи 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, чтобы увидеть больше примеров.