jqPlot不会以正在返回的格式显示日期(jqPlot does not display the dates in the format it is being returned)

jqPlot不会以正在返回的格式显示日期(jqPlot does not display the dates in the format it is being returned)

我有一个控制器在控件上进行选择时返回List<int> countList和List<DateTime?> dayList 。

return Json(new { stats = countList, days = dayList }, JsonRequestBehavior.AllowGet);

我在我的JavaScript文件中有以下内容。

(function ($) { function GetValues() { //Get value of selections var Start = $("#start").val(); var End = $("#end").val(); var sales = []; $('.salelist:input:checked').each(function () { sales.push(this.id) }) var salecount = sales.join(","); var submit = $("#submit").val(); $.ajax({ url: $("#submit").attr("data-url"), data: { start: Start, end: End, Sale: salecount } }).done(function (data) { $('#chartdiv').empty(); testJqPlot(data.stats, data.days); }); function testJqPlot(stats, days) { $.jqplot.config.enablePlugins = true; var plot = $.jqplot('chartdiv', [stats], { series: [{ showMarker: false }], title: 'Count By Date', animate: true, // Will animate plot on calls to plot1.replot({resetAxes:true}) animateReplot: true, axes: { xaxis: { renderer: $.jqplot.CategoryDateAxisRenderer, rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, label: 'Date', tickRenderer: $.jqplot.CategoryAxisTickRenderer, tickOptions:{ formatString: '%d-%m-%Y' }, pad: 0 }, yaxis: { label: 'Count' } }, series:[{lineWidth:4, markerOptions:{style:'square'}}], highlighter: { show: true }, cursor: { show: true, tooltipLocation:'sw' }, series: [{ lineWidth: 2 ,markerOptions: { style: 'filledCircle', size: 0} }] } ); } // end of TestJqPlot } $(document).ready(function () { //Click event on the specified button $("#submit").click(function () { GetValues(); }) }) })(jQuery)

我的观点是这样的：

<div class="result" id="resultvol"> <div id="chartdiv" style="margin-top: 6%"></div> </div>

我在.cshtml文件中包含了以下内容：

<script src="~/Scripts/jqPlot/jquery.jqplot.js" type="text/javascript"></script> <script src="~/Scripts/jqPlot/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script> <script src="~/Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> <script src="~/Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript"></script> <script src="~/src/plugins/jqplot.highlighter.js" type="text/javascript" ></script> <script src="~/src/plugins/jqplot.cursor.js" type="text/javascript" ></script> <script type="text/javascript" src="~/src/plugins/jqplot.canvasTextRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.dateAxisRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.barRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.highlighter.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.cursor.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.pointLabels.js"></script> <link href="~/Scripts/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" />

图表正在返回，如下所示：

jqPlot图表

我试图让图表上的x轴以正确的格式显示日期，而不是“1-％m-％Y”，并且在控件上选择的日期范围内。

虽然图形正确绘制。

I have a controller that returns List<int> countList and List<DateTime?> dayList upon making a selection on the controls.

return Json(new { stats = countList, days = dayList }, JsonRequestBehavior.AllowGet);

I have the below in my JavaScript file.

(function ($) { function GetValues() { //Get value of selections var Start = $("#start").val(); var End = $("#end").val(); var sales = []; $('.salelist:input:checked').each(function () { sales.push(this.id) }) var salecount = sales.join(","); var submit = $("#submit").val(); $.ajax({ url: $("#submit").attr("data-url"), data: { start: Start, end: End, Sale: salecount } }).done(function (data) { $('#chartdiv').empty(); testJqPlot(data.stats, data.days); }); function testJqPlot(stats, days) { $.jqplot.config.enablePlugins = true; var plot = $.jqplot('chartdiv', [stats], { series: [{ showMarker: false }], title: 'Count By Date', animate: true, // Will animate plot on calls to plot1.replot({resetAxes:true}) animateReplot: true, axes: { xaxis: { renderer: $.jqplot.CategoryDateAxisRenderer, rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer }, label: 'Date', tickRenderer: $.jqplot.CategoryAxisTickRenderer, tickOptions:{ formatString: '%d-%m-%Y' }, pad: 0 }, yaxis: { label: 'Count' } }, series:[{lineWidth:4, markerOptions:{style:'square'}}], highlighter: { show: true }, cursor: { show: true, tooltipLocation:'sw' }, series: [{ lineWidth: 2 ,markerOptions: { style: 'filledCircle', size: 0} }] } ); } // end of TestJqPlot } $(document).ready(function () { //Click event on the specified button $("#submit").click(function () { GetValues(); }) }) })(jQuery)

My view has this :

<div class="result" id="resultvol"> <div id="chartdiv" style="margin-top: 6%"></div> </div>

I have included the following in my .cshtml file :

<script src="~/Scripts/jqPlot/jquery.jqplot.js" type="text/javascript"></script> <script src="~/Scripts/jqPlot/plugins/jqplot.barRenderer.min.js" type="text/javascript"></script> <script src="~/Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> <script src="~/Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js" type="text/javascript"></script> <script src="~/src/plugins/jqplot.highlighter.js" type="text/javascript" ></script> <script src="~/src/plugins/jqplot.cursor.js" type="text/javascript" ></script> <script type="text/javascript" src="~/src/plugins/jqplot.canvasTextRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.dateAxisRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.barRenderer.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.highlighter.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.cursor.js"></script> <script type="text/javascript" src="~/src/plugins/jqplot.pointLabels.js"></script> <link href="~/Scripts/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" />

The chart is being returned as this :

jqPlot Chart

I am trying to have the x axis on the chart to display the dates in the correct format instead of "1-%m-%Y" and within the date range selected on the controls.

The graph plots correctly though.

最满意答案

我能通过从我的ajax调用中移除函数来解决这个错误 - testJqPlot（data.stats，data.days）;

并将此函数替换为jqplot的整个脚本。

I was able to resolve this error by removing the function from my ajax call - testJqPlot(data.stats, data.days);

And replaced this function with the entire script for jqplot.