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

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

本文关键字：hh mm ss 格式 显示 c3 何使用      更新时间：2023-09-26

这是我的数据集：

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

做的是：

  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. 将所有碎片放在一起，将其变成一个单行：

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

请参阅此小提琴进行演示。

<小时 />

更多信息 ：

  • 如何使用D3的d3.time.format
  • 如何使用 c3.js 的即时报价格式
  • 如何向 JavaScript Date 对象添加一定数量的秒数？

要在 Firefox 上也能获得这项工作，您需要设置：

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

而不是

01-01-2016 00:00:00
相关文章：