javascript Raphael.js 条形图和教程
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12229375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Raphael.js bar chart with tutorial
提问by user1752759
I'm currently working on my portfolio website and on the about me page I would like to display this in the form of an info-graphic (text, images/illustrations, charts etc).
我目前正在我的投资组合网站和关于我的页面上工作，我想以信息图形（文本、图像/插图、图表等）的形式显示它。
I've been following this tutorialto create a diagram, with the help of Rapha?l.jsand everything seems to be fine, however, I am now at the stage of creating another chart, only this time in the form of a bar graph. It needs to have the same characteristics as the first (color-wise and on-hover effects) but I have no idea how to do this.
我一直在按照本教程创建图表，在Rapha?l.js的帮助下，一切似乎都很好，但是，我现在处于创建另一个图表的阶段，只是这次以条形图的形式图形。它需要具有与第一个相同的特征（颜色和悬停效果），但我不知道如何做到这一点。
I know of gRapha?land in those examples, you don't get the same effect and I'm finding it even harder to stylize.
我知道gRapha?l，在这些例子中，你没有得到同样的效果，我发现它更难风格化。
回答by Jason M. Batchelor
Is this what you are looking for?
这是你想要的？
I've commented the script, kept it close to the original from the link you provided.
我已经对脚本进行了评论，使其与您提供的链接中的原始脚本保持接近。
(Decided to add the script here, for archival purposes and b/c Stack Overflow has been encouraging the inclusion of pertinent source.)
（决定在此处添加脚本，用于存档目的，并且 b/c Stack Overflow 一直鼓励包含相关来源。）
HTML Source used:
使用的 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:
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(); });
