/ / Wykres słupkowy Raphael.js z samouczkiem - javascript, jquery, html, css, css3

Wykres słupkowy Raphael.js z samouczkiem - javascript, jquery, html, css, css3

Aktualnie pracuję nad moją stroną portfolio i na stronie o mnie, chciałbym ją wyświetlić w formie informacji-grafiki (tekst, obrazy / ilustracje, wykresy itp.).

Śledziłem w tym samouczku utworzyć diagram za pomocą Raphaël.js i wszystko wydaje się być w porządku, ale jestemteraz na etapie tworzenia kolejnego wykresu, tylko tym razem w formie wykresu słupkowego. Musi mieć te same cechy co pierwsza (efekty kolorystyczne i na hover), ale nie mam pojęcia, jak to zrobić.

Wiem o tym gRaphaël w tych przykładach nie osiąga się tego samego efektu, a trudniej jest mi stylizować.

Odpowiedzi:

6 dla odpowiedzi № 1

Czy tego właśnie szukasz?

Skomentowałem scenariusz, trzymałem go blisko oryginału z podanego linku.

JsFiddle

(Postanowiliśmy dodać skrypt tutaj, do celów archiwalnych i b / c Stack Overflow zachęca do włączenia odpowiedniego źródła.)

Wykorzystane źródło 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(); });