如何使用MVC4以显示JqPlot图表日期 [英] How to Display JqPlot chart Date using MVC4

查看:143
本文介绍了如何使用MVC4以显示JqPlot图表日期的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的VAR值传递给jQuery来显示需求,供应和日期值。我能不能够显示图形的日期值。

I am passing the var value to the Jquery to display Demand, Supply and Date value. I can't able to display Date value in graph.

控制器:

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>

数据库:

图:

在这里输入的形象描述

只有需求和供给值来没有日期。

Only Demand and Supply value is coming not date.

推荐答案

嘿家伙,当我加入jqplot.dateAxisRenderer.js文件我得到的日期值。

Hey Guys when i added jqplot.dateAxisRenderer.js file I got the date value.

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

在这里输入的形象描述

这篇关于如何使用MVC4以显示JqPlot图表日期的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