在道場配置餅圖和圖例

Question

對不起，我的英語。

我想編寫一個Web應用程序，用戶填寫表單並將其發送到服務器。服務器將請求的數據作爲JSON對象發送。有了這些數據，就可以使用Dojo創建圖表和圖例。 圖表和傳說是這樣的：

http://www.gm.fh-koeln.de/~mi932/chart_with_legend.PNG

1問：在傳說中，數字47，14，11，...不顯示，但要顯示給定文本，這是位於JSON對象中。我怎麼做？

2問題：我使用道場的Claro主題。但該主題只有5種顏色，然後重複顏色。我怎樣才能做到不同顏色的圓圈的每一個部分？

3問題：如果用戶進行新查詢，舊圖表和舊圖例將被刪除，新圖表和圖例將被刪除。這隻適用於圖表。圖例將被隱藏並不顯示。我究竟做錯了什麼？

客戶看起來是這樣的：

<script> 
require(["dojo/dom", 
     "dojo/on", 
    "dojo/request", 
    "dojo/dom-form", 
    "statsDiagramme/kreisDiagramm", 
    "statsDiagramme/stabDiagramm", 
    "dojo/json", 
    "dojox/json/query", 
    "dijit/Dialog", 
    "dijit/form/Button", 
     "dojo/domReady!"], 

function(dom, on, request, domForm, kreisdiagramm, stabdiagramm, json){ 

    var form = dom.byId('sqlOptForm');  
    on(form, "submit", function(evt){      
     evt.stopPropagation();   
     evt.preventDefault();  

     request.post("ServletStatsSQLOPT", {  

    data: domForm.toObject("sqlOptForm"), 
    handleAs: "json" 

    }).then(function(response){ 

    var fehler = dojox.json.query("fehlermeldung", response); 

    if(fehler == ""){ 
           dojo.html._emptyNode("statsKreisDiagramm"); 
           dojo.html._emptyNode("statsStabDiagramm"); 
           dojo.html._emptyNode("legende"); 

           stabdiagramm.setStabDiagramm(response); 
           kreisdiagramm.setKreisDiagramm(response); 
           dom.byId("statsKreisDiagramm").style.visibility = 'visible'; 
           dom.byId("statsStabDiagramm").style.visibility = 'hidden'; 
           dom.byId("statsMenuButton").style.visibility = 'visible'; 
           dom.byId("legende").style.visibility = 'visible';     

    } 
    else {     
     // ERROR 

    } 

    }, function(error) {  
     // ERROR 

     }); 
     }); 
    } 
    ); 
</script> 

圖表創建爲：

define([ 
"dojox/charting/Chart", 
"dojox/charting/themes/Claro", 
"dojox/charting/plot2d/Pie", 
"dojox/charting/action2d/Tooltip", 
"dojox/charting/action2d/MoveSlice", 
"dojox/charting/widget/Legend", 
"dojox/charting/plot2d/Markers", 
"dojox/charting/widget/Legend", 
"dojox/charting/axis2d/Default", 

"dojo/domReady!" 
], 
function(Chart, theme, PiePlot, Tooltip, MoveSlice, Legend){ 

    return{ 
     setKreisDiagramm: function(response) { 

      var daten = new Array(response.summeArray.length);   
      // response => JSON-Objekt 
      for(var i=0; i < response.summeArray.length; i++) { 
       daten[i] = { x: 1, y: response.summeArray[i].summe }; 
      } 

      var kreisDiag = new Chart("statsKreisDiagramm");   

      kreisDiag.setTheme(theme);   


      kreisDiag.addPlot("default", { 
       type: PiePlot,     
       radius: 180, 
       fontColor: "black", 
       labelOffset: 30,     
       markers: true 
      }); 

      kreisDiag.addSeries("Zusammenfassung", daten);  

      var tip = new Tooltip(kreisDiag, "default");   

      var mag = new MoveSlice(kreisDiag,"default");  

      kreisDiag.render(); 

      var legend = new Legend({ chart: kreisDiag, horizontal: false }, "legende"); 


     } 
    }; 
} 
); 

任何一個能幫助我嗎？ 我提前感謝你。

Answer 1

當圖例存在時，它必須首先被銷燬。 問題3可以解決：

var legend = dijit.byId("legende"); 
if (legend) { 
    legend.destroyRecursive(true); 
} 

var legend = new dojox.charting.widget.Legend({ chart: kreisDiag, horizontal: false }, "legende"); 

Answer 2

問題2：

您可以定義自己的主題，或使用預定義的道場主題爲您的餅圖。

你可以找到一個例子和說明在這裏： http://dojotoolkit.org/documentation/tutorials/1.9/charting/下點圖主題

下面是主題的API：

http://dojotoolkit.org/api/dojox/charting/themes/Minty

和預覽他們：

http://download.dojotoolkit.org/release-1.5.0/dojo-release-1.5.0/dojox/charting/tests/theme_preview.html

也許這會有所幫助。

關懷，Miriam