C3.js 流 api JSON 数据源不工作

Question

我正在尝试使用流程 api(http://c3js.org/samples/api_flow.html) from C3 with json data. I am passing my json with keys as mentioned in 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;
};

Answer 1

我在理解 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/

C3.js 流 api JSON 数据源不工作

C3.js flow api with JSON data source not working

javascript

json

c3.js