在道場中配置餅圖和圖例

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

問題2：

您可以為餅圖定義自己的主題或使用預定義的dojo主題。

您可以在此處找到示例和說明：點圖表主題下的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

Answer 2

當存在圖例時，必須先將其銷毀。 問題3可以解決：

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

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