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）的功能;

希望它能帮助， 欢呼