我有一个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"]);
load()方法的axes参数似乎也很合适，文档中写道：
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
});