我试图使用nvd3在angularjs中显示条形图,这样x轴显示日期,y轴显示时间。我尝试了以下几点:
$scope.options1 = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.date;
},
y: function(d) {
return d.hour;
},
showValues: true,
duration: 500,
xAxis: {
axisLabel: 'Date',
tickFormat: function(d) {
return d3.time.format('%d-%m-%y')(new Date(d));
}
},
yAxis: {
axisLabel: 'Time of Day',
axisLabelDistance: -10,
tickFormat: function(d) {
return d3.time.format("%H%p")(new Date(d));
}
}
}
};
$scope.data1 = [{
key: "Cumulative Return",
values: [{
"date": "01-Jun-16",
"hour": "9AM"
}, {
"date": "04-Jun-16",
"hour": "10AM"
}, {
"date": "02-Jun-16",
"hour": "2PM"
}, {
"date": "03-Jun-16",
"hour": "4PM"
}]
}]我的问题是,代码显示的是NaN而不是任何值(因此,我想我是以错误的方式解析值,但找不到更好的解决方案),您知道这里可能有什么问题吗?
发布于 2016-11-28 20:05:30
这并不是我想要的,但我设法通过把小时转换成0-24整数来解决这个问题。
x: function(d) {
return d3.time.format('%d-%m-%y')(new Date(d.date));
},
y: function(d) {
var timeParser = d3.time.format("%I%p");
var time = new Date(timeParser.parse(d.hour));
var hour = time.getHours();
return hour;
},https://stackoverflow.com/questions/40849610
复制相似问题