0

JQPlot を使用してリアルタイムでグラフを描画することも始めました。2つのデータのみでグラフを描画するサンプル例が1つあります-

var storedData = [70, 10];

次に、ボタンを追加しました。そのボタンをクリックすると、さらにデータのレンダリングが開始されます。基本的には、サーバーからのリアルタイムデータと同じように言えます-

しかし、私が現在直面している問題は、Start Updatesボタンをクリックするとすぐに何も描画されないことです。だから、私はボタンクリックの何かを台無しにしたと思います。Javascript と HTML に取り組んでいたのは長い間だったので、多くのことを忘れていました。

以下は私のコードです-

<!DOCTYPE html>

<html>
<head>

    <title>Line Charts and Options</title>

    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="examples.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


</head>
<body>
    <div class="colmask leftmenu">
      <div class="colleft">
        <div class="col1" id="example-content">

<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>



<script class="code" type="text/javascript">
$(document).ready(function(){
  var storedData = [70, 10];
  var plot1;
  renderGraph();


$('button').click( function(){
    doUpdate();
    $(this).hide();
});

function renderGraph() {
    if (plot1) {
        plot1.destroy();
    }
    plot1 = $.jqplot('chart1', [storedData]);
}

var newData = [9, 1, 4, 6, 8, 2, 5];


function doUpdate() {
    if (newData.length) {
        var val = newData.shift();
        $.post('/echo/html/', {
            html: val
        }, function(response) {
            var newVal = new Number(response); /* update storedData array*/
            storedData.push(newVal);
            renderGraph();
            log('New Value '+ newVal+' added')
            setTimeout(doUpdate, 3000)
        })

    } else {
        log("All Done")
    }
}

function log(msg) {
$('body').append('<div>'+msg+'</div>')
}
});
</script>


    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>

  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
  <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>


</body>


</html>

ボタンクリックイベントを機能させることができません。ボタンをクリックするとすぐに、Start Update何も描画されません。正しい動作は、新しいデータセットでグラフのレンダリングを開始することです。

このjsfiddleからリアルタイムレンダリングを機能させようとしました

上記の JSFiddle から同じコードを HTML にコピーしましたが、うまくいきません。誰でもこれで私を助けることができますか?

4

1 に答える 1

1

どうぞ - スクリプトタグで jqplot の場所に更新する必要があります。また、私が知る限り、$.post は jfiddle なしでは機能しないため、doUpdate を doUpdate2 に変更する必要がありました。

<!DOCTYPE html>

<html>
<head>

    <title>Line Charts and Options</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script type="text/javascript" src="jqplot/plugins/jqplot.cursor.min.js"></script>
    <script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script>
    <script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script>
    <script type="text/javascript">



        $(function(){

                /* store empty array or array of original data to plot on page load */

                    var storedData = [70, 10];

                    /* initialize plot*/

                    var plot1;
                    renderGraph();

                    $('button').click( function(){
                    doUpdate2();
                    $(this).hide();
                    });

                    function renderGraph() {
                    if (plot1) {
                        plot1.destroy();
                    }
                    plot1 = $.jqplot('chart1', [storedData]);
                    }

                    var newData = [9, 1, 4, 6, 8, 2, 5];
                    var cp = 0;
                    function doUpdate2() {
                        var newVal = new Number(newData[cp]); /* update storedData array*/
                        storedData.push(newVal);
                        renderGraph();
                        log('New Value '+ newVal+' added')
                        if (cp < newData.length-1) setTimeout(doUpdate2, 3000)
                        cp++;
                    }

                    function doUpdate() {
                    if (newData.length) {
                        var val = newData.shift();
                        $.post('/echo/html/', {
                        html: val
                        }, function(response) {
                        var newVal = new Number(response); /* update storedData array*/
                        storedData.push(newVal);
                        renderGraph();
                        log('New Value '+ newVal+' added')
                         setTimeout(doUpdate, 3000)
                        })

                    } else {
                        log("All Done")
                    }
                    }

                    function log(msg) {
                    $('body').append('<div>'+msg+'</div>')
    }

        });



    </script>


</head>
<body>
    <div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
    <button>Start Updates</button>

</body>

</html>
于 2013-04-17T05:47:36.957 に答える