Javascript 如何显示JQPLOT图形而不是长文本
我在控制器类中有一个返回JSON数据的方法：Javascript 如何显示JQPLOT图形而不是长文本,javascript,asp.net-mvc,json,jqplot,Javascript,Asp.net Mvc,Json,Jqplot,我在控制器类中有一个返回JSON数据的方法： public ActionResult ChartDataJSON() { Chart chart = new Chart(); DataSet ds = dbLayer.GetChartData(); DataTable dtChartData = ds.Tables[0]; List<jqplotModel> chartData = new List<jqplotModel>();
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>
$（文档）.ready（函数（）{
风险值类型=[‘需求’、‘供应’]；
var rawData=函数（url、绘图、选项）{
var-ret=null；
$.ajax({
//这里必须使用同步，否则函数
//将在提取数据之前返回
async:false，
url:url，
数据类型：“json”，
成功：功能（数据）{
ret=数据；
}
});
返回ret；
};
//我们的json数据的url
var jsonurl=“/ChartController/ChartDataJSON”；
变量plotData=[]
对于（var i=0；i请注意，数据将是动态的，它将来自数据库，并通过在控制器类中编码，将JSON脚本返回到视图。请建议如何在jqPlot中传递/使用JSON对象（来自ChartDataJSON（）方法）。我认为这应该可以解决您的问题：
- 我已将
声明为包含ajaxreply json对象的变量。那我就用rawData$(document).ready(function () {var types = ['Demand', 'Supply']; 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 Hr' }, 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(); } }); });public class jqPlotController : Controller { public ActionResult ChartDataJSON() { var chartData = new List<jqplotModel>(); var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) }; var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) }; var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) }; var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) }; chartData.Add(point1); chartData.Add(point2); chartData.Add(point3); chartData.Add(point4); return Json(chartData, JsonRequestBehavior.AllowGet); } // // GET: /jqPlot/ public ActionResult Index() { return View(); } }public class jqplotModel { public string Date { get; set; } public double Demand { get; set; } public double Supply { get; set; } }<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")" type="text/javascript"></script> <script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")" type="text/javascript"></script><script type="text/javascript"> $(document).ready(function () { // The url for our json data var url = '@Url.Action("ChartDataJSON", "jqPlot")'; 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; } }); var demands = []; var supplys = []; for (i = 0; i < ret.length; i++) { // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays. demands.push([ret[i].Date, ret[i].Demand]); supplys.push([ret[i].Date, ret[i].Supply]); } var plot1 = $.jqplot('chart1', [demands, supplys], { title: "Demand Supply", axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer, tickOptions: { formatString: '%d/%m/%Y' }, label: 'Date' }, yaxis: { label: 'Demand' }, y2axis: { label: 'Supply' } }, series: [ { yaxis: 'yaxis', label: 'demands' }, { yaxis: 'y2axis', label: 'supplys' } ], highlighter: { show: true, sizeAdjust: 1 }, cursor: { show: false } }); }); </script> @{ ViewBag.Title = "jQPlot Demo"; } <h2>@ViewBag.Title</h2> <div id="chart1" style="height: 400px; width: 600px;"></div>