Zing Feed 从 rest 获取数据 api

Question

我正在从其他 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.The 数据中看到它工作正常（即本例中的 mem 真的很大，所以我在将它分配给 tick.plot0 之前将它划分了两次）。分配给 tick.plot0 后 .. 在开发人员工具中悬停时显示 Nan。你能帮我在 ZingFeed 图表中绘制出这些巨大的价值

提前致谢

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

Zing Feed get data from rest api

javascript

rest

json

zingchart