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

Posted 2023-03-29

【中文标题】fusionChart 未使用 Json 和 C# 加载动态数据

【英文标题】：fusionChart is not loading with dynamic data using Json and C#

【发布时间】：2015-05-29 04:40:50

【问题描述】：

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

      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】：

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

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

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

【讨论】：

嗨 Sanjukta，如果我在图表的数据部分传递 Json 数据，那么图表正在完美准备。另外，我检查了 hiddenfiled 是否填充了来自数据库的 JSON 数据，我可以从这行代码中看到 hiddenfield 的值。 alert($('#hdndata').val());

我已将数据转换为 JSON，然后将变量用于图表。 jdata = JSON.parse($('#hdndata').val());这样可行。谢谢大家。