【发布时间】：2013-10-17 08:10:28
【问题描述】：
我在控制器类中有一个返回 JSON 数据的方法：
public ActionResult ChartDataJSON()
{
Chart chart = new Chart();
DataSet ds = dbLayer.GetChartData();
DataTable dtChartData = ds.Tables[0];
List<jqplotModel> chartData = new List<jqplotModel>();
if (dtChartData .Rows.Count != 0)
{
foreach (DataRow row in dtChartData .Rows)
{
chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
}
}
return Json(chartData, JsonRequestBehavior.AllowGet);
}
有谁知道我如何在我的脚本中使用它。我尝试使用这些线，但它没有显示图表
<script type="text/javascript">
$(document).ready(function () {
var types = ['Demand', 'Supply'];
var rawData = function (url, plot, options) {
var ret = null;
$.ajax({
// have to use synchronous here, else the function
// will return before the data is fetched
async: false,
url: url,
dataType: "json",
success: function (data) {
ret = data;
}
});
return ret;
};
// The url for our json data
var jsonurl = "/ChartController/ChartDataJSON";
var plotData = []
for (var i = 0; i < rawData.length; i++) {
//Parse the date.
var date = new Date(+rawData[i].Date.match(/\d+/));
plotData[i] = [date, rawData[i].Demand];
}
var plotData2 = []
for (var i = 0; i < rawData.length; i++) {
//Parse the date.
var date = new Date(+rawData[i].Date.match(/\d+/));
plotData2[i] = [date, rawData[i].Supply];
}
var plot1 = $.jqplot('chart1', [plotData, plotData2], {
height: 300,
width: 300,
title: 'Demand Supply',
dataRenderer: rawData,
dataRendererOptions: {
unusedOptionalUrl: jsonurl
},
series: [
{},
{ yaxis: 'y2axis' }
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%#I %p' },
label: "Date",
tickInterval: '4 hour'
},
yaxis: {
label: "Demand",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
y2axis: {
label: "Supply",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
highlighter: {
show: true,
sizeAdjust: 1
},
cursor: {
show: false
},
legend: {
show: true,
labels: types,
location: 'ne'
}
});
$(window).bind('resize', function (event, ui) {
if (plot1) {
plot1.replot();
}
});
});
</script>
当我运行它时，我看不到图表，并且页面显示如下长文本：
[{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply" :20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/ ","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"需求":5656.51,"供应":21572,"日期":"/Date(1236519000000)/","DateString":"7 PM"},{"需求":4622.88,"供应":7794,"日期" :"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString": "9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"供应":1403,"日期":"/Date(1236533400000)/","DateString":"11 PM"},{"需求":1321.76,"供应":3755,"日期":"/Date(1236537000000 )/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"}, {"需求":1277.1,"供应":1072,"日期":"/Date(1236544200000)/","D ateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand": 2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/ Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM "},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply": 5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/" ,"DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"需求":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date": "/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"下午 1 点"},{"需求":0,"供应":1,"日期":"/Date(1236587400000)/"," DateString":"2 PM"}]
谁能帮我找出问题所在以及我做错了什么？
编辑： 请注意，数据将是动态的，它将来自数据库，并通过控制器类中的编码将 JSON 脚本返回到视图。请建议如何在 jqPlot 中传递/使用 JSON 对象（来自 ChartDataJSON() 方法）。
【问题讨论】：
-
我不知道答案，但你看过 DotNet Highcharts for MVC 吗？ dotnethighcharts.codeplex.com
标签： javascript asp.net-mvc json jqplot