定製餅圖RaphaelJS

我很期待定製拉斐爾JS餅圖 ...定製餅圖RaphaelJS

我已經將它設置4類...

首先，我想要改變JavaScript中單獨定義的每個類別上的顏色填充或路徑顏色，例如類別正在循環到數組中，這裏稱爲data = [90, 90, 90, 90]這裏90是我們定義類別角度的程度LIK Ë我要的顏色也應該B相分別和類似定義到... 可能是這樣fill = ["#000","#ccc","#ddd","#eee"] 我可能是錯的這個想法我不知道......

同樣在點擊它的顏色變化，我希望顏色應該保持原樣，然後點擊它...

任何人都可以幫助嗎？

來源

2012-06-16 SaurabhLP

如果您不太瞭解JavaScript，那麼您可能不應該使用Raphael JS。

要改變填充顏色，你必須修改這一行：到這一點，告訴它的功能你要什麼顏色

fill: "hsb(" + clr + ", .75, .8)"

轉向。目前，CLR是

clr = (a2 - a1)/360; 
    a1 = (a1 % 360) * Math.PI/180; 
    a2 = (a2 % 360) * Math.PI/180;

給出一個簡單的函數來擺脫動畫，刪除行「動畫（）;」（下面數據[I] * = 2）

來源

2012-06-16 18:06:18 Geoff

只需更新傑夫答案：

對於彩色：

通行證顏色參照功能：r.customAttributes.segment = function (x, y, r, a1, a2, color) {...

添加顏色陣列VAR數據後：var data = [90, 90, 90, 90], color = ['#ff0000', '#00ff00', '#0000ff', '#ff0000'], ...

在最後的循環：

  start = 0; 
      for (i = 0; i < ii; i++) { 
       var val = 360/total * data[i]; 
       var col = color[i]; //Add color from array 
       (function (i, val) { 
        //Here we pass the color (col) 
        paths.push(r.path().attr({segment: [200, 200, 1, start, start + val, col], stroke: "#fff"}).click(function() { 
      ...

編輯：

一個然後（感謝Matt Ball爲一部分）

更改r.customAttributes.segment =函數（X，Y，R，A1，A2，顏色）{...與這樣的：

   var flag = (a2 - a1) > 180; 
       a1 = (a1 % 360) * Math.PI/180; 
       a2 = (a2 % 360) * Math.PI/180; 
       var props = { 
        path: [["M", x, y], ["l", r * Math.cos(a1), r * Math.sin(a1)], ["A", r, r, 0, +flag, 1, x + r * Math.cos(a2), y + r * Math.sin(a2)], ["z"]] 
       }; 

       if (color) { 
        props.fill = color; 
       } 
       return props;

來源

2012-07-19 07:38:27

通過通過傑夫和Alex其他答案去，創造了一個工作示例 - Demo

我覺得這是你想要的輸出

來源

2012-07-24 12:14:30 Jithin

定製餅圖RaphaelJS

回答

相關問題