Question

我有一张带有c3js的空时间表图表，并且想要加载＆＃34;来自未知地图的动态列。

初始化

.caffemodel

我添加了x轴值和动态生成的地图以及所有数据：

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

所以想法是从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

3个阵列（ts，＆＃34; 1＆＃34;和＆＃34; 2＆＃34;具有相同数量的元素）。有什么想法吗？

Answer 1

您正在向columns参数中插入无效的数据格式。您应该在列中提供类似下面的内容。

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

Answer 2

只是为了帮助别人采用另一种方法。

在我的情况下，问题与加载多次数据有关。只需将单个数组中的所有列数据连接起来就可以解决问题：

var columnsData = [];
var tsData = ['ts'].concat(VALUES_FROM_ANOTHER_FUNCTION);
columnsData.push(tsData);
for (key in opMode) {
    columnsData.push([key].concat(opMode[key]));
}
chart.load({
    columns: columnsData
});

C3js动态加载未知列

2 个答案: