拉斐爾餅圖，放入動態數據？

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 }