JSON數據

Question

IAM使用柱高圖表使用AJAX調用返回JSON數據

[{"department":"DESIGNING","Present":8,"Total":44},{"department":"SEO","Present":0,"Total":1},{"department":"COORDINATION","Present":1,"Total":2}] 

我創建了一個高圖表與硬編碼值如下：

$(function() { 
    function visitorData(data) { 
     $('#container').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Attendance Today' 
      }, 
      subtitle: {     
      }, 
      xAxis: { 
       categories: [ 
        'Designing', 
        'SEO', 
        'CO-Ordinator' 
       ] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'No.of Employees' 
       } 
      }, 
      tooltip: { 
       headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
       pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
       footerFormat: '</table>', 
       shared: true, 
       useHTML: true 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
      series: [{ 
       name: 'Present', 
       data: [5, 10, 15] 

      }, { 
       name: 'Total', 
       data: [20, 30, 40] 

      }] 
     });   
    } 
}); 

顯示一些data.iam

現在我想動態地將json數據包含到高圖表中，而不僅僅是硬編碼..我可以實現這一目標嗎？

Answer 1

首先，你將創建一個表示正在發送的數據傳回的對象：

型號

public class AnObject 
{ 
    public string Department { get; set; } 
    public int Present { get; set; } 
    public int Total { get; set; } 
} 

public class MyData 
{ 
    public List<AnObject> MyObjects { get; set; } 
} 

那麼你會創建一個返回的填充MyData對象作爲JSON的動作。

控制器

public ActionResult GetData() 
{ 
    var myData = new MyData(); 

    myData.MyObjects = // populated from a db 

    return Json(myData, JsonRequestBehavior.AllowGet); 
} 

你可以這樣調用通過JavaScript或jQuery的你的動作，並將結果傳遞到您的visitorData功能

使用Javascript/jQuery的

var aUrl = '@Url.Action("GetData")'; 

$.getJSON(aUrl, {}, 
    function (data) { 
        visitorData(data); 
});