2

こんにちは、私はこのようなjsonデータを持っています

 [ "Data":[ 
 {"Id":"1  ","EmployeeName":Anil},
 ]

コントローラーアクションから取得しています

       public ActionResult Index()
    { 
        var data = GetData();
        return View();
    }

    public JsonResult GetData()
    {
        int Param1;
        Param1 = 1;     
       var EmployeeDetails = db.EmployeeDetails.ToList<EmployeeDetail>().Select(e =>  
        new
         {
        id=e.EmployeId,
        Name = e.EmployeeName
       });
        return Json(EmployeeDetails , JsonRequestBehavior.AllowGet);
    }

このjsonデータを円グラフにしたいのですが、どうすればいいですか

4

2 に答える 2

6

ここでは、アクション メソッドで jsonresult メソッドを呼び出す代わりに、$.getJSON メソッドを使用して実行します。

  public ActionResult Index()
    { 

    return View();
     }

  public JsonResult GetData()
   {
    int Param1;
    Param1 = 1;     
     var EmployeeDetails = db.EmployeeDetails.ToList<EmployeeDetail>().Select(e =>  
    new
     {
    id=e.EmployeId,
    Name = e.EmployeeName
   });
    return Json(EmployeeDetails , JsonRequestBehavior.AllowGet);
  }

ここで、このようにメソッドを呼び出して、チャートにバインドできます

     <script type="text/javascript">
  $(function () {
      $.getJSON('<%= Url.Action("YourMethod","YourControllerName") %>', {}, function (data) {
          var json = data;              
          var jsondata = [];              
          for (var i in json) {
             // var serie = new Array(json[i].Projects, json[i].Bugs);
              jsondata.push([json[i].EmployeId, json[i].EmployeeName]);
          }              
      var chart = new Highcharts.Chart({
          chart: {
              renderTo: 'container',
              type: 'pie',
               plotBackgroundColor: null,
               plotBorderWidth: null,
               plotShadow: false
          },
           title: {
               text: 'Resource Reports of BugTracker'
           },

          plotOptions: {
              pie: {
                  showInLegend: true,
                  animation: false,
                  allowPointSelect: true,
                  cursor: 'pointer'
              }
          },
          legend: {
              enabled: true
          },
          series: [{
              type: 'pie',                 
              data: jsondata
          }]
      });
      });
  });
    </script>
于 2012-08-24T09:43:20.007 に答える
0

データの種類に関係なく、円グラフの作成は非常に簡単です。ここで実際の例を参照してください: http://livecoding.io/3437833

var chart = new Highcharts.Chart({
  chart: {
    renderTo: 'container',
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  plotOptions: {
    pie: {
      animation: false,
      allowPointSelect: true,
      cursor: 'pointer'
    }
  },
  series: [{
    type: 'pie',
    name: 'Browser share',
    data: [
      ['Firefox',   45.0],
      ['IE',       26.8],
      ['Safari',    8.5],
      ['Opera',     6.2],
      ['Others',   0.7]
    ]
  }]
});
于 2012-08-23T15:50:31.983 に答える