Raphael.js条形图及教程
Raphael.js bar chart with tutorial
我目前正在我的投资组合网站上工作,在关于我的页面上,我想以信息图形(文本、图像/插图、图表等)的形式显示这一点。
在Raphaël.js的帮助下,我一直在遵循本教程创建一个图表,一切似乎都很好,然而,我现在正处于创建另一个图表的阶段,只是这次是以条形图的形式。它需要具有与第一个相同的特性(颜色和悬停效果),但我不知道如何做到这一点。
我知道gRaphaël,在这些例子中,你不会得到同样的效果,我发现它更难风格化。
这就是您想要的吗?
我已经对脚本进行了评论,使其与您提供的链接中的原始脚本保持接近。
Js报价
(出于存档目的,决定在此处添加脚本,b/c堆栈溢出一直鼓励包含相关源代码。)
使用的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(); });
相关文章:
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- Chart.js 2.1.2条形图动画问题
- 如何在Extjs5中更改条形图的标签
- d3.js条形图转换无法正常工作
- 从数组在d3中创建条形图时出现问题
- 条形图元素的HTML5 JavaScript锚点
- d3.js组条形图不起作用
- 图表.js:条形图点击事件
- 如何使用chartjs设置条形图中每个条形图的颜色
- Raphael.js条形图及教程
- 对d3堆叠条形图的数据进行排序
- Javascript FLOT组合条形图;以x轴为字符串的折线图
- d3.js条形图未根据单击事件进行更新
- Chart.js条形图标签在悬停时被隐藏
- D3:如何更改现有条形图中的数据
- 如何在d3中更新带有附带文本的条形图