我需要在我的应用程序中绘制 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;
最佳答案
您可以设置 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”。
关于javascript - 以时间格式显示 NVD3 y 轴标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29698692/