通过AJAX提供了flot.js数据称不确定 [英] Data supplied for flot.js via ajax says undefined

问题描述

在从数据库中下方，剧本我得到的数据，形成一个折线图。但数据称未定义并没有形成图形。

 变种D组;
VAR ARR = [];

$（函数（）{
    VAR的数据;
    $阿贾克斯（{
        数据类型：JSON，
        网址：query_sales.php，
        成功：功能（数据）{
            $每个（数据，功能（I，项目）{
                arr.push（[item.datey + item.bv]）;
            }）;
            D = ARR; //JSON.stringify(arr）;
        }
    }）;

    警报（D）; //表示不确定

    $ .plot（＃占位符，[D] {
        x轴：{模式：时间}
    }）;

    $（＃全）。点击（函数（）{
        $ .plot（＃占位符，[D] {
            x轴：{模式：时间}
        }）;
    }）;

    //添加FLOT版本字符串到页脚
    $（＃页脚）prePEND（海军报+ $ .plot.version +＆放大器; ndash的;）;
}）;
 

这是我如何查询数据库，并通过PHP脚本发送JSON对象阿贾克斯

  date_default_timezone_set（亚洲/ Kuala_Lumpur）;
$ acceptedUser =新的搜索（）;
$销售额= $ acceptedUser-＆GT; get_sales_graph（）;
$之前=阵列（）;
的foreach（$销售额为$ K =＆GT; $ V）
{
    $日期=的strtotime（$ V ['as_of_date']）* 1000;
    array_push（$之前，阵列（datey=＆GT; $日期，BV=＆GT; $ V ['total_bv']））;
}
回声json_en code（$前）;
 

但是，如果我的形成，并显示数据变种Ð图的地方使用这样的伪数据。我想明白这个虚拟数据和一个蹩脚从数据库之间的差异。

 变种D = [[946699200000，315.71]，[949377600000，317.45]，[951969600000，317.50]，[9572.4亿，315.86]，[9520.56亿，314.93]，[9835.92亿，313.19 ]，[1033617600000，313.34]];
 

解决方案

Ajax调用是异步的，因此所有code依赖于它的响应必须放置在回调函数。试试这个：

 变种D组;
VAR ARR = [];

$（函数（）{
    VAR的数据;
    $阿贾克斯（{
        数据类型：JSON，
        网址：query_sales.php，
        成功：功能（数据）{
            $每个（数据，功能（I，项目）{
                arr.push（[item.datey + item.bv]）;
            }）;
            D = ARR; //JSON.stringify(arr）;

            执行console.log（D）; //使用的console.log调试

            $ .plot（＃占位符，[D] {
                x轴：{模式：时间}
            }）;

            $（＃全）。点击（函数（）{
                $ .plot（＃占位符，[D] {
                    x轴：{模式：时间}
                }）;
            }）;
        }
    }）;

    //添加FLOT版本字符串到页脚
    $（＃页脚）prePEND（海军报+ $ .plot.version +＆放大器; ndash的;）;
}）;
 

In the below, script I'm getting data from database to form a line graph. But the data says undefined and no graph is formed.

var d;
var arr = [];

$(function() {
    var data;
    $.ajax({
        dataType: "json",
        url: 'query_sales.php',
        success: function(data){
            $.each(data, function(i, item) {
                arr.push([item.datey, +item.bv]);
            }); 
            d = arr; //JSON.stringify(arr);
        }
    });

    alert(d); //says undefined

    $.plot("#placeholder", [d], {
        xaxis: { mode: "time" }
    });

    $("#whole").click(function () {
        $.plot("#placeholder", [d], {
            xaxis: { mode: "time" }
        });
    });

    // Add the Flot version string to the footer
    $("#footer").prepend("Flot " + $.plot.version + " – ");
});

This is how I'm querying the database and sending json object to ajax via PHP script

date_default_timezone_set("Asia/Kuala_Lumpur");
$acceptedUser = new search();
$sales = $acceptedUser->get_sales_graph();
$before = array();
foreach($sales as $k=>$v)
{
    $date = strtotime($v['as_of_date']) * 1000;
    array_push($before, array("datey" => $date, "bv" => $v['total_bv']));
}
echo json_encode($before);

However if I use dummy data like this in the place of var d graph formed and data shown. I would like to understand the difference between this dummy data and the one fetched from database.

var d = [[946699200000, 315.71], [949377600000, 317.45], [951969600000, 317.50], [957240000000, 315.86], [952056000000, 314.93], [983592000000, 313.19], [1033617600000, 313.34]];

解决方案

The AJAX call is asynchronous so all code that relies on its response must be placed in the callback function. Try this:

var d;
var arr = [];

$(function() {
    var data;
    $.ajax({
        dataType: "json",
        url: 'query_sales.php',
        success: function(data){
            $.each(data, function(i, item) {
                arr.push([item.datey, +item.bv]);
            }); 
            d = arr; //JSON.stringify(arr);

            console.log(d); // use console.log to debug

            $.plot("#placeholder", [d], {
                xaxis: { mode: "time" }
            });

            $("#whole").click(function () {
                $.plot("#placeholder", [d], {
                    xaxis: { mode: "time" }
                });
            });
        }
    });

    // Add the Flot version string to the footer
    $("#footer").prepend("Flot " + $.plot.version + " – ");
});

这篇关于通过AJAX提供了flot.js数据称不确定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！