如何显示JQPLOT图形而不是长文本

时间:2022-09-15 10:53:04

I have a method in controller class which returns JSON data:

我在控制器类中有一个返回JSON数据的方法:

public ActionResult ChartDataJSON()
{
    Chart chart = new Chart();
    DataSet ds = dbLayer.GetChartData();
    DataTable dtChartData = ds.Tables[0];
    List<jqplotModel> chartData = new List<jqplotModel>();

    if (dtChartData .Rows.Count != 0)
    {
        foreach (DataRow row in dtChartData .Rows)
        {
            chartData.Add(new jqplotModel{ Date = DateTime.Parse(@row["Date"].ToString()), Demand= Convert.ToDouble(@row["Demand"].ToString()), Supply= Convert.ToDouble(@row["Supply"].ToString()) });
        }
    }
    return Json(chartData, JsonRequestBehavior.AllowGet);
}

Does anybody know how I can use it in my script. I tried with these lines but it is not showing the chart

有谁知道如何在我的脚本中使用它。我试过这些线但它没有显示图表

<script type="text/javascript">
    $(document).ready(function () {
        var types = ['Demand', 'Supply'];               

        var rawData =  function (url, plot, options) {
            var ret = null;
            $.ajax({
                // have to use synchronous here, else the function
                // will return before the data is fetched
                async: false,
                url: url,
                dataType: "json",
                success: function (data) {
                    ret = data;
                }
            });
            return ret;
        };

        // The url for our json data
        var jsonurl = "/ChartController/ChartDataJSON";
        var plotData = []

        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));

            plotData[i] = [date, rawData[i].Demand];
        }

        var plotData2 = []

        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));

            plotData2[i] = [date, rawData[i].Supply];
        }

        var plot1 = $.jqplot('chart1', [plotData, plotData2], {
            height: 300,
            width: 300,
            title: 'Demand Supply',
            dataRenderer: rawData,
            dataRendererOptions: {
                unusedOptionalUrl: jsonurl
            },
            series: [
                    {},
                    { yaxis: 'y2axis' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: '%#I %p' },
                    label: "Date",
                    tickInterval: '4 hour'
                },
                yaxis: {
                    label: "Demand",
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer

                },
                y2axis: {
                    label: "Supply",
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            },
            legend: {
                show: true,
                labels: types,
                location: 'ne'
            }
        });

        $(window).bind('resize', function (event, ui) {
            if (plot1) {
                plot1.replot();
            }
        });
    });
</script>

When I run this I don't see the chart, and the page displays a long text like this:

当我运行它时,我没有看到图表,页面显示如下的长文本:

[{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}]

