0

私は現在ポートフォリオ Web サイトに取り組んでおり、自己紹介ページでこれをインフォグラフィック (テキスト、画像/イラスト、チャートなど) の形式で表示したいと考えています。

Raphaël.jsの助けを借りて、このチュートリアルに従ってダイアグラムを作成してきましたが、すべて問題ないように見えますが、今回は棒グラフの形でのみ、別のチャートを作成する段階にあります。最初のものと同じ特性（色とホバー効果）が必要ですが、これを行う方法がわかりません。

私はgRaphaëlを知っていますが、それらの例では同じ効果が得られず、様式化するのがさらに難しいと感じています。

4

1 に答える 1

6

これはあなたが探しているものですか？

スクリプトにコメントし、提供されたリンクからオリジナルに近づけました。

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(); });
于 2012-09-28T19:55:12.180 に答える