拉斐爾派餅圖顏色

Question

有沒有一種方法在拉斐爾的餅圖中的顏色前綴？我需要能夠顯示例如黃色的黃金和灰色的鉑金。目前我所面臨的問題是，如果鉑金的價值較高， 60％，黃金40％，黃色顯示。

var r = Raphael("pieChartHolder"); 
var pie = r.piechart(155, 100, 50, [30, 60, 5, 5], { 
    colors: ['#FFDE7B', '#CFD0C6', '#E0DED9', '#93948C'], 
    legend: ['%%gold', '%%silver', '%%palladium', '%%platinum'], 
    legendpos: 'west' 
}); 

pie.hover(function() { 
    this.sector.stop(); 
    this.sector.scale(1.1, 1.1, this.cx, this.cy); 

    if (this.label) { 
     this.label[0].stop(); 
     this.label[0].attr({ 
      r: 7.5 
     }); 
     this.label[1].attr({ 
      "font-weight": 800 
     }); 
    } 
}, function() { 
    this.sector.animate({ 
     transform: 's1 1 ' + this.cx + ' ' + this.cy 
    }, 500, "bounce"); 

    if (this.label) { 
     this.label[0].animate({ 
      r: 5 
     }, 500, "bounce"); 
     this.label[1].attr({ 
      "font-weight": 400 
     }); 
    } 
}); 
}); 

Answer 1

爲什麼要爲顏色添加前綴？如果庫忽略項目的順序並對它們進行排序，那麼您應該傳遞已排序的項目。

我包括了underscore.js庫，並按降序排列項目。

<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script> 
<script type="text/javascript" src="raphael-min.js"></script> 
<script type="text/javascript" src="g.raphael-min.js"></script> 
<script type="text/javascript" src="g.pie-min.js"></script> 
<script type="text/javascript"> 
function drawChart() { 
    var r = Raphael("pieChartHolder"); 

    var items = [ 
     { value: 30, color: '#FFDE7B', title: '%%gold' }, 
     { value: 60, color: '#CFD0C6', title: '%%silver' }, 
     { value: 5, color: '#E0DED9', title: '%%palladium' }, 
     { value: 5, color: '#93948C', title: '%%platinum' } 
    ]; 

    items = _.sortBy(items, function(item){ return -item.value; }); // sort by descending 

    var pie = r.piechart(155, 100, 50, _.pluck(items, "value"), { 
     colors: _.pluck(items, "color"), 
     legend: _.pluck(items, "title"), 
     legendpos: 'west' 
    }); 

    pie.hover(function() { 
     this.sector.stop(); 
     this.sector.scale(1.1, 1.1, this.cx, this.cy); 

     if (this.label) { 
      this.label[0].stop(); 
      this.label[0].attr({ 
       r: 7.5 
      }); 
      this.label[1].attr({ 
       "font-weight": 800 
      }); 
     } 
    }, function() { 
     this.sector.animate({ 
      transform: 's1 1 ' + this.cx + ' ' + this.cy 
     }, 500, "bounce"); 

     if (this.label) { 
      this.label[0].animate({ 
       r: 5 
      }, 500, "bounce"); 
      this.label[1].attr({ 
       "font-weight": 400 
      }); 
     } 
    }); 
} 

window.onload = drawChart; 
</script> 
<div id="pieChartHolder"></div> 

Answer 2

只需添加matchColors : true

opts.matchColors迫使它相匹配的顏色數組的數組值的訂單的訂單。我在這裏看到：

https://stackoverflow.com/a/14349559