[{“Demand”:4422.45,“Supply”:17660,“Date”:“/ Date(1236504600000)/”,“DateString”:“3 PM”},{“Demand”:5019.27,“Supply”:20699, “Date”:“/ Date(1236508200000)/”,“DateString”:“4 PM”},{“Demand”:5030.35,“Supply”:19917,“Date”:“/ Date(1236511800000)/”,“ DateString“:”5 PM“},{”Demand“:5172.35,”Supply“:23597,”Date“:”/ Date(1236515400000)/“,”DateString“:”6 PM“},{”Demand“: 5656.51,“Supply”:21572,“Date”:“/ Date(1236519000000)/”,“DateString”:“7 PM”},{“Demand”:4622.88,“Supply”:7794,“Date”:“/日期(1236522600000)/“,”DateString“:”8 PM“},{”需求“:3116.21,”供应“:3427,”日期“:”/日期(1236526200000)/“,”日期字符串“:”9 PM “},{”Demand“:1588.83,”Supply“:1883,”Date“:”/ Date(1236529800000)/“,”DateString“:”10 PM“},{”Demand“:1394.15,”Supply“: 1403,“Date”:“/ Date(1236533400000)/”,“DateString”:“11 PM”},{“Demand”:1321.76,“Supply”:3755,“Date”:“/ Date(1236537000000)/” ,“DateString”:“12 AM”},{“Demand”:1130.98,“Supply”:3474,“Date”:“/ Date(1236540600000)/”,“DateString”:“1 AM”},{“Demand “:1277.1,” 供应 “:1072,” 日期 “:”/日期(1236544200000)/ “” 日期字符串“:”2 AM“},{”Demand“:1214.68,”Supply“:1025,”Date“:”/ Date(1236547800000)/“,”DateString“:”3 AM“},{”Demand“: 2117.91,“供应”:1198,“日期”:“/日期(1236551400000)/”,“日期字符串”:“4 AM”},{“需求”:1658.97,“供应”:1485,“日期”:“/日期(1236555000000)/“,”DateString“:”5 AM“},{”需求“:1997.36,”供应“:3126,”日期“:”/日期(1236558600000)/“,”DateString“:”6 AM “},{”Demand“:2147.37,”Supply“:4785,”Date“:”/ Date(1236562200000)/“,”DateString“:”7 AM“},{”Demand“:2114.13,”Supply“: 5268,“Date”:“/ Date(1236565800000)/”,“DateString”:“8 AM”},{“Demand”:2389.84,“Supply”:5264,“Date”:“/ Date(1236569400000)/” ,“DateString”:“9 AM”},{“Demand”:2240.77,“Supply”:5526,“Date”:“/ Date(1236573000000)/”,“DateString”:“10 AM”},{“Demand “:1802.43,”供应“:4530,”日期“:”/日期(1236576600000)/“,”日期字符串“:”上午11点“},{”需求“:1929.71,”供应“:6618,”日期“: “/ Date(1236580200000)/”,“DateString”:“12 PM”},{“Demand”:545.65,“Supply”:2767,“Date”:“/ Date(1236583800000)/”,“DateString”:“ 1 PM“},{”需求“:0,”供应“:1,”日期“:”/日期(1236587400000)/“,”数据eString“:”2 PM“}]

Can anybody help me figure out the problem and where and what I am doing wrong?

任何人都可以帮我找出问题,我在哪里和我做错了什么?

Edit: Please note that the data would be dynamic and it would be coming from the database and through coding in controller class it will be returning the JSON script to the view. Please suggest how to pass/use the JSON object (from ChartDataJSON() method) in jqPlot.

编辑:请注意,数据将是动态的,它将来自数据库,通过控制器类中的编码,它将返回JSON脚本到视图。请建议如何在jqPlot中传递/使用JSON对象(来自ChartDataJSON()方法)。

3 个解决方案

#1


3  

Ok, so here is my answer.

好的,所以这是我的答案。

My controller is as follows:

我的控制器如下:

public class jqPlotController : Controller
{    
    public ActionResult ChartDataJSON()
    {
        var chartData = new List<jqplotModel>();

        var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) };
        var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) };
        var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) };
        var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) };
        chartData.Add(point1);
        chartData.Add(point2);
        chartData.Add(point3);
        chartData.Add(point4);

        return Json(chartData, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: /jqPlot/

    public ActionResult Index()
    {
        return View();
    }
}

And the model:

而型号:

public class jqplotModel
{
 public string Date { get; set; }
 public double Demand { get; set; }
 public double Supply { get; set; }
}

I've hard coded a (very!) simple dataset in the ChartDataJSON method. It will be pretty trivial for you to refactor your code to output data in a similar format.

我在ChartDataJSON方法中对一个(非常!)简单数据集进行了硬编码。重构代码以输出类似格式的数据将是非常简单的。

As I'm new to jqPlot it took me a while to figure out how to pass a DateTime object to this javascript library. Every time I tried jqPlot gave me pretty cryptic time related error message. The solution I found was to format it as a date time which jqPlot understands e.g. '2008-09-30 4:00PM' (see example here) - I'm sure this is going to be useful for others confused about jqPlot's handling of dates!

由于我是jqPlot的新手,我花了一些时间来弄清楚如何将DateTime对象传递给这个javascript库。每次我尝试jqPlot都给了我相当神秘的时间相关的错误信息。我找到的解决方案是将其格式化为jqPlot理解的日期时间,例如'2008-09-30 4:00 PM'(参见此处的示例) - 我确信这对于其他对jqPlot处理日期感到困惑的人会有用!

The view looks as follows:

