2013-10-23 97 views
0

我正嘗試在POCO的dojo中繪製餅圖。我無法畫出來。有人能幫我弄清楚這個問題嗎?我GOOGLE了很多,但無法找到確切的問題。無法在Dojo中繪製餅圖

我能夠繪製條形圖,但看到餅圖的問題。我在dojo商店中存儲數據並將其轉換爲系列並提供給餅圖,但最終什麼都沒看到。

如果有人幫我弄清楚這個問題,我將非常感激。

下面是我的代碼:

在餅圖可以使用格式
<script> 
    var geoData = { 
     identifier: 'Id', 
     label: 'Id', 
     items: [{ 
     Id: '1', 
     Name: 'Africa', 
     Age: 10, 
     Gender: 'Male', 
     Area: "Java", 
     Experience: 1 
     }, { 
     Id: '2', 
     Name: 'Asia1', 
     Age: 45, 
     Gender: 'Male', 
     Area: "C", 
     Experience: 3 
     }, { 
     Id: '3', 
     Name: 'Asia2', 
     Age: 35, 
     Gender: 'Male', 
     Area: "Java", 
     Experience: 2 
     }, { 
     Id: '4', 
     Name: 'Asia3', 
     Age: 23, 
     Gender: 'Male', 
     Area: "C", 
     Experience: 1 
     }, { 
     Id: '5', 
     Name: 'Asia4', 
     Age: 78, 
     Gender: 'Male', 
     Area: "Perl", 
     Experience: 4 
     }] 
    }; 

    var layoutGeo = [ 
     [{ 
     field: "Id", 
     name: "Id", 
     width: 10 
     }, { 
     field: "Name", 
     name: "Name", 
     width: 10, 
     editable: true 
     }, { 
     field: "Age", 
     name: "Age", 
     width: 10, 
     editable: true 
     }, { 
     field: "Gender", 
     name: "Gender", 
     width: 10, 
     editable: true, 
     type: "dojox.grid.cells.Select", 
     options: ["Male", "Female"] 
     }, { 
     field: "Area", 
     name: "Area", 
     width: 10, 
     editable: true 
     }, { 
     field: "Experience", 
     name: "Experience", 
     width: 10, 
     editable: true 
     }] 
    ]; 

    function plotPieChart() { 
     dojo.empty("peiDiv"); 

     // Create the chart within it's "holding" node 
     var pieChart = new dojox.charting.Chart2D("peiDiv"); 

     // Set the theme 
     pieChart.setTheme(dojox.charting.themes.Claro); 

     // Add the only/default plot 
     pieChart.addPlot("default", { 
     type: "Pie", 
     radius: 200, 
     fontColor: "black", 
     labelOffset: 20 
     }); 

     var series = makeseries(geoData); 

     // Add the series of data 
     pieChart.addSeries("Area", series); 

     // Render the chart! 
     pieChart.render(); 
    } 

    function makeseries(data) { 
     return [{ 
     datapoints: "items", 
     field: "Id", 
     name: "Id" 
     }, { 
     datapoints: "items", 
     field: "Name", 
     name: "Name" 
     }, { 
     datapoints: "items", 
     field: "Area", 
     name: "Area" 
     }]; 
    } 
    </script> 
</head> 
    <body class="claro"> 
    <div data-dojo-type="dojo/data/ItemFileWriteStore" data-dojo-props="data:geoData" data-dojo-id="geoStore" columnreordering="true"></div> 
    <b>Set the population to assign to all items</b><br> 
    <div id="grid" 
    data-dojo-type="dojox/grid/DataGrid" 
    data-dojo-props="store:geoStore, 
    structure:layoutGeo, 
    query:{}, 
    queryOptions:{'deep':true}, 
    rowsPerPage:40"> 
    </div> 
    <div display:inline-block> 
    <div data-dojo-type="dijit/form/Button" data-dojo-id="Add">Add</div> 
    <div data-dojo-type="dijit/form/Button" data-dojo-id="Remove">Remove</div> 
    </div> 
    <br> 
    <div display:inline-block> 
    <div id="chartDiv" style="width: 400px; height: 250px;"></div> 
    <br> 
    <div id="peiDiv" style="width: 400px; height: 250px;"></div> 
    </div> 
</body> 
</html> 
+0

讓我知道你是否希望我提供更多的細節。請不要做負面投票,因爲我需要立即迴應。它不會得到太多的用戶關注被否決投票 – Rajeev

+1

開發工具控制檯說什麼?任何錯誤?我會建議製作一個jsfiddle.net或jsbin.com,讓人們更容易看到發生了什麼。 – Steve

+0

這jsfiddle網址:http://jsfiddle.net/rajeevprasanna/4EGnu/5/ 此代碼顯示本地網格,但不是在jsfiddle – Rajeev

回答

1

makeseries功能沒有返回數據。 Take a look at the example in the documentation here。如果,例如,你想繪製年齡的餅圖中geoDatamakeseries應該是這樣的:

function makeseries(data) { 
    return data.items.map(function(d) { 
     return {x: d['Id'], y: d['Age']}; 
    }); 
} 

Here's a jsfiddle顯示出在你的原代碼的上下文。它看起來像你還必須調整餅圖包含div的大小。

+0

嘿托馬斯,我正在尋找繪製該圖區域的圖表區域與沒有epmoyees的餅圖。我怎樣才能達到這個 – Rajeev

+1

你需要正確地映射你的數據。遍歷所有項目並將每個區域的計數存儲在一個對象中,然後爲每個區域返回一個類似於「{x:1,y:area_counts [area]}」的數組。可能有很多問題回答瞭如何在本網站上做到這一點。 –

+0

我已經更新了[我原來的jsfiddle](http://jsfiddle.net/tupton/u9UjY/),與您所談論的內容相符。 –