如何使用MVC4显示JqPlot图表日期

时间:2016-04-04 06:35:06

标签: c# jquery asp.net-mvc-4 nhibernate jqplot

我将var值传递给Jquery以显示Demand,Supply和Date值。我无法在图表中显示日期值。

控制器:

public ActionResult ChartDataJSON()
        {

            ICriteria criteria = NHibernateHttpModule.CurrentSession.CreateCriteria(typeof(JqPlotsSample));

            var chartData = criteria.List<JqPlotsSample>();
            DateTime dt;
            foreach(var item in chartData)
            {


               dt  =DateTime.ParseExact(item.Date,"yyyy-MM-dd h:mmtt",CultureInfo.InvariantCulture);
               item.Date = dt.ToString();


            }

            return Json(chartData, JsonRequestBehavior.AllowGet);

    }

查看:

    <script type="text/javascript">
        $(document).ready(function () {
            // The url for our json data
            var url = '@Url.Action("ChartDataJSON", "SampleJqplot")';

            var ret = null;
            $.ajax({
                // have to use synchronous here, else the function
                // will return before the data is fetched
                async: false,
                url: url,
                type:'GET',
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            var date = [];
            var demands = [];
            var supplys = [];


            for (i = 0; i < ret.length; i++) {



                demands.push([ret[i].Date, ret[i].Demand]);

                supplys.push([ret[i].Date, ret[i].Supply]);

            }
            alert(ret[1].Date+"Date Alert")

            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>

<body>

    <div id="chart1" style="height: 400px; width: 600px;"></div>
</body>

数据库: enter image description here

图表:

enter image description here

只有供求价值才会到来。

1 个答案:

答案 0 :(得分:0)

Hey Guys当我添加了jqplot.dateAxisRenderer.js文件时,我得到了日期值。

<script src="@Url.Content("~/Scripts/jqplot/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script>

enter image description here