Question

我已经开始使用JQPlot实时绘制图形。我有一个示例示例，它将仅使用两个数据绘制图形 -

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

使实时渲染功能正常工作

我在我的HTML中从上面的JSFiddle中复制了相同的一堆代码，但它对我不起作用。有人可以帮我吗？

Answer 1

在这里 - 你必须更新脚本标签中的jqplot位置。此外，我必须将doUpdate更改为doUpdate2，因为$ .post在没有jfiddle的情况下无法工作。

<!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>

使用JSPlot进行实时渲染

1 个答案: