如何使用jQuery json将数据从edmx文件绑定到饼图 [英] How To bind Data to pie-chart from edmx file using jquery json
本文介绍了如何使用jQuery json将数据从edmx文件绑定到饼图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，我正在使用mvc3中的jQuery json处理Piecharts
在这里，我创建了我的模型和控制器，查看当我兴奋时它正在使用控制器中的值，但是如果不显示视图，则饼图是否可以显示出来，请帮助我完成此工作
在此先感谢
这是我的模特:
====================
Hi all i am working on Piecharts using jquery json in mvc3
Here i had created my models and controllers & view when i am exicuting it is taking the values in controllers but in case of vies not displayinng the pie chart could u plz chek it and plz help me to do this work
thank in advance
here my models :
=====================
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Entity;
namespace JqueryCharts.Models
{
public class PiechartModel:DbContext
{
public static List<PiechartModel> Employeelist { get; set; }
public Int16 EmployeeId { get; set; }
public string EmployeeName { get; set; }
public string EmployeeEmailId { get; set; }
public string GroupName { get; set; }
public string EmployeePassword { get; set; }
public List<PiechartModel> List { get; set; }
}
}
and hers are my controllers :
======================================
<pre>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using JqueryCharts.Models;
using System.Data.SqlClient;
namespace JqueryCharts.Controllers
{
public class PiechartsController : Controller
{
//
// GET: /Piecharts/
public BugtrackerNewEntities1 db = new BugtrackerNewEntities1();
public ActionResult Index()
{
return View();
}
public JsonResult GetData()
{
var ViewEmployelist = db.EmployeeDetails.ToList<EmployeeDetail>().Select(e =>
new
{
EmployeId = e.EmployeId,
EmployeeName = e.EmployeeName
}).ToList();
return Json(ViewEmployelist, JsonRequestBehavior.AllowGet);
}
}
}
and here my View page
=============================
<pre><%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<JqueryCharts.Models.PiechartModel>" %>
<script src="../../Scripts/highcharts.src.js" type="text/javascript"></script>
<script src="../../Scripts/highcharts-more.js" type="text/javascript"></script>
<script src="../../Scripts/highcharts.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/modernizr-1.7.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Index</title>
<script type="text/javascript">
$(function () {
alert("1")
$.getJSON('<%= Url.Action("GetData","Piecharts") %>', {}, 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]);
alert("1")
}
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
}]
});
});
});
alert("1")
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
您能否帮忙完成这项工作，因为它没有在ives页面中显示数据
在此先感谢
could u plz help to do this work it is not displaying data in ives page
Thank in Advance
推荐答案
(函数(){ alert(" )
(function () { alert("1")
.getJSON(' <％= Url.Action("GetData"，"Piecharts")％>'，{} ，功能(数据){ var json =数据； var jsondata = []; for (( json中的 var 我 var ){ // var serie = new Array(json [i] .Projects，json [i] .Bugs); jsondata.push([json [i] .EmployeId，json [i] .EmployeeName]); 警报(" ) } var 图表= 新 Highcharts.Chart({ 图表: { renderTo:' 容器'， 类型:' pie'， plotBackgroundColor:空， plotBorderWidth:空， plotShadow: false }， 标题: { 文本:' BugTracker的资源报告' }， plotOptions:{ 馅饼:{ showInLegend: true ， 动画:错误， allowPointSelect: true ， 光标:' 指针' } }， 传奇: { 已启用:为真 }， 系列: [{ 类型:' pie'， 数据:jsondata }] }); }); }); 警报(" ) < / 脚本 > < /head > < 正文 > < div =" 容器" 样式 最小宽度:400px；高度:400px；边距:0自动" > < /div > < /body > < /html >
.getJSON('<%= Url.Action("GetData","Piecharts") %>', {}, 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]); alert("1") } 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 }] }); }); }); alert("1") </script> </head> <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"> </div> </body> </html>
您能否帮忙完成这项工作，因为它没有在ives页面中显示数据
在此先感谢
could u plz help to do this work it is not displaying data in ives page
Thank in Advance
这篇关于如何使用jQuery json将数据从edmx文件绑定到饼图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
