以时间格式显示NVD3 y轴标签

I need to draw the NVD3 bar chart in my application, in that i have to show X-axis in time formate like below,please refer my below code and help me.This is the formate.

我需要在我的应用程序中绘制NVD3条形图，因为我必须像下面那样在时间格式中显示X轴，请参考下面的代码并帮助我。这是合成器。

00:00, 02:00, 04:00, 06:00, 08:00, 10:00, 12:00

00：00,02：00,04：00,06：00,08：00,10：00,12：00

Here's my code

这是我的代码

nv.addGraph(function() {
        chart = nv.models.multiBarHorizontalChart()
            .x(function(d) {
                var stringleght = (d.label).length > 10 ? (d.label).substring(0, 9) + '...' : d.label
                return (stringleght);
            })
            .y(function(d) {
                return d.value[0].x ? d.value[0].x : 0
            })
            .margin({
                top: 20,
                right: 20,
                bottom: 55,
                left: 113
            })
            .tooltip(function(key, x, y, e) {
                t.set('lengendLabel', key);
                t.set('clickSet', y);
                return '<h3>' + key + ' ' + e.point.label + '</h3>' + '<p>' + y + '</p><p>Duration</p>' +
                    '<p style="border-top: 1px solid #cfcfcf">' + e.point.value[0].y + ' Events </p>';
            })
            .transitionDuration(10)
            .showControls(false)
            .forceY([0,100]);
        chart.options(chartOptions)

        chart.yAxis.scale().domain([0, 21600]);

        chart.yAxis
             .tickFormat(function (d) {
                var durationConversion = moment.duration(parseInt(d),'seconds')
                ,   hoursformate = (durationConversion.get('hours') < 10) ? "0" + durationConversion.get('hours') : durationConversion.get('hours')
                ,   minutesformate = (durationConversion.get('minutes') < 10) ? "0" + durationConversion.get('minutes') : durationConversion.get('minutes') 
                ,   secondsformate = (durationConversion.get('seconds') < 10) ? "0" + durationConversion.get('seconds') : durationConversion.get('seconds') 
                ,   formatDur = hoursformate + ':' + minutesformate + ':' + secondsformate;
                return formatDur;
            })
            .axisLabel('Duration');

        d3.select('#loadchart svg')n
            .datum(data)
            .call(chart)

        nv.utils.windowResize(function() { d3.select('#chart svg').call(chart); });
        return chart;

1 个解决方案

#1

You can set the d3.time.format(formatspecifier) to set the time on x-axis. since you need the time in HH:MM format you can use the '%X' as a format specifier. so your code will look like this

您可以设置d3.time.format（formatspecifier）以在x轴上设置时间。因为您需要HH：MM格式的时间，所以您可以使用'％X'作为格式说明符。所以你的代码看起来像这样

chart.xAxis.tickFormat(function (d) {
                return d3.time.format('%X')(new Date(d));
            });

%X - time, as "%H:%M:%S".

％X - 时间，如“％H：％M：％S”。