我有一个控制器在控件上进行选择时返回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.
更多推荐
发布评论