我有一个控制器在对控件进行选择时返回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" />
图表正在返回:
我试图让图表上的x轴以正确的格式显示日期,而不是“1-%m-%Y”,并且在控件上选择的日期范围内。
虽然该图表正确绘制。