Question

我正在尝试使用来自C3的flow api（http://c3js.org/samples/api_flow.html）和json数据。我正在使用http://c3js.org/reference.html#api-flow中提到的密钥传递我的json，但是我的图表没有刷新新数据。

下面是我的代码和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时，我是一个愚蠢的错误。我们不需要在data键中包装JSON。这是工作代码：

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数据源无法正常工作

1 个答案: