Question

我从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 Charts中绘制这些巨大的价值

吗？

提前致谢

Answer 1

这里的问题是Javascript中异步函数的本质。从AJAX返回数据不会像您上面尝试的那样工作。 You can read more about it here.

这是一个有效的解决方案。

我在ZingChart团队工作。如果您对ZingChart库有其他疑问，请与我们联系。

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

Zing Feed从rest api获取数据

1 个答案: