Raphael.js條形圖與教程

Question

我目前正在研究我的作品集網站和關於我的網頁我想以信息圖形（文本，圖像/插圖，圖表等）的形式顯示此內容。

我一直在關注this tutorial創建一個圖，在Raphaël.js的幫助下，一切看起來都很好，但是，我現在正處於創建另一個圖表的階段，只有這次是以條形圖的形式。它需要具有與第一個相同的特性（顏色和懸停效果），但我不知道如何做到這一點。

我知道gRaphaël，在這些例子中，你沒有得到相同的效果，我發現它更難以風格化。

Answer 1

這是你在找什麼？

我已經評論了該腳本，並通過您提供的鏈接將其保持原樣。

JsFiddle

（決定在這裏添加腳本，用於存檔和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(); });