该视图如下所示:

<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")"  type="text/javascript"></script>

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

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

        var demands = [];
        var supplys = [];

        for (i = 0; i < ret.length; i++) {
            // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
            demands.push([ret[i].Date, ret[i].Demand]);
            supplys.push([ret[i].Date, ret[i].Supply]);
        }

        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>

@{
    ViewBag.Title = "jQPlot Demo";
}

<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>

Note that in my solution I don't use the datarender option. Instead I retrieve the data using the jquery ajax call and then I create two separate arrays for the Demand and Supply data. Each of these arrays have the date in the x-axis, and then their respective value in the y-axis (hence the date is obviously common to both arrays).

请注意,在我的解决方案中,我不使用datarender选项。相反,我使用jquery ajax调用检索数据,然后为Demand和Supply数据创建两个单独的数组。这些数组中的每一个都在x轴上具有日期,然后在y轴上具有它们各自的值(因此日期对于两个数组而言显然是共同的)。

Once I had this data I then plotted it via jqPlot, which results in the following graph:

一旦我获得了这些数据,我就通过jqPlot绘制它,结果如下图:

如何显示JQPLOT图形而不是长文本

Work still needs to be done to refine the ticks on the axis and the labelling, but hopefully this is the kind graph you want. If not, then it certainly has been a good learning task for me and I hope others will find this useful.

仍然需要完成工作以优化轴和标签上的刻度,但希望这是您想要的那种图形。如果没有,那对我来说肯定是一个很好的学习任务,我希望其他人会觉得这很有用。

#2


1  

I think this should solve your problem: JsFiddle link

我认为这应该可以解决你的问题:JsFiddle链接

  • i have declared rawData as a variable which would contain the ajaxreply json object. then i have used that variable below to plot the graph.

    我已将rawData声明为包含ajaxreply json对象的变量。然后我用下面的变量绘制图表。

  • in your code i observed that you are already supplying data to the graph and you also have dataRenderer set inside it. that is not correct. DataRenderer examples

    在您的代码中,我发现您已经在向图表提供数据,并且您还在其中设置了dataRenderer。这是不正确的。 DataRenderer示例

    $(document).ready(function () {
    

    var rawData = [{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}];

    var rawData = [{“Demand”:4422.45,“Supply”:17660,“Date”:“/ Date(1236504600000)/”,“DateString”:“3 PM”},{“Demand”:5019.27,“Supply” :20699,“Date”:“/ Date(1236508200000)/”,“DateString”:“4 PM”},{“Demand”:5030.35,“Supply”:19917,“Date”:“/ Date(1236511800000)/ “,”DateString“:”5 PM“},{”Demand“:5172.35,”Supply“:23597,”Date“:”/ Date(1236515400000)/“,”DateString“:”6 PM“},{”需求“:5656.51,”供应“:21572,”日期“:”/日期(1236519000000)/“,”日期字符串“:”7 PM“},{”需求“:4622.88,”供应“:7794,”日期“ :“/ Date(1236522600000)/”,“DateString”:“8 PM”},{“Demand”:3116.21,“Supply”:3427,“Date”:“/ Date(1236526200000)/”,“DateString”: “9 PM”},{“Demand”:1588.83,“Supply”:1883,“Date”:“/ Date(1236529800000)/”,“DateString”:“10 PM”},{“Demand”:1394.15,“供应“:1403,”日期“:”/日期(1236533400000)/“,”DateString“:”11 PM“},{”需求“:1321.76,”供应“:3755,”日期“:”/日期(1236537000000) )/“,”DateString“:”12 AM“},{”Demand“:1130.98,”Supply“:3474,”Date“:”/ Date(1236540600000)/“,”DateString“:”1 AM“}, { “需求”:1277.1, “供应”:1072, “日期”:“/日期(12365442 00000)/“,”DateString“:”2 AM“},{”Demand“:1214.68,”Supply“:1025,”Date“:”/ Date(1236547800000)/“,”DateString“:”3 AM“} ,{“需求”:2117.91,“供应”:1198,“日期”:“/日期(1236551400000)/”,“日期字符串”:“4 AM”},{“需求”:1658.97,“供应”:1485, “Date”:“/ Date(1236555000000)/”,“DateString”:“5 AM”},{“Demand”:1997.36,“Supply”:3126,“Date”:“/ Date(1236558600000)/”,“ DateString“:”6 AM“},{”Demand“:2147.37,”Supply“:4785,”Date“:”/ Date(1236562200000)/“,”DateString“:”7 AM“},{”Demand“: 2114.13,“Supply”:5268,“Date”:“/ Date(1236565800000)/”,“DateString”:“8 AM”},{“Demand”:2389.84,“Supply”:5264,“Date”:“/日期(1236569400000)/“,”DateString“:”9 AM“},{”需求“:2240.77,”供应“:5526,”日期“:”/日期(1236573000000)/“,”日期字符串“:”上午10点“},{”Demand“:1802.43,”Supply“:4530,”Date“:”/ Date(1236576600000)/“,”DateString“:”11 AM“},{”Demand“:1929.71,”Supply“: 6618,“Date”:“/ Date(1236580200000)/”,“DateString”:“12 PM”},{“Demand”:545.65,“Supply”:2767,“Date”:“/ Date(1236583800000)/” ,“DateString”:“1 PM”},{“需求”:0,“供应”:1,“日期”:“/日期(1236587) 400000)/“,”DateString“:”2 PM“}];

        var types = ['Demand', 'Supply'];               
    
        var plotData = []
    
        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));
    
            plotData[i] = [date, rawData[i].Demand];
        }
    
        var plotData2 = []
    
        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));
    
            plotData2[i] = [date, rawData[i].Supply];
        }
    
        var plot1 = $.jqplot('chart1', [plotData, plotData2], {
            height: 300,
            width: 300,
            title: 'Demand Supply',
            //dataRenderer: rawData,
            //dataRendererOptions: {
            //    unusedOptionalUrl: jsonurl
            //},
            series: [
                    {},
                    { yaxis: 'y2axis' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: '%#I %p' },
                    label: "Date"
                    //,tickInterval: '4 Hr'
                },
                yaxis: {
                    label: "Demand"
                    //,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    
                },
                y2axis: {
                    label: "Supply"
                    //,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            },
            legend: {
                show: true,
                labels: types,
                location: 'ne'
            }
        });
    
        $(window).bind('resize', function (event, ui) {
            if (plot1) {
                plot1.replot();
            }
        });
    
    });
    

