Question

从这里开始：How do I display a Json random number in a real-time Flot chart?，我设法在flot图表上显示一个随机数。 x轴是当前时间的第二个。我遇到的问题是，现在我的图表上只显示一个点（当前值）。我想要的是根据随机数的值显示实时时间线。我怎么能这样做？我希望自己明白了。这是我的鳕鱼：

在C＃中：

            if (method == "rnd")
            {

                //Current second
                this.Page.Response.ContentType = "application/json1";
                DateTime now = DateTime.Now;
                int sec = now.Second;

               Random rnd = new Random();
                int nr = rnd.Next(1, 100); // creates a number between 1 and 99            

                var str = "{\"sec\":" + sec.ToString() + ",\"val\":" + nr.ToString() + "}";
                var json2 = new JavaScriptSerializer().Serialize(str);
                this.Page.Response.Write(json2);

            }

我的ASP页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MultiTrenduri.aspx.cs" Inherits="WebApplication2.MultiTrenduri" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/flot/jquery.flot.min.js"></script>
    <script src="Scripts/flot/jquery.flot.time.js"></script>

    <script src="Scripts/flot/jquery.flot.symbol.js"></script>
    <script src="Scripts/flot/hashtable.js"></script>
    <script src="Scripts/flot/jquery.flot.axislabels.js"></script>
    <script src="Scripts/flot/jquery.numberformatter-1.2.3.min.js"></script>

    <link href="Flot/examples.css" rel="stylesheet" />


    <script type="text/javascript">
        var sc = [], num = [];
          function test2() {
            $.ajax({
                type: 'POST',
                url: ('ajax.aspx?meth=') + "rnd",
                contentType: 'application/json2; charset=utf-8',
                dataType: 'json',
                async: true,
                cache: false,
                global: false,
                timeout: 120000,
                success: function (data, textStatus, jqXHR) { 

                    var obj = jQuery.parseJSON(data);

                    $('#azi').html(obj.sec);
                    $('#nr').html(obj.val);

                    var sc = [], num = [];
                    sc.push(obj.sec);
                    num.push(obj.val);

                    data = [[[sc, num]]];

                    //var afis = [[[data]]];
                    //$('#afs').text(afis.join(" * "));

                    //show the data in a list in body
                    var items = [];
                    $.each(data, function (key, val1) {
                        items.push("<li><a href=#'" + key + "'>" + val1 + "</a></li>");
                    });

                    $( "<ul/>", {
                        "class": "my-new-list",
                        html: items.join( "" )
                    }).appendTo( "body" );

                                  //START: PLOT IN TIMP REAL

                    $(function () {
                        var plot = $.plot("#placeholder", data,
                        {
                            series: {
                                shadowSize: 0   // Drawing is faster without shadows

                            },
                            points: { show: true },
                            line: { show: true },
                            yaxis: {
                                min: 0,
                                max: 100
                            },
                            xaxis: {
                                show: true
                            }
                        });

                      //  plot.setData(data); //to reset data
                     //   plot.draw();        //to redraw chart

                    });
                    //  plot.draw();

                    //END: PLOT IN TIMP REAL
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    window.alert(errorThrown);
                }
            });
        }

        window.setInterval(test2, 1000);
      </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="azi"></div>
        <div id="nr"></div>


        <div class="demo-container">
            <div id="placeholder" class="demo-placeholder">

            </div>
        </div>
    </div>
    </form>
</body>
</html>

如何画线实时flot？

0 个答案: