fusionChart没有使用Json和C#加载动态数据

时间:2015-03-25 13:20:52

标签: c# jquery json charts fusioncharts

我在后面的代码中有以下代码。

      protected void Page_Load(object sender, EventArgs e)  
       {    
         hdndata.Value = ShowFusionChart();    
       }  

      public string ShowFusionChart()  
       { 
        DataTable dt = new DataTable();     
        dt = LoadGrid();  
        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();   
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); Dictionary<string, object> row;    

        foreach (DataRow dr in dt.Rows)        
         { 
         row = new Dictionary<string, object>(); 
         foreach (DataColumn col in dt.Columns) 
           {  
         if (col.ColumnName.ToLower() == "linkname")  
             row.Add("label", dr[col]);  
         if (col.ColumnName.ToLower() == "countno") 
             row.Add("value", dr[col]); 
        } 
        rows.Add(row);  
      }   
       return serializer.Serialize(rows); 
    }  

    Public DataTable LoadGrid()  
     {  
     // This code block is generating a DataTable from database 
     } 

我将以下示例数据放入我的隐藏字段'hdndata'作为

[{"label":"Products","value":88},{"label":"Documents","value":77},{"label":"Videos","value":58}]  

在设计页面......

 <div id="chartContainer">FusionCharts XT will load here!</div>   
 <div id="chartContainer2"></div>   


<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>  
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>  

<script type="text/javascript">  

   $(function () {    
 `enter code here`  
    alert($('#hdndata').val());// getting alert with Json Data.  
    FusionCharts.ready(function () {       

    var jdata ;  
    jdata = $('#hdndata').val();  
    //console.log(jdata);    

           var revenueChart = new FusionCharts({  
            type: "column2d",  
            renderAt: "chartContainer",  
            width: "500",  
            height: "300",  
            dataFormat: "json",  
            dataSource: {   
                "chart": {   
                    "caption": "Asset Tracking Report",   
                    "subCaption": "Microsite Report",   
                    "xAxisName": "Assets",   
                    "yAxisName": "Count",   
                    "theme": "zune"   
                },   
                "data": jdata   
            }   
        });    
        revenueChart.render("chartContainer");   

    });   
    });    


</script>    

图表未填充。没有显示错误。消息是“找不到要显示的数据”。

如果我在“data”之后提供静态Json格式数据:那么它可以完美地工作。

我的问题是如何使用动态数据运行图表?请帮我找出错误。谢谢你们。

1 个答案:

答案 0 :(得分:0)

请注意,如果您的图表显示“无数据显示”消息,则可能是您的数据不包含可能由FusionCharts XT或不正确的数据格式绘制的任何数据。

通过传递附加到JSON的“jdata”变量中的数据来正确呈现图表,因为我们测试了您的代码。

似乎问题可能是从数据库中获取数据并通过“jdata”变量传递给图表时引起的。请重新检查“'$('#hdndata')。val();”代码生成了需要传递给图表的正确数据。