C3.js time tick format issue

Question

I try to run the following code to display dates with Hours, minutes and seconds. Its working fine for me.But one problem is there. If the hours are above 24- hours it shows next day. I want to show the exact hours. The y-axis data like [400,596,2699](converted to seconds- dummy values)

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

The output will be like

I want to show 24:28:59 instead of 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(":");
}

另外，既然你没有使用你制作的日期部分，那么所有'新日期'的东西都是多余的

http://jsfiddle.net/k7zd6xxo/