Question

这是我的数据集：

x: '2014-01-01', '2014-02-02', '2014-03-02', ...
y: '01:30:00', '00:55:00', '01:45:50', ...

我想使用c3.js库在我的图表上显示此数据。

到目前为止我尝试了这个（已经将时间转换为秒）：

var chart = c3.generate({
    data : {
        x : 'x',
        columns : [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis : {
        x : {
            type: 'timeseries'
        },
        y : {
            tick : {
                format: d3.time.format("%X")
                //or format: function (d) { return '$' + d; }
            }
        }
    }
});

Answer 1

我会做的是：

创建一个时间为00:00:00的新日期：

date = new Date('01-01-2016 00:00:00')
将该日期转换为时间戳：

timestamp = date.getTime()
在该时间戳上添加Y秒：

timestamp = timestamp + (y * 1000)
使用该值作为输入创建新日期：

date = new Date(timestamp)
使用d3.time.format相应地格式化该日期：

time = d3.time.format("%H:%M:%S")(date)
将所有碎片放在一起并将其变成一个oneliner：

time = d3.time.format("%H:%M:%S")(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));

现在，您可以将此oneliner放入Y轴的format函数并返回time：

var chart = c3.generate({
    data : {
        x : 'x',
        columns : [
            ['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
            ['sample', 30, 200, 100, 400, 150, 250]
        ]
    },
    axis : {
        x : {
            type: 'timeseries'
        },
        y : {
            tick : {
                format : function (y) {
                    return d3.time.format("%H:%M:%S")(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));
                }
            }
        }
    }
});

请参阅this Fiddle了解演示。

如何用c3在y轴上显示hh：mm：ss格式？

2 个答案:

更多信息：