http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview
上面是我的图表,我传递的值是 1 天、30 分钟的间隔:
var data =[{
"key" : "Price",
"color" : "#4C73FF",
"values" : [ [ 1443621600000 , 71.89],
[ 1443619800000 , 75.51],
[ 1443618000000 , 68.49],
[ 1443616200000 , 62.72],
[ 1443612600000 , 70.39],
[ 1443610800000 , 59.77]]
}];
对应于以下内容 ( Epoch Converter ):
9/30/2015, 9:00:00 AM GMT-5:00 DST
9/30/2015, 8:30:00 AM GMT-5:00 DST
9/30/2015, 8:00:00 AM GMT-5:00 DST
9/30/2015, 7:30:00 AM GMT-5:00 DST
9/30/2015, 6:30:00 AM GMT-5:00 DST
9/30/2015, 6:00:00 AM GMT-5:00 DST
如何将图表上的日期格式从显示 9/30/2015
更改为显示 9:00
?
我在他们的文档中找不到任何有关时间或时间跨度的内容 http://nvd3-community.github.io/nvd3/examples/documentation.html#line
指令的完整代码:
var data =[{
"key" : "Price",
"color" : "#4C73FF",
"values" : [ [ 1443621600000 , 71.89],
[ 1443619800000 , 75.51],
[ 1443618000000 , 68.49],
[ 1443616200000 , 62.72],
[ 1443612600000 , 70.39],
[ 1443610800000 , 59.77]]
}];
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { return i })
.y(function(d) { return d[1] })
.color(d3.scale.category10().range());
chart.xAxis
.showMaxMin(false)
.tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx))
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
chart.bars.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
最佳答案
刚刚发现这个问题Understanding nvd3 x-axis date format
这帮助我找到了这个:https://github.com/mbostock/d3/wiki/Time-Formatting
我现在可以更正更改时间:
来 self 的timerangeConvertFactory
我刚刚做的服务
function convertTime(when) {
switch(when) {
case 'lh':
case 'ld':
return '%I:%M';
break;
case 'lw':
case '1mo':
case '3mo':
return '%x';
break;
case '1yr':
case '2yr':
case 'max':
return '%m:%y';
break;
}
}
现在回到我的指令:
// Get timespan:
var timeRange = TimeSpanFactory.getTimeSpan();
console.log('timeRange =',timeRange.when);
// Convert timespan to nvd3 format:
var nvd3timeRange = TimespanConvertFactory.convertTime(timeRange.when);
console.log('nvd3timeRange =',nvd3timeRange);
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.margin({top: 20, right: 40, bottom: 50, left: 40})
.x(function(d,i) { return i })
.y(function(d) { return d[1] })
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = res[0].values[d] && res[0].values[d][0] || 0;
return d3.time.format(nvd3timeRange)(new Date(dx))
// return d3.time.format('%I:%M')(new Date(dx))
// return d3.time.format('%x')(new Date(dx))
});
....
关于javascript - 如何转换时间范围以小时而不是日期显示? (NVD3图表),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32869027/