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-axis" 的新值：

    {
        "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-axis" 值。现有的每日视图值通过上面引用的 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 参数似乎也可能是合适的 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 lables

的函数

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);

希望对您有所帮助，干杯

c3.js 如何更新 chart.load() 上的 x 轴标签？

c3.js how to update x-axis labels on chart.load()?

javascript

c3.js