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

Question

我需要在我的应用程序中绘制 NVD3 条形图，因为我必须按时间格式显示 X 轴，如下所示，请引用我的下面的代码并帮助我。这是格式。

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

这是我的代码

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;

Answer 1

您可以设置 d3.time.format(formatspecifier) 来设置 x 轴上的时间。由于您需要 HH:MM 格式的时间，因此可以使用“%X”作为格式说明符。所以你的代码看起来像这样

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

%X - 时间，如“%H:%M:%S”。