我正在尝试用我的ajax和json解决问题。我正在研究ASP.NET MVC 4。 我使用框架调用了一个视图,如下所示:
<iframe src="@Url.Action("AreaChartDevices", "Graphs")" style="width: 100% ;height:400px;border:none;"></iframe>
我在我的Graphs Controller中有这个(注意:我在这里创建了示例数据):
public ActionResult AreaChartDevices()
{
return View();
// return Json(chartData(),JsonRequestBehavior.AllowGet);
}
public JsonResult chartData()
{
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"Month", "Bolivia", "Ecuador", "Madagascar"
});
DataTable dtData = new DataTable();
dtData.Columns.Add("Id", typeof(int));
dtData.Columns.Add("Month", typeof(string));
dtData.Columns.Add("Bolivia", typeof(int));
dtData.Columns.Add("Ecuador", typeof(int));
dtData.Columns.Add("Madagascar", typeof(int));
dtData.Columns.Add("Average", typeof(decimal));
DateTime firstDate = new DateTime(2014, 05, 1);
DateTime secondDate = new DateTime(2014, 06, 1);
DateTime thirdDate = new DateTime(2014, 07, 1);
DateTime fourthDate = new DateTime(2014, 08, 1);
DateTime fifthDate = new DateTime(2014, 09, 1);
// Here we add five DataRows.
dtData.Rows.Add(1, firstDate.ToString("yyyy/MM"), 110, 850, 500, 600.00);
dtData.Rows.Add(2, secondDate.ToString("yyyy/MM"), 400, 600, 600, 700.00);
dtData.Rows.Add(3, thirdDate.ToString("yyyy/MM"), 300, 650, 800, 600.00);
dtData.Rows.Add(4, fourthDate.ToString("yyyy/MM"), 600, 400, 700, 650.00);
dtData.Rows.Add(5, fifthDate.ToString("yyyy/MM"), 700, 500, 400, 850.00);
foreach (DataRow row in dtData.Rows)
{
chartData.Add(new object[]
{
row["Month"],row["Bolivia"],row["Ecuador"],row["Madagascar"]
});
}
return Json(chartData);
}
并且Frame视图上的代码是(忽略不匹配的标签):
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Monthly Coffee Production by Country',
};
$.ajax({
traditional:true,
type: "POST",
url: "/Graphs/chartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert("Saghir");
alert(r.d);
var data = google.visualization.arrayToDataTable(r.d);
alert(data);
alert("Saghir1");
var options = {
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
//seriesType: 'bars',
//series: {
// 3:
// {
// type: 'area'}
//}
};
var chart = new google.visualization.AreaChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert("SAK");
alert(r.d);
}
});
}
</script>
</head>
<body>
<div id="chart" style="width: 900px; height: 500px;">
</div>
成功功能中的第一个警报是打印名称,但第二个警报显示未定义。控制台上的错误是&#34;错误:不是数组&#34;
我尝试使用json.parse(虽然我定义了dataType: json
),我也尝试使用Traditional:true
。我是ASP.NET MVC的新手。我确信我错过了charData
方法,但无法弄明白。
请指出正确的方向。
此致