javascript - C3js：每行的自定义日期

Question

是否有可能以这种方式构建数据？

['2013-01-01', 'redline', 120], 
['2013-01-02', 'greenline', 160], 
['2013-01-02', 'blueline', 200], 
['2013-01-04', 'greenline', 160], 

有“n”个不同的行数，每行都有不同的日期......我如何用 C3js 绘制它们？我会非常感谢任何帮助

Answer 1

您需要的是具有多个 x 轴的折线图，如下所示：

要在 c3js 中使用多 x 图表，您必须声明多个 xs 值。

我猜你需要在这里和那里添加日期，所以我将包含数据和日期的数组设为全局。

底部的函数将新的日期和数据推送到数组中。

要将这些变量加载到 c3js 中，请使用 concat 函数。

//Declare three x axes, and a dataset for each axis.
var periodOne = ['2013-01-01', '2013-01-04', '2013-01-07','2013-01-11','2013-01-15'];
var periodTwo = ['2013-01-02', '2013-01-04', '2013-01-06','2013-01-08', '2013-01-10','2013-01-13', '2013-01-15','2013-01-18', '2013-01-22'];
var periodThr = ['2013-01-05', '2013-01-10', '2013-01-15','2013-01-20', '2013-01-25'];
var xOne = [12,31,14,13,34];
var xTwo = [11,13,14,23,63,27,21,19,15];
var xThr = [12,32,13,13,23];

var chart = c3.generate({
        data: {
            xs:{
                //Declare the axes
                'Winter 08,09': 'x1',
                'Winter 09,10': 'x2',
                'Winter 10,11': 'x3'
            },
            columns: [
                ['x1'].concat(periodOne),
                ['x2'].concat(periodTwo),
                ['x3'].concat(periodThr),
                ['Winter 08,09'].concat(xOne),
                ['Winter 09,10'].concat(xTwo),
                ['Winter 10,11'].concat(xThr)
            ]
        },
        axis: {
            x: {
                type: 'timeseries'
            }
        }
    });
//You don't need this for multiple x axes, it's just to push data to arrays
function push(oneValue, oneDate, twoValue, twoDate, thrValue, thrDate){
    periodOne[periodOne.length] = oneDate;
    xOne[xOne.length] = oneValue;
    periodTwo[periodTwo.length] = twoDate;
    xTwo[xTwo.length] = twoValue;
    periodThr[periodThr.length] = thrDate;
    xThr[xThr.length] = thrValue;
    chart.load({
        columns: [
            ['x1'].concat(periodOne),
            ['x2'].concat(periodTwo),
            ['x3'].concat(periodThr),
            ['Winter 08,09'].concat(xOne),
            ['Winter 09,10'].concat(xTwo),
            ['Winter 10,11'].concat(xThr)
        ]
    });
}
//Use this function to push new data
push(13, '2013-01-19', 23, '2013-01-24', 17, '2013-01-30');