拉斐尔饼图，放入动态数据？

Question

我想将我的动态数据放入raphael饼图。我无法在我的javascript代码的window.onload（）之外编写以下代码。有没有人在rapahael饼图中添加动态数据？这是我当前的代码：

<script language="javascript" type="text/javascript"> 
    window.onload = function() { 
     var r = Raphael("holder"); 
     r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif"; 
     r.g.text(320, 100, "Interactive Pie Chart").attr({"font-size": 20}); 
     var pie = r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2], {legend: ["%%.%%" , "%%.%%","%%.%%"], legendpos: "west"}); 
    } 
</script> 

这55，20，13，32，5，1，2数据我想写我的数据从数据库在我的JSP页面返回insted的。我如何添加？我有数据

<c:forEach var="Detail" items="${DetailRow.List.}">'${Detail.Text}',${Detail.Count}</c:forE­ach> 

我想将${Detail.Text}',${Detail.Count}添加到饼图中。我怎样才能将它转换成([[],[]..])？

Answer 1

基兰，

如果我明白你很好，你想要做这样的事情：

window.onload = function() { 
    var r = Raphael("holder"), 
    mydata = //AJAX call to get data from Database 
    //Parse mydata to have the format you need ([[],[]..])... 
    r.g.piechart(320, 240, 100,mydata); 
}; 

如果你能证明你的问题一些代码那将是很好:)。但我相信这个想法是，对可以从数据库获取数据的脚本执行AJAX调用。

Answer 2

这就是我的做法。我正在使用ASP.Net MVC，但您可以使用任何框架或语言。

values，legendvalues和sectorLinkValues是在页面中创建的.Net List对象。

%> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     <% =truViewPOC.Helpers.GraphaelChartHelper.GetJavaScript(100, 150, 90, title, values, legendValues, sectorLinkValues, null) %> 
    }); 

这里是我的GetJavaScript方法：

StringBuilder javaScriptBuilder = new StringBuilder(); 
javaScriptBuilder.Append("window.onload = function() {var r = Raphael('holder');"); 
AppendCenterCoordinates(ref javaScriptBuilder); 

AppendLegendInfo(ref javaScriptBuilder, title); 
AppendPieChartInfo(ref javaScriptBuilder, xCoord, YCoord,radius, values, legendValues,sectorLinkValues); 
AppendFunctionInfo(ref javaScriptBuilder); 
javaScriptBuilder.Append("}"); 

private static void AppendFunctionInfo(ref StringBuilder javaScriptBuilder) 
     { 
      javaScriptBuilder.Append("pie.hover(function() {this.sector.stop();this.sector.scale(1.1, 1.1, this.cx, this.cy);if (this.label) {this.label[0].stop();this.label[0].scale(1.5);this.label[1].attr({ 'font-weight': 800 });}}, function() {this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, 'bounce');if (this.label) {this.label[0].animate({ scale: 1 }, 500, 'bounce');this.label[1].attr({ 'font-weight': 400 });}}); "); 
      javaScriptBuilder.Append("pie.each(function(){ this.sector.label=this.sector.value; })"); 
     } 
     private static void AppendPieChartInfo(ref StringBuilder javaScriptBuilder, int xCoord, int YCoord, int radius, List<decimal> values, List<string> legendValues, List<string> sectorLinkValues) 
     { 
      javaScriptBuilder.AppendFormat("var pie = r.g.piechart({0},{1},{2},{3},", xCoord, YCoord, radius, ConvertValuesToString(values)); 
      javaScriptBuilder.Append("{"); 
      javaScriptBuilder.AppendFormat("legend: {0}, legendpos: 'east', href:{1}",ConvertValuesToString(legendValues),ConvertValuesToString(sectorLinkValues)); 
      javaScriptBuilder.Append("});"); 
     } 

private static void AppendLegendInfo(ref StringBuilder javaScriptBuilder, string title) 
     { 
      javaScriptBuilder.Append("r.g.text(140, 24, " + "'" + title + "'" + ").attr({ 'font-size': 16 });"); 
     } 

private static string ConvertValuesToString(List<decimal> values) 
     { 
      string finalString = "["; 


      for (int i = 0; i < values.Count; i++) 
      { 
       finalString += values[i].ToString(); 
       if (i<values.Count-1) 
       { 
        finalString+= ","; 
       } 


      } 
      finalString += "]"; 
      return finalString; 

希望这helps..Let我知道，如果你有关于这个代码的任何问题。谢谢。 Vikas }