javascript - 如何显示hh :mm:ss format at y-axis with c3?

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

我会做的，是这样的:

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

   date = new Date('01-01-2016 00:00:00')

2. 将该日期转换为时间戳:

   timestamp = date.getTime()

3. 将 Y 秒添加到该时间戳:

   时间戳 = 时间戳 + (y * 1000)

4. 创建一个新日期，使用该值作为输入:

   date = new Date(时间戳)

5. 使用 d3.time.format 相应地格式化该日期:

   time = d3.time.format("%H:%M:%S")(日期)

6. 把所有的部分放在一起，把它变成一个内衬:

   time = d3.time.format("%H:%M:%S")(新日期(新日期('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用于演示。

---

更多信息:

• How to use D3's d3.time.format
• How to use c3.js's tick format
• How to add a certain number of seconds to a JavaScript Date object?