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");

在道场中配置饼图和图例

2 个答案: