如何为实时浮动画线？

Question

从这里开始：，我设法在浮动图表上显示了一个随机数。 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>

Answer 1

也许有人需要做同样的事情。这就是我设法做到的。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <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" />

     <%-- Library for TOOLTIP:--%>
    <script src="Scripts/flot/jquery.flot.crosshair.js"></script>

        <!-- CSS -->
<%--<style type="text/css">
#placeholder {
    width: 1000px;
    height: 500px;
    text-align: center;
    margin: 0 auto;
}
</style>--%>


 <%--   <link href="Flot/examples.css" rel="stylesheet" />--%>
<%--    <script src="Scripts/jquery-1.4.1.js"></script>
    <script src="Scripts/flot/jquery.flot.js"></script>--%>



    <script type="text/javascript">
        var sc = [], num = [];

        var data = [];
        var dataset;
        var totalPoints = 100;
        var updateInterval=30 ;
        var now = new Date().getTime();
        var t;
        var multipleCalls, multCalls;
        var input = document.getElementById('input');
        var st;

  /*      window.onload = function f1() {
            document.getElementById('updateInterval').value = 90;

        }

        function f2() {
          //  document.getElementById('up2').value = document.getElementById('up1').value
          var  updateInterval = document.getElementById('updateInterval').value;
       //     window.alert(updateInterval);
        }*/

        $(function () {



        function test2() {
            $.ajax({
                type: 'GET',
                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);

                    t = obj.val;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    window.alert(errorThrown);
                }
            });

        }

        function apel() {
            test2();
            $('#fn').html(t);
            updateInterval = document.getElementById('updateInterval').value;
        }

        function GetData() {
            data.shift();
            data.slice(1);

            while (data.length < totalPoints) {
                //  var y = Math.random() * 100;
                var y = t;
                var temp = [now += updateInterval, y];

                data.push(temp);
            }
        }

        $("#up").val(updateInterval).change(function () {
            var vv = $(this).val();
            if (vv && !isNaN(+vv)) {
                updateInterval = +vv;
                if (updateInterval < 1) {
                    updateInterval = 1;
                } else if (updateInterval > 2000) {
                    updateInterval = 2000;
                }
                $(this).val("" + updateInterval);
            }
        });





        var options = {
            series: {
                lines: {
                    show: true,
                    lineWidth: 1.2,
                    fill: false
                }
            },
            xaxis: {
                mode: "time",
                tickSize: [2, "second"],
                tickFormatter: function (v, axis) {
                    var date = new Date(v);

                    if (date.getSeconds() % 5 == 0) {
                        var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                        var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                        var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                        var w = hours + ":" + minutes + ":" + seconds;

                        return w;
                    } else {
                        return "";
                    }
                },
                axisLabel: "Time",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10
            },

            grid: {
                hoverable: true,
                clickable: true
            },

            yaxis: {
                min: 0,
                max: 100,
                tickSize: 5,
                tickFormatter: function (v, axis) {
                    if (v % 10 == 0) {
                        return v + "%";
                    } else {
                        return "";
                    }
                },
                axisLabel: "CPU loading",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 6
            },
            legend: {
                labelBoxBorderColor: "#fff"
            }
        };

        //START TOOLTIP

     /*   $("#placeholder").bind("plothover", function (event, pos, item) {

            if ($("#enablePosition:checked").length > 0) {
                var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
                $("#hoverdata").text(str);
            }

            if ($("#enableTooltip:checked").length > 0) {
                if (item) {
                    var x = item.datapoint[0].toFixed(2),
                        y = item.datapoint[1].toFixed(2);

                    $("#tooltip").html(item.series.label + " of " + x + " = " + y)
                        .css({ top: item.pageY + 5, left: item.pageX + 5 })
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            }
        });

        $("#placeholder").bind("plotclick", function (event, pos, item) {
            if (item) {
                $("#clickdata").text(" - click point " + item.dataIndex + " in " + item.series.label);
                plot.highlight(item.series, item.datapoint);
            }
        });
        */
        //END TOOLTIP

        st = $(document).ready(function f1() {
            test2();
            GetData();

            dataset = [
                { label: "CPU", data: data }
            ];

            $.plot($("#placeholder"), dataset, options);

            function stop() {
                //window.alert("Stop");
                //multipleCalls.clearTimeout();
                window.clearTimeout(updateInterval);
            }


            function update() {
                test2();
                GetData();

                $.plot($("#placeholder"), dataset, options)
                multipleCalls = setTimeout(update, updateInterval);
                multCalls = multipleCalls;
            }

            update();
        });

        });
      </script>
</head>
<body>
    //Stops the graph
    <button onclick="clearInterval(multipleCalls)">Stop</button>

        <div id="header">
         <div id="azi"></div>
        <div id="nr"></div>
    </div>

    <div id="content">

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

        <p>Time between updates: <input id="up" type="text" value="" style="text-align: right; width:5em"/> milliseconds</p>

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

如何为实时浮动画线？

How to draw line for real time flot?

c#

jquery

json

ajax

flot