Question

我有一个c3.js时间序列图，通过使用jQuery＆＃39; $.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请求制作，返回＆＃34; x轴＆＃34;的新值：

    {
        "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轴没有更新为使用新的＆＃34; x轴＆＃34;返回的值。通过上面引用的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的{{1}}参数似乎也可能合适http://c3js.org/reference.html#api-load，文档说：

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"]
            }
        });

但它们都无法更新x轴值。

我正在使用c3.js版本0.4.11

溶液

感谢下面的duderoot，我找到了解决方案：

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

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

希望它有所帮助，欢呼声

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

1 个答案: