C3.js 时间刻度格式问题

Question

我尝试运行下面的代码来显示带小时、分钟和秒的日期。 me.But 它工作正常，但存在一个问题。如果时间超过 24 小时，则显示第二天。我想显示确切的时间。 y 轴数据如 [400,596,2699]（转换为秒 - 虚拟值）

chartDefault = c3.generate({
    bindto : '#divlineChart',
    data : {
        x : 'x',
        columns : [
            barChartTasks,
            barChartCounts
        ],
        keys : {
            value : barChartTasks,
        },
    },
    axis : {
        x : {
            type : 'category'
        },
        y : {
            tick : {
                format : function (y) {
                    return d3.time.format("%X")(new Date(new Date('2016-01-01 00:00:00').getTime() + (y * 1000)));
                }
            },
            label : {
                text : 'Hours',
                position : 'outer-center'
            }
        }
    },
    bar : {
        width : {
            ratio : .5
        }
    }
});

输出会像

我想显示 24:28:59 而不是 00:28:59。

Answer 1

您需要编写自己的小格式化程序，就像这里的这个：

format: function (y) {
    var twoFormat = d3.format("02d");
    var parts = [
        twoFormat(Math.floor(y / 3600)),
        twoFormat(Math.floor((y % 3600) / 60)),
        twoFormat(Math.floor(y % 60))
    ];
    return parts.join(":");
}

此外，由于您不使用所生成内容的日期部分，所以所有 'new Date' 内容都是多余的

http://jsfiddle.net/k7zd6xxo/

C3.js 时间刻度格式问题

C3.js time tick format issue

javascript

c3.js