Рамка Raphael.js з навчальним посібником - javascript, jquery, html, css, css3

Я зараз працюю на своєму веб-сайті портфоліо та на сторінці про мене, я хотів би показати це у формі інформаційної графіки (текст, зображення / ілюстрації, графіки тощо).

Я вже йду цей підручник створити діаграму за допомогою Raphaël.js і все, здається, добре, однак, язараз на стадії створення іншої діаграми, тільки цього разу у вигляді стрижневого графа. Він повинен мати ті ж характеристики, що і перші (кольорові та ефекти на hover), але я не знаю, як це зробити.

Я знаю ГРАФАЙЛ і в цих прикладах ви не отримаєте такого ж ефекту, і я стану складніше його стилізувати.

Відповіді:

Це те, що ви шукаєте?

Я прокоментував скрипт, зберігаючи його близько до оригіналу з наданої вами посиланням.

JsFiddle

(Вирішили додати скрипт тут, для архівних цілей і b / c Stack Overflow підтримує включення відповідного джерела.)

Використовуваний HTML-код:

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

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

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

Javascript:

var o = {
init: function(){
this.diagram();
},
random: function(l, u){
return Math.floor((Math.random()*(u-l+1))+l);
},
diagram: function(){
var originX = 10;
var originY = 50;
var barHeight = 30;
var barMargin = 10;

var r = Raphael("diagram", 600, 600);

// We don"t need the customAttributes, so we drop that,
// and replace with a simple call to rect()
r.rect(10,10,300,barHeight,6).attr({ stroke: "none", fill: "#193340" });
// Similarly, we reposition the title to center
// it with our new rectangle.
var title = r.text(160, 25, "Skills").attr({
font: "20px Arial",
fill: "#fff"
}).toFront();

$(".get").find(".skill").each(function(i){
// I"ve added in a width field, and calculate
// it based on turning its value to a percentage
// of the width of the Raphael element.
var t = $(this),
color = t.find(".color").val(),
value = t.find(".percent").val(),
width = r.width * (t.find(".percent").val() *.01),
text = t.find(".text").text();
// create a new rectangle, providing X, Y, width,
// and height. Base the fill and stroke on the color
var z = r.rect(originX, originY, width, barHeight).attr({ "fill": color, "stroke": color, "stroke-width":0 });
// update our originY to accomodate shifting the next
// bar down by the barHeight + barMargin
originY = originY + barHeight + barMargin;

z.mouseover(function(){
// I added X in to animation, so that it would
// appear to expand from the left, and the
// expansion would not bleed off-canvas
this.animate({ "x": 10, "stroke-width": 20, opacity: .75 }, 1000, "elastic");
if(Raphael.type != "VML") //solves IE problem
this.toFront();
title.animate({ opacity: 0 }, 500, ">", function(){
this.attr({ text: text + ": " + value + "%" }).animate({ opacity: 1 }, 500, "<");
});
}).mouseout(function(){
// and here I revert back to the originX after the
// mouse has moved on...
this.animate({ x: originX, "stroke-width": 0, opacity: 1 }, 1000, "elastic");
});
});
}
}

$(function(){ o.init(); });