jqPlot不会以返回的格式显示日期

时间:2017-04-28 13:33:04

标签: javascript c# model-view-controller jqplot

我有一个控制器在对控件进行选择时返回List<int> countListList<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 Chart

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

虽然该图表正确绘制。

0 个答案:

没有答案