jquery flot餅圖顯示數據值而不是百分比

我不知道如何讓flot.pie將標籤中顯示的數據從「原始數據」的百分比更改爲實際數據。在我的例子中，我創建了一個包含已讀/未讀消息數量的餅圖。jquery flot餅圖顯示數據值而不是百分比

讀郵件數：50 數未讀消息：150

創建的餅圖顯示已讀郵件爲25％的比例。在這一點上，我想顯示實際的50條消息。見下圖：

enter image description here

我用來創建餅圖代碼：

var data = [ 
    { label: "Read", data: 50, color: '#614E43' }, 
    { label: "Unread", data: 150, color: '#F5912D' } 
];

和：

$(function() { 
     $.plot($("#placeholder"), data, 
      { 
      series: { 
       pie: { 
        show: true, 
        radius: 1, 
        label: { 
         show: true, 
         radius: 2/3, 
         formatter: function (label, series) { 
          return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>'; 

         }, 
         threshold: 0.1 
        } 
       } 
      }, 
      legend: { 
       show: false 
      } 
     }); 
    });

這可能嗎？

隨着@Ryley的回答，我來到了一個骯髒的解決方案。當我輸出series.data時，返回值「1,150」和「1,50」。我提出了減去返回值的前2個字符並顯示減法值的想法。

String(str).substring(2, str.lenght)

這是餅圖我用這個解決方案中創建：

enter image description here

這是不是最好的解決方案，但它爲我工作。如果有人知道更好的解決方案....

來源

2011-04-15 Ruud van de Beeten

我不能格式化工作，調試器甚至不回落到該行... – 2014-10-21 11:07:53

我找到了問題的答案。數據對象是一個多維數組。要獲得相應的數據，請使用以下代碼：

$(function() { 
    $.plot($("#placeholder"), data, 
     { 
     series: { 
      pie: { 
       show: true, 
       radius: 1, 
       label: { 
        show: true, 
        radius: 2/3, 
        formatter: function (label, series) { 
         return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>'; 

        }, 
        threshold: 0.1 
       } 
      } 
     }, 
     legend: { 
      show: false 
     } 
    }); 
});

請注意代碼「series.data [0] [1]」提取數據。

來源

2011-04-18 08:51:21

這是行不通的。。。 – 2013-05-22 15:37:01

當時它爲我做了。 – 2013-05-23 13:25:29

在我的圖表中只顯示一部分 – 2014-01-06 07:30:07

嘗試像ProtoVis。與其他免費的有用數據可視化庫的鏈接也有一些好的答案。如果你有一些$ fusion charts也相當不錯。

來源

2011-04-15 15:11:24 FoneyOp

你是誤導。 Flot最近發佈了一個新版本。至於是否很難/不具備特徵，那是你的意見。 – Ryley 2011-04-15 15:22:22

errrr，我的錯誤，我正在考慮http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_jtml5_from_designing_with/ – FoneyOp 2011-04-15 15:25:14

Flot仍然積極開發，有一個非常活躍的谷歌組/郵件列表，並且最近在GitHub上創建了一個鏡像。由於它是一個文本文件，它們在文檔上丟失了點數，但任何可以閱讀的人都可以理解它。 – Kai 2011-04-15 15:25:20

這在某種程度上取決於你的意思，「在這一點上我想顯示實際的50條消息」。
讓我們假設你想要在彈出「讀取」或「未讀」部分時彈出一個div，然後在其中顯示消息。

第一步是讓你的餅圖互動。您需要添加grid選項，如下所示：

legend: { 
    show: true; 
}, 
grid: { 
    hoverable: true, 
    clickable: true 
}

接下來，你必須綁定點擊/懸停事件，至檢索您的郵件功能並顯示出來：

$("#placeholder").bind('plothover',function(e,pos,obj){ 

}); 

$("#placeholder").bind('plotclick',function(e,pos,obj){ 
    if (obj.series.label == 'Read'){ 
     //show your read messages 
    } else { 
     //show your unread messages 
    }  
});

這就是它！現在

，如果你的意思很簡單，就是要直接在餅圖顯示所有消息的時候，你只需要改變你的格式化程序引用包含郵件的全局變量。

來源

2011-04-15 15:21:37 Ryley

感謝您的回答。當我調用下面的代碼'alert（obj.series.data）;'對於標籤爲'Read'的數據輸出爲「1,50」。你能告訴我爲什麼它不是「50」嗎？ – 2011-04-18 06:50:40

@Ruud，flot正在後臺對您的數據進行一些操作......並且不清楚究竟是什麼。正如你想的那樣，它被埋在一個數組中，而不是很容易獲得...... – Ryley 2011-04-18 15:13:54

你可以使用：

formatter: function (label, series) { 
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>'; 
},

來源

2014-03-12 16:40:39

jquery flot餅圖顯示數據值而不是百分比

回答

相關問題