如何用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

我會做的是這樣的：

1. 創建一個時間00:00:00的新日期：

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

2. 將該日期轉換為時間戳：

   timestamp = date.getTime()

3. 將Y秒添加到該時間戳：

   timestamp = timestamp + (y * 1000)

4. 創建一個新日期，使用該值作為輸入：

   date = new Date(timestamp)

5. 使用d3.time.format地格式化該日期：

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

6. 把所有的碎片放在一起，把它變成一個oneliner：

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

現在，您可以將此oneliner放入Y軸和返回time的format函數中：

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

請參閱此小提琴進行演示。

---

更多信息 ：

• 如何使用D3的d3.time.format
• 如何使用c3.js的刻度格式
• 如何向JavaScript Date對象添加一定的秒數？

Answer 2

要使用Firefox進行此項工作，您還需要設置：

Fri Jan 01 2016 00:00:00 GMT+0100 (CET)

代替

01-01-2016 00:00:00