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

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)
把所有的部分放在一起，把它变成一个内衬:

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

现在，您可以将这个 oneliner 放入 Y 轴的 format 函数和 return 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 格式？

How to show hh:mm:ss format at y-axis with c3?

javascript

datetime

datetime-format

d3.js

c3.js

更多信息：