如何在C3图表上使用稀疏数组？ [英] How to use sparse arrays with C3 charts?

问题描述

对于C3中的图形，我们可以为其提供列数据，该数据是数组的数组，每个数组在图表上都像图 C3文档示例。但是有没有办法使列数据稀疏？尝试这样做时出现错误，尽管我不确定是否有我不知道的解决方法。

For graphing in C3, we can give it column data, which is an array of arrays with each array being a different line on the chart like in this C3 docs example. But is there a way to have that column data sparse? I'm getting an error when I try that, although I'm not sure if there's a workaround I don't know about.

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

If not, is there a better way to convert between sparse and dense arrays than a filter function like what I have?

https://jsfiddle.net/dbkidd/majx8byn/

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

推荐答案

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

You can use empty array as entry value. This works ok:

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

并修改过滤功能以跳过没有长度的数组：

And modify your filtering function to skip arrays without length:

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

请参见更新了小提琴

这篇关于如何在C3图表上使用稀疏数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！