如何在餅圖HighChart中顯示json數據？

大家好我有看起來像這樣如何在餅圖HighChart中顯示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數據到一個餡餅chart..how一個JSON數據可我這樣做

來源

2012-08-23 Sadda-shutu

您的看法如何？你是如何嘗試設置餅圖的？順便說一下，您的索引操作對GetData方法的結果沒有任何影響... – nemesv

您正在使用HighCharts還是僅僅想創建一個餅圖？ Asp.net能夠在不需要第三方解決方案的情況下在MVC中生成餅圖，並且有大量關於如何使用它的教程。同樣如nemesv指出的，'var data = GetData（）;'沒有做任何事情。 –

每片會代表什麼信息？ –

這裏，而不是調用操作方法您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); 
    }

這裏u能調用你的方法是這樣並將其綁定到您的圖表

 <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-24 09:43:20 SoftwareNerd

無論您擁有哪種數據類型，創建餅圖都相當簡單。見工作示例這裏：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-23 15:50:31

如何在餅圖HighChart中顯示json數據？

回答

相關問題