javascript - C3js动态加载未知列

Question

我有一个带有 c3js 的空时间序列图表，我想从未知地​​图动态“加载”列。

初始化

var chart = c3.generate({
    data: {
        x: 'ts',
        xFormat: null, // For millis
        columns: []
    },
    axis: {
        x: {
            type: 'timeseries',
            tick: {
                format: '%Y-%m-%d'
            }
        }
    },
    line: { // For enable null values in series (gaps in charts))
        connectNull: false 
    }
});

我使用所有数据添加 x 轴值和动态生成的 map :

var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION);
periodPowerChart.load({
    columns: [
        tsData
    ]
});
// opMode looks like [{"1": [null, null, 0, 3, 5]}, {"2": [2, 4, null, null, null]}]
for (key in opMode) {
    chart.load({
        columns: [
            [key].concat(opMode[key])
        ]
    })
}

所以想法是从opMode加载数据。在 for 的第一次迭代中，我得到了:

Error: x is not defined for id = "1"

3 个数组(ts、“1”和“2”具有相同数量的元素)。有什么想法吗？

Answer 1

您正在向列参数中插入无效的数据格式。您应该向列提供如下所示的内容。

var columnsData = [[
  "ts",
  "2013-01-01",
  "2013-01-02",
  "2013-01-03",
  "2013-01-04",
  "2013-01-05"
],
[
  "data1",
  null,
  null,
  0,
  3,
  5
],
[
  "data2",
  2,
  4,
  null,
  null,
  null
]];

我更新了您的动态列插入逻辑，使数据看起来像上面那样。这是代码。

//opMode should look like below with time data.
var opMode = [{
  "ts": ['2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05']
}, {
  "data1": [null, null, 0, 3, 5]
}, {
  "data2": [2, 4, null, null, null]
}];

opMode.forEach(function(obj, index) {
  var key = Object.keys(obj)[0];
  var data = [key];

  data = data.concat(obj[key]);

  chart.load({
    columns: [
      data
    ]
  });

});

您可以引用这个例子并尝试一下以获得一个好主意。
http://c3js.org/samples/timeseries.html