2015-09-07 68 views
0

我想從C3與json數據使用流API(http://c3js.org/samples/api_flow.html)。我按照http://c3js.org/reference.html#api-flow中提到的方式將密鑰傳遞給我,但是我的圖表沒有用新數據刷新。C3.js流API與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; 
}; 

回答

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/