#3


0  

As @user1254053 I also had trouble implementing @Fresh's solution. I was trying to write the js code in my ChartDataJSON view, I mean in the view from the ChartDataJSON() method and I just got plain text objects printed out when running my view.

作为@ user1254053,我也无法实现@ Fresh的解决方案。我试图在我的ChartDataJSON视图中编写js代码,我的意思是在ChartDataJSON()方法的视图中,我只是在运行我的视图时打印出纯文本对象。

Then I tried to write my view code in another view, the index view for example or any other view that just has a return(View) statement and worked out.

然后我尝试在另一个视图中编写我的视图代码,例如索引视图或任何其他只有一个返回(View)语句并且计算出来的视图。

I hope this may help other people and I wish I'm not too late.

我希望这可以帮助其他人,我希望我不会太晚。

#1


3  

Ok, so here is my answer.

好的,所以这是我的答案。

My controller is as follows:

我的控制器如下:

public class jqPlotController : Controller
{    
    public ActionResult ChartDataJSON()
    {
        var chartData = new List<jqplotModel>();

        var point1 = new jqplotModel { Date = DateTime.Now.Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(1), Supply = Convert.ToDouble(3) };
        var point2 = new jqplotModel { Date = DateTime.Now.AddDays(10).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(2), Supply = Convert.ToDouble(4) };
        var point3 = new jqplotModel { Date = DateTime.Now.AddDays(31).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(6), Supply = Convert.ToDouble(6) };
        var point4 = new jqplotModel { Date = DateTime.Now.AddDays(106).Date.ToString("yyyy-MM-dd h:mmtt"), Demand = Convert.ToDouble(4), Supply = Convert.ToDouble(2) };
        chartData.Add(point1);
        chartData.Add(point2);
        chartData.Add(point3);
        chartData.Add(point4);

        return Json(chartData, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: /jqPlot/

    public ActionResult Index()
    {
        return View();
    }
}

And the model:

而型号:

public class jqplotModel
{
 public string Date { get; set; }
 public double Demand { get; set; }
 public double Supply { get; set; }
}

I've hard coded a (very!) simple dataset in the ChartDataJSON method. It will be pretty trivial for you to refactor your code to output data in a similar format.

我在ChartDataJSON方法中对一个(非常!)简单数据集进行了硬编码。重构代码以输出类似格式的数据将是非常简单的。

As I'm new to jqPlot it took me a while to figure out how to pass a DateTime object to this javascript library. Every time I tried jqPlot gave me pretty cryptic time related error message. The solution I found was to format it as a date time which jqPlot understands e.g. '2008-09-30 4:00PM' (see example here) - I'm sure this is going to be useful for others confused about jqPlot's handling of dates!

由于我是jqPlot的新手,我花了一些时间来弄清楚如何将DateTime对象传递给这个javascript库。每次我尝试jqPlot都给了我相当神秘的时间相关的错误信息。我找到的解决方案是将其格式化为jqPlot理解的日期时间,例如'2008-09-30 4:00 PM'(参见此处的示例) - 我确信这对于其他对jqPlot处理日期感到困惑的人会有用!

The view looks as follows:

该视图如下所示:

<script src="@Url.Content("Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/jquery.jqplot.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.barRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.pointLabels.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.canvasAxisTickRenderer.min.js")"  type="text/javascript"></script>
<script src="@Url.Content("Scripts/jqPlot/plugins/jqplot.highlighter.min.js")"  type="text/javascript"></script>

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

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

        var demands = [];
        var supplys = [];

        for (i = 0; i < ret.length; i++) {
            // Save the data to the relevant array. Note how date at the zeroth position (i.e. x-axis) is common for both demand and supply arrays.
            demands.push([ret[i].Date, ret[i].Demand]);
            supplys.push([ret[i].Date, ret[i].Supply]);
        }

        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>

@{
    ViewBag.Title = "jQPlot Demo";
}

<h2>@ViewBag.Title</h2>
<div id="chart1" style="height: 400px; width: 600px;"></div>

Note that in my solution I don't use the datarender option. Instead I retrieve the data using the jquery ajax call and then I create two separate arrays for the Demand and Supply data. Each of these arrays have the date in the x-axis, and then their respective value in the y-axis (hence the date is obviously common to both arrays).

请注意,在我的解决方案中,我不使用datarender选项。相反,我使用jquery ajax调用检索数据,然后为Demand和Supply数据创建两个单独的数组。这些数组中的每一个都在x轴上具有日期,然后在y轴上具有它们各自的值(因此日期对于两个数组而言显然是共同的)。

Once I had this data I then plotted it via jqPlot, which results in the following graph:

一旦我获得了这些数据,我就通过jqPlot绘制它,结果如下图:

如何显示JQPLOT图形而不是长文本

Work still needs to be done to refine the ticks on the axis and the labelling, but hopefully this is the kind graph you want. If not, then it certainly has been a good learning task for me and I hope others will find this useful.

仍然需要完成工作以优化轴和标签上的刻度,但希望这是您想要的那种图形。如果没有,那对我来说肯定是一个很好的学习任务,我希望其他人会觉得这很有用。

#2


1  

I think this should solve your problem: JsFiddle link

我认为这应该可以解决你的问题:JsFiddle链接

  • i have declared rawData as a variable which would contain the ajaxreply json object. then i have used that variable below to plot the graph.

    我已将rawData声明为包含ajaxreply json对象的变量。然后我用下面的变量绘制图表。

  • in your code i observed that you are already supplying data to the graph and you also have dataRenderer set inside it. that is not correct. DataRenderer examples

    在您的代码中,我发现您已经在向图表提供数据,并且您还在其中设置了dataRenderer。这是不正确的。 DataRenderer示例

    $(document).ready(function () {
    

    var rawData = [{"Demand":4422.45,"Supply":17660,"Date":"/Date(1236504600000)/","DateString":"3 PM"},{"Demand":5019.27,"Supply":20699,"Date":"/Date(1236508200000)/","DateString":"4 PM"},{"Demand":5030.35,"Supply":19917,"Date":"/Date(1236511800000)/","DateString":"5 PM"},{"Demand":5172.35,"Supply":23597,"Date":"/Date(1236515400000)/","DateString":"6 PM"},{"Demand":5656.51,"Supply":21572,"Date":"/Date(1236519000000)/","DateString":"7 PM"},{"Demand":4622.88,"Supply":7794,"Date":"/Date(1236522600000)/","DateString":"8 PM"},{"Demand":3116.21,"Supply":3427,"Date":"/Date(1236526200000)/","DateString":"9 PM"},{"Demand":1588.83,"Supply":1883,"Date":"/Date(1236529800000)/","DateString":"10 PM"},{"Demand":1394.15,"Supply":1403,"Date":"/Date(1236533400000)/","DateString":"11 PM"},{"Demand":1321.76,"Supply":3755,"Date":"/Date(1236537000000)/","DateString":"12 AM"},{"Demand":1130.98,"Supply":3474,"Date":"/Date(1236540600000)/","DateString":"1 AM"},{"Demand":1277.1,"Supply":1072,"Date":"/Date(1236544200000)/","DateString":"2 AM"},{"Demand":1214.68,"Supply":1025,"Date":"/Date(1236547800000)/","DateString":"3 AM"},{"Demand":2117.91,"Supply":1198,"Date":"/Date(1236551400000)/","DateString":"4 AM"},{"Demand":1658.97,"Supply":1485,"Date":"/Date(1236555000000)/","DateString":"5 AM"},{"Demand":1997.36,"Supply":3126,"Date":"/Date(1236558600000)/","DateString":"6 AM"},{"Demand":2147.37,"Supply":4785,"Date":"/Date(1236562200000)/","DateString":"7 AM"},{"Demand":2114.13,"Supply":5268,"Date":"/Date(1236565800000)/","DateString":"8 AM"},{"Demand":2389.84,"Supply":5264,"Date":"/Date(1236569400000)/","DateString":"9 AM"},{"Demand":2240.77,"Supply":5526,"Date":"/Date(1236573000000)/","DateString":"10 AM"},{"Demand":1802.43,"Supply":4530,"Date":"/Date(1236576600000)/","DateString":"11 AM"},{"Demand":1929.71,"Supply":6618,"Date":"/Date(1236580200000)/","DateString":"12 PM"},{"Demand":545.65,"Supply":2767,"Date":"/Date(1236583800000)/","DateString":"1 PM"},{"Demand":0,"Supply":1,"Date":"/Date(1236587400000)/","DateString":"2 PM"}];

    var rawData = [{“Demand”:4422.45,“Supply”:17660,“Date”:“/ Date(1236504600000)/”,“DateString”:“3 PM”},{“Demand”:5019.27,“Supply” :20699,“Date”:“/ Date(1236508200000)/”,“DateString”:“4 PM”},{“Demand”:5030.35,“Supply”:19917,“Date”:“/ Date(1236511800000)/ “,”DateString“:”5 PM“},{”Demand“:5172.35,”Supply“:23597,”Date“:”/ Date(1236515400000)/“,”DateString“:”6 PM“},{”需求“:5656.51,”供应“:21572,”日期“:”/日期(1236519000000)/“,”日期字符串“:”7 PM“},{”需求“:4622.88,”供应“:7794,”日期“ :“/ Date(1236522600000)/”,“DateString”:“8 PM”},{“Demand”:3116.21,“Supply”:3427,“Date”:“/ Date(1236526200000)/”,“DateString”: “9 PM”},{“Demand”:1588.83,“Supply”:1883,“Date”:“/ Date(1236529800000)/”,“DateString”:“10 PM”},{“Demand”:1394.15,“供应“:1403,”日期“:”/日期(1236533400000)/“,”DateString“:”11 PM“},{”需求“:1321.76,”供应“:3755,”日期“:”/日期(1236537000000) )/“,”DateString“:”12 AM“},{”Demand“:1130.98,”Supply“:3474,”Date“:”/ Date(1236540600000)/“,”DateString“:”1 AM“}, { “需求”:1277.1, “供应”:1072, “日期”:“/日期(12365442 00000)/“,”DateString“:”2 AM“},{”Demand“:1214.68,”Supply“:1025,”Date“:”/ Date(1236547800000)/“,”DateString“:”3 AM“} ,{“需求”:2117.91,“供应”:1198,“日期”:“/日期(1236551400000)/”,“日期字符串”:“4 AM”},{“需求”:1658.97,“供应”:1485, “Date”:“/ Date(1236555000000)/”,“DateString”:“5 AM”},{“Demand”:1997.36,“Supply”:3126,“Date”:“/ Date(1236558600000)/”,“ DateString“:”6 AM“},{”Demand“:2147.37,”Supply“:4785,”Date“:”/ Date(1236562200000)/“,”DateString“:”7 AM“},{”Demand“: 2114.13,“Supply”:5268,“Date”:“/ Date(1236565800000)/”,“DateString”:“8 AM”},{“Demand”:2389.84,“Supply”:5264,“Date”:“/日期(1236569400000)/“,”DateString“:”9 AM“},{”需求“:2240.77,”供应“:5526,”日期“:”/日期(1236573000000)/“,”日期字符串“:”上午10点“},{”Demand“:1802.43,”Supply“:4530,”Date“:”/ Date(1236576600000)/“,”DateString“:”11 AM“},{”Demand“:1929.71,”Supply“: 6618,“Date”:“/ Date(1236580200000)/”,“DateString”:“12 PM”},{“Demand”:545.65,“Supply”:2767,“Date”:“/ Date(1236583800000)/” ,“DateString”:“1 PM”},{“需求”:0,“供应”:1,“日期”:“/日期(1236587) 400000)/“,”DateString“:”2 PM“}];

        var types = ['Demand', 'Supply'];               
    
        var plotData = []
    
        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));
    
            plotData[i] = [date, rawData[i].Demand];
        }
    
        var plotData2 = []
    
        for (var i = 0; i < rawData.length; i++) {
            //Parse the date.
            var date = new Date(+rawData[i].Date.match(/\d+/));
    
            plotData2[i] = [date, rawData[i].Supply];
        }
    
        var plot1 = $.jqplot('chart1', [plotData, plotData2], {
            height: 300,
            width: 300,
            title: 'Demand Supply',
            //dataRenderer: rawData,
            //dataRendererOptions: {
            //    unusedOptionalUrl: jsonurl
            //},
            series: [
                    {},
                    { yaxis: 'y2axis' }
            ],
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    tickOptions: { formatString: '%#I %p' },
                    label: "Date"
                    //,tickInterval: '4 Hr'
                },
                yaxis: {
                    label: "Demand"
                    //,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
    
                },
                y2axis: {
                    label: "Supply"
                    //,labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            },
            highlighter: {
                show: true,
                sizeAdjust: 1
            },
            cursor: {
                show: false
            },
            legend: {
                show: true,
                labels: types,
                location: 'ne'
            }
        });
    
        $(window).bind('resize', function (event, ui) {
            if (plot1) {
                plot1.replot();
            }
        });
    
    });
    

#3


0  

As @user1254053 I also had trouble implementing @Fresh's solution. I was trying to write the js code in my ChartDataJSON view, I mean in the view from the ChartDataJSON() method and I just got plain text objects printed out when running my view.

作为@ user1254053,我也无法实现@ Fresh的解决方案。我试图在我的ChartDataJSON视图中编写js代码,我的意思是在ChartDataJSON()方法的视图中,我只是在运行我的视图时打印出纯文本对象。

Then I tried to write my view code in another view, the index view for example or any other view that just has a return(View) statement and worked out.

然后我尝试在另一个视图中编写我的视图代码,例如索引视图或任何其他只有一个返回(View)语句并且计算出来的视图。

I hope this may help other people and I wish I'm not too late.

我希望这可以帮助其他人,我希望我不会太晚。