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

其中一个选项允许从日 View (一个月内每个标签每天一个绘图点)切换到月 View (一年内每个标签每月一个绘图点)，在此基础上发出新的 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() 将现有的每日 View 值重新格式化为每月格式。上面引用的函数。

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

希望对你有帮助干杯