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

问题描述

| 我想将动态数据放入拉斐尔饼图。我无法在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,[55,20,13,32,5,1,2],{legend: [\"%%.%%\",\"%%.%%\",\"%%.%%\"],legendpos: \"west\"});
    }
</script>

在这个55、20、13、32、5、1、2数据的插入下，我想将数据库返回的数据写入我的JSP页面。如何添加呢？我有数据

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

我想在饼图中添加“ 2”。如何将其转换为

([[],[]..])

？     

解决方法

这就是我的方法。我正在使用ASP.Net MVC，但是您可以使用任何框架或语言。 值，图例值和扇区链接值是在页面中创建的.Net列表对象。

%>
<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,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.cy] },500,\'bounce\');if (this.label) {this.label[0].animate({ scale: 1 },\'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},\",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;

希望对您有所帮助。.如果您对此代码有任何疑问，请告诉我。谢谢。维卡斯             }     ,基兰 如果我对您的理解很好，则您想执行以下操作：

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调用。