在道场配置饼图和图例

我想编写一个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"); 


     } 
    }; 
} 
);

任何一个能帮助我吗？我提前感谢你。

来源

2013-09-01 Eduardo

当图例存在时，它必须首先被销毁。问题3可以解决：

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

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

来源

2013-09-04 14:51:11 Eduardo

问题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

来源

2013-09-02 06:31:49 MiBrock

谢谢。我已经完成了。有谁知道我可以如何解决问题1和3？ – Eduardo

当我使用语句“daten [i] = {x：1，y：response.summeArray [i] .summe，text：response.summeArray [i] .inhalt};”在for循环中，只显示文本，但不显示数字。 http://www.gm.fh-koeln.de/~mi932/chart_with_legend1.PNG – Eduardo

嗨！您是否使用警报检查了提交的数据？在response.summeArray [i] .summe中有没有条目？ – MiBrock

在道场配置饼图和图例

回答

相关问题