4

我从 rest api 得到一个 json 数据，我想用它作为 ZingFeed 的输入。

<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>
    <script>
    function getNewData()
    {
        $.ajax({ 
            type: "GET",
            dataType: "json",
            headers: {
                Accept:"application/json",
                "Access-Control-Allow-Origin": "*"
            },
            url: "/PerformanceMonitor/showProcessUsage/chrome",
            success: function(data){ 
                var mem = data.mem.size/10000;
                 return mem/10000;
                //$("#processInfo").append(data.mem.size);
                //$("#processInfo").append("   ")

            }
        });
        //return parseInt(memSize);
    }

    var chartData = {
        "type":"line",
        "refresh": {
            "type": "feed",
            "transport": "js",
            "url": "feed()",
            "interval": 200
        },
        "series":[
            {
                "values":[]
            }
        ]
    };


    window.onload = function() {
        zingchart.render({
            id: "chartDiv",
            data: chartData,
            height: 600,
            width: "100%"
        });
    };

    window.feed = function(callback) {
        var tick = {};
       // tick.plot0 = parseInt(10 + 900 * Math.random(), 10);
       tick.plot0 = parseInt(getNewData());
        //tick.plot0 = parseInt(1);
        callback(JSON.stringify(tick));
    };
    </script>
    <div id="processInfo"></div>
    <div id='chartDiv'></div>

</body>

</html>

在 firebug 中看到它工作正常。数据（即，在这种情况下，mem 真的很大，所以我在将它分配给 tick.plot0 之前将它划分了两次）。分配给 tick.plot0 .. 后，它在开发人员工具中悬停时显示 Nan。你能帮我在 ZingFeed 图表中绘制这些巨大的值吗

提前致谢

4

1 回答 1

8

The issue here is the nature of asynchronous functions in Javascript. Returning the data from AJAX doesn't work the way you've attempted above. You can read more about it here.

Here's a working solution.

I work on the ZingChart team. Let me know if you have other questions about the ZingChart library.

<!DOCTYPE html>
<html>

<head>
    <meta charset="ISO-8859-1">
    <title>Insert title here</title>
    <script src='http://cdn.zingchart.com/zingchart.min.js'></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>
    <script>
    var chartData = {
        "type":"line",
        "refresh": {
            "type": "feed",
            "transport": "js",
            "url": "feed()",
            "interval": 200
        },
        "series":[
            {
                "values":[]
            }
        ]
    };

    window.onload = function() {
        zingchart.render({
            id: "chartDiv",
            data: chartData,
            height: 600,
            width: "100%"
        });
    };

    window.feed = function(callback) {
        $.ajax({
            type: "GET",
            dataType: "json",
            headers: {
                Accept: "application/json",
                "Access-Control-Allow-Origin": "*"
            },
            url: "/PerformanceMonitor/showProcessUsage/chrome",
            success: function (data) {
                var mem = data.mem.size/10000;
                var tick = {
                    plot0: parseInt(mem)
                };
                callback(JSON.stringify(tick));
            }
        });
    };
    </script>
    <div id="processInfo"></div>
    <div id='chartDiv'></div>

</body>

于 2015-04-27T20:56:56.977 回答