餅圖中的餅圖？

Question

我想使用從數據庫檢索的一組數據創建餅圖。

我發現了FLot和Graphael，兩者都很不錯，但是我沒有找到任何初學者教程。

如何開始在我的代碼中添加餅圖？

是否有任何初學者教程？

Answer 1

嘗試bluff charts。

的餅圖示例： -

function pieChartExample(){ 
    //Create pie chart 
    var bluffGraph = new Bluff.Pie('bluffExample', 400); 
    //Use keynote theme. Several other themes can be used 
    bluffGraph.theme_keynote(); 
    bluffGraph.title = 'Pass Vs Fail'; 

    bluffGraph.data('Pass',75,'green'); 
    bluffGraph.data('Fail',25,'red'); 

    bluffGraph.draw(); 
} 

Answer 2

我個人認爲出所有的JavaScript圖形庫，實際上海軍報辜負的是它的目標。「有吸引力的Javascript繪圖。」

這裏are a number of examples這應該讓你開始在Flot中創建餅圖。

創建與海軍報一個餅圖是那麼容易，因爲

$.plot($("#default"), data, 
{ 
     series: { 
      pie: { 
       show: true 
      } 
     } 
}); 

確保包括jQuery和海軍報在正確的文檔的標題。如果您需要幫助格式化要繪製的數據集並選擇如何繪製圖表的選項，請參考Flot API Documentation，這很清晰幷包含許多示例。

只要從數據庫中檢索數據，你可以通過AJAX來完成。使用JQuery通過AJAX檢索數據，並與海軍報，其工作方式繪製數據Here is an example如下：

$.ajax({ 
     url: dataurl, 
     method: 'GET', 
     dataType: 'json', 
     success: onDataReceived 
}); 

看那JQuery AJAX documentation如果你需要更多的幫助。

Answer 3

在this question的答案中有幾個很好的建議。

你提到你找不到gRaphael的文檔，但RaphaelJs實際上有一些documentation，這是gRaphael的基礎。