c3.js如何更新chart.load（）上的x軸標籤？

Question

我有一個c3.js時間序列圖，它通過使用jQuery的$.getJSON()的API調用響應某些表單元素進行更新。從API調用返回的數據是這樣的：

 { 
     "x-axis": ["2016-09-01", "2016-09-02", "2016-09-03", "2016-09-04", "2016-09-05", "2016-09-06", "2016-09-07", "2016-09-08", "2016-09-09", "2016-09-10", "2016-09-11", "2016-09-12", "2016-09-13", "2016-09-14", "2016-09-15", "2016-09-16", "2016-09-17", "2016-09-18", "2016-09-19", "2016-09-20", "2016-09-21", "2016-09-22", "2016-09-23", "2016-09-24", "2016-09-25", "2016-09-26", "2016-09-27", "2016-09-28", "2016-09-29", "2016-09-30"], 
     "Label 1": [35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0, 35.0], 
     "Label 2": [124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0, 124.0] 
    } 

該地塊創建像這樣：

 ts = c3.generate({ 
      bindto: "#timeseries", 
      data: { 
       x: "x-axis", 
       json: data 
      }, 
      axis: { 
       x: { 
        type: "timeseries", 
        tick: { 
         format: function(x) { 
          return ts_date_format(x); 
         } 
        } 
       } 
      } 
     }); 

其中一個選項允許從日線看（開關一個情節點的每一天每個標籤一個月）爲每月視圖（每月一個標繪點每個標籤一年），在其上一個新的API請求時，返回爲「x軸」的新值：

{ 
     "x-axis": ["2015-10-01", "2015-11-01", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01", "2016-04-01", "2016-05-01", "2016-06-01", "2016-07-01", "2016-08-01", "2016-09-01"], 
     "Label 1": [2854.0, 4509.0, 5895.0, 6932.0, 4143.0, 3076.0, 1880.0, 1454.0, 1098.0, 1016.0, 1004.0, 1048.0], 
     "Label 2": [8680.0, 15090.0, 25079.0, 23746.0, 18096.0, 16058.0, 17610.0, 9269.0, 2550.0, 2852.0, 2232.0, 3720.0] 
    } 

數據裝入正常，如下所示：

 ts.load({ 
      unload: true, 
      json: data 
     }); 

但是繪圖的x軸未更新爲使用返回的新「x軸」值。通過上面引用的ts_date_format()函數將現有每日視圖值重新格式化爲每月格式。

http://c3js.org/reference.html#api-x看起來很有前景，有時它確實有效。這：

 ts.x(data["x-axis"]); 
     ts.load({ 
      unload: true, 
      json: data 
     }); 

確實事實上更新x軸的值，但引發了大量D3錯誤<rect> attribute x: Expected length, "NaN"的。倒車調用的順序load()和x()不不過工作，並且不會引發錯誤：

 ts.load({ 
      unload: true, 
      json: data 
     }); 
     ts.x(data["x-axis"]); 

的axes參數load()也似乎像它可能是適當的http://c3js.org/reference.html#api-load，文檔說：

If axes given, the axes specifed by data.axes will be updated. axes must be Object that has target id as keys. 

但這對我有點不清楚。我試過很多類似的變化：

 ts.load({ 
      unload: true, 
      json: data, 
      axes: { 
       "x": data["x-axis"] 
      } 
     }); 

和

 data["axes"] = { 
      "x": data["x-axis"] 
     } 
     ts.load({ 
      unload: true, 
      json: data, 
      axes: { 
       "x": true 
      } 
     }); 

，但他們都無法更新x軸的值。

我使用c3.js版本0.4.11

解決方案

得益於以下duderoot，我找到了解決辦法：

 var cols = []; 
     for (var k in data) { 
      cols.push([k].concat(data[k])); 
     } 
     ts.load({ 
      columns: cols 
     }); 

Answer 1

您好我只記得我最近在玩有了這個，所以這裏是一個JSFiddle，它可以做你想做的事情。 https://jsfiddle.net/duderoot/vwwod780/ 這裏是我用來更新X標貼

setTimeout(function() { 
chart.load({ 
    columns: [ 
     ["x", "2015-10-01", "2015-11-01", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01", "2016-04-01"], 
    ["Label 1", 2854.0, 4509.0, 5895.0, 6932.0, 4143.0, 3076.0, 1880.0, 1454.0, 1098.0, 1016.0, 1004.0, 1048.0], 
    ["Label 2", 8680.0, 15090.0, 25079.0, 23746.0, 18096.0, 16058.0, 17610.0, 9269.0, 2550.0, 2852.0, 2232.0, 3720.0] 

    ] 
}); 

}，3000）的功能;

希望它能幫助， 歡呼