如何在 C3 图表中使用稀疏数组？

Question

对于 C3 中的图形，我们可以给它列数据，这是一个数组数组，每个数组都是图表上不同的线，就像这样 C3 docs example. 但是有没有办法让该列数据稀疏？我尝试这样做时遇到错误，但我不确定是否有我不知道的解决方法。

如果不是，有没有比像我这样的过滤函数更好的在稀疏数组和密集数组之间转换的方法？

var columnData = []

var entry1 = ['data1', 30, 200, 100, 400, 150, 250];
var entry2 = ['data2', 50, 20, 10, 40, 15, 25];

columnData[0] = entry1;
columnData[3] = entry2;
console.log('columnData - sparse format', JSON.stringify(columnData));

function checkIfUndefined(x) {
    return (x !== undefined);
}

function sparseToDense(data) {
  return data.filter(checkIfUndefined);
}

/* If you comment out this sparseToDense conversion, it breaks
 * with the following error:
 * c3.js:5403 Uncaught TypeError: Cannot read property '0' of undefined
*/
columnData = sparseToDense(columnData);
console.log('columnData - dense format', JSON.stringify(columnData));

var chart = c3.generate({
    data: {
        columns: columnData,
        axes: {
            data1: 'y',
            data2: 'y2'
        }
    },
    axis: {
        y2: {
            show: true
        }
    }
});

Answer 1

您可以使用空数组作为输入值。这工作正常：

[["data1",30,200,100,400,150,250],[],[],["data2",50,20,10,40,15,25]]

并修改您的过滤函数以跳过没有长度的数组：

function checkIfNull(x) {
    return (x.length);
}

见updated fiddle

如何在 C3 图表中使用稀疏数组？

How to use sparse arrays with C3 charts?

javascript

arrays

charts

d3.js

c3.js