Question

我找到了实时图表（flotcharts.org）。现在我尝试从JSON文件中实现数据加载。

文件中的数据是（ y 轴）。

{
"data":[["1","3","5","7","9","11","2","8","6","15","3","18","14","9","51","13","6","18","16","3","15","32","17","11","1","23","5","17","9","1"]]
}

HTML和jQuery函数来自示例。我尝试编辑ajax。我希望使用变量 i 生成 x 轴的数据（在代码中如下）。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Flot Examples: Real-time updates</title>
 <link href="http://www.ondrej-vasko.cz/realtime/css/examples.css" rel="stylesheet" type="text/css">
 <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
 <script language="javascript" type="text/javascript" src="http://www.ondrej-vasko.cz/realtime/js/jquery.js"></script>
 <script language="javascript" type="text/javascript" src="http://www.ondrej-vasko.cz/realtime/js/jquery.flot.js"></script>
 <script type="text/javascript">

$(function() {

    // We use an inline data source in the example, usually data would
    // be fetched from a server

    var data = [],
        totalPoints = 300;

    function getRandomData() {
        $.ajax({
        url: "http://www.ondrej-vasko.cz/realtime/js/data_2.json",
        type: "POST",
        dataType: "json"
       }).success(function(data){
        //$('#placeholder').append(JSON.stringify(data) + '</br>');
        data.push(data);    
        });
       return false;

//          if (data.length > 0)
//              data = data.slice(1);

        // Do a random walk

//          while (data.length < totalPoints) {

//              var prev = data.length > 0 ? data[data.length - 1] : 50,
//                  y = prev + Math.random() * 10 - 5;
//
//              if (y < 0) {
//                  y = 0;
//              } else if (y > 100) {
//                  y = 100;
//              }

//              data.push(y);
//          }

        // Zip the generated y values with the x values

        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]])
        }

        return res;
    }

    // Set up the control widget

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

    var plot = $.plot("#placeholder", [ getRandomData() ], {
        series: {
            shadowSize: 0   // Drawing is faster without shadows
        },
        yaxis: {
            min: 0,
            max: 100
        },
        xaxis: {
            show: false
        }
    });

    function update() {

        plot.setData([getRandomData()]);

        // Since the axes don't change, we don't need to call plot.setupGrid()

        plot.draw();
        setTimeout(update, updateInterval);
    }

    update();

    // Add the Flot version string to the footer

    $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
});

</script>

<div id="header">
    <h2>Real-time updates</h2>
</div>

<div id="content">
  <div class="demo-container">
    <div id="placeholder" class="demo-placeholder"></div>
  </div>
  <p>You can update a chart periodically to get a real-time effect by using a timer to insert the new data in the plot and redraw it.</p>
  <p>Time between updates: <input id="updateInterval" type="text" value="" style="text-align: right; width:5em"> milliseconds</p>
</div>

<div id="footer">
    Copyright &copy; 2007 - 2013 IOLA and Ole Laursen
</div>

编辑完成后，无法将数据绘制到图表中。可以寻求帮助吗？感谢

Answer 1

我认为问题可能是在ajax调用后推送数据时。在返回“res”的循环中发出警报，并确保数据格式正确。

 var res = [];
    for (var i = 0; i < data.length; ++i) {
        res.push([i, data[i]])
        *add Alert Here*
    }

看看这个例子。 http://jsfiddle.net/grgesxbt/3/

Answer 2

快速浏览许多问题：

1。）这个：

var res = [];
for (var i = 0; i < data.length; ++i) {
    res.push([i, data[i]])
}

需要 .success回调函数。你现在拥有它的方式是在AJAX调用完成之前执行，数据仍然是[]。实际上，你有一个随机return false;，所以你甚至都没有点击上面的代码。

2。）你的AJAX返回是一个带有＆＃34;数据的对象＆＃34;属性是一组字符串数组。然后将其推入另一个阵列。非常复杂。重写.success回调是这样的：

.success(function(data){
    var array = data['data'][0];
    var res = [];
    for (var i = 0; i < array .length; ++i) {
       res.push([i, parseFloat(array[i])])
    }
    return res;
});

3.）注意上面的parseFloat，这很重要。你的号码是字符串，而flot不会那样。这会将它们转换为数字数据。最好修复你的JSON文件，然后摆脱parseFloat。实际上，如果你可以编辑JSON文件，你可以简单地做到：

[1,3,5,7,9,11,2,8,6,15,3,18,14,9,51,13,6,18,16,3,15,32,17,11,1,23,5,17,9,1]

然后您的.success回调变为：

.success(function(data){
    var res = [];
    for (var i = 0; i < data.length; ++i) {
       res.push([i, data[i]])
    }
    return res;
});

FlotChart来自JSON的实时加载不会呈现

2 个答案: