javascript - 带教程的 Raphael.js 条形图

Question

我目前正在我的投资组合网站和关于我的页面上工作，我想以信息图形（文本、图像/插图、图表等）的形式显示它。

在Raphaël.js的帮助下，我一直在按照本教程创建图表，一切似乎都很好，但是，我现在正处于创建另一个图表的阶段，只是这次是以条形图的形式。它需要具有与第一个相同的特征（颜色和悬停效果），但我不知道如何做到这一点。

我知道gRaphaël，在这些例子中，你没有得到相同的效果，而且我发现它更难风格化。

Answer 1

这是你想要的？

我已经评论了该脚本，并使其与您提供的链接中的原始内容接近。

提琴手

（决定在此处添加脚本，出于存档目的，并且 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(); });