js流api与JSON数据源不工作

C3.js flow api with JSON data source not working

本文关键字:数据源 工作 JSON api js      更新时间:2023-09-26

我试图使用流api(http://c3js.org/samples/api_flow.html)从C3 json数据。我正在传递我的json与键,如http://c3js.org/reference.html#api-flow所述,但我的图表没有刷新新的数据。

下面是我的代码和jsfiddle:http://jsfiddle.net/k9Dbf/496/

var chart = c3.generate({
    data: {
        json: [{
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/aaaa",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 121,
            "pageSize": 500
    }],
        type: 'line',
        keys: {
            x: 'url',
            value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
        }
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});
setTimeout(function () {
    chart.flow({
        data: {
            json: getDataFromAPI(),
            keys: {
                x: 'url',
                value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
            }
        },
        duration: 1500
    })
}, 2000);
var getDataFromAPI = function () {
    var data = [{
        "proxy": "10.0.1.15:1211",
            "url": "http://www.google.com/in/test",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 200,
            "pageSize": 332
    }, {
        "proxy": "10.0.1.15:1212",
            "url": "http://www.google.com/in/try",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 100,
            "pageSize": 200
    }, {
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/demo",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 333,
            "pageSize": 500
    }];
    return data;
};

我在理解API方面犯了一个愚蠢的错误。我们不需要将JSON封装在data键中。下面是工作代码:

var chart = c3.generate({
    data: {
        json: [{
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/aaaa",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 121,
            "pageSize": 500
    }],
        type: 'line',
        keys: {
            x: 'url',
            value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
        }
    },
    axis: {
        x: {
            type: 'category'
        }
    }
});
setTimeout(function () {
    chart.flow({
            json: getDataFromAPI(),
            keys: {
                x: 'url',
                value: ['proxy', 'url', 'host', 'time', 'responsetime', "pageSize", "useragent"]
            },
        duration: 1500
    })
}, 2000);
var getDataFromAPI = function () {
    var data = [{
        "proxy": "10.0.1.15:1211",
            "url": "http://www.google.com/in/test",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 200,
            "pageSize": 332
    }, {
        "proxy": "10.0.1.15:1212",
            "url": "http://www.google.com/in/try",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 100,
            "pageSize": 200
    }, {
        "proxy": "10.0.1.15:1213",
            "url": "http://www.google.com/in/demo",
            "host": "http://www.google.com/",
            "time": "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent": "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime": 333,
            "pageSize": 500
    }];
    return data;
};
http://jsfiddle.net/k9Dbf/497/