我正在使用 Krispos angular-nvd3来渲染折线图。出于某种原因,线条呈现在图表之外或日期错误。xDomain
x 轴是时间刻度,使用 datepicker 设置的最小值和最大值。
设置xDomain
图表时,使用选定的开始日期和结束日期作为 x 轴的最小值和最大值来呈现图表。但是,由于数据集的最短日期出现在所选开始日期之前,因此这些线条会在时间间隔之外呈现。在此示例中,选择的开始日期为2015-08-08,结束日期为2015-11-08:
如果我使用forceX
而不是xDomain
设置最小值和最大值,则线条将在图表网格中呈现。但在这种情况下,数据集的最小日期在所选开始日期之前,因此 x 轴从2015-07-07而不是2015-08-08开始。如下图所示:
这些是使用的基本图表选项。xDomain
或forceX
动态设置。
$scope.chartOptions = {
chart: {
type: 'lineChart',
yDomain: [0,5],
xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()],
useInteractiveGuideline: true,
interactiveLayer: {
showGuideLine: true
},
lines: {
},
xScale: d3.time.scale(),
xAxis: {
showMaxMin: true,
rotateLabels: -45,
tickFormat: function(d) {
return d3.time.format('%Y-%m-%d')(new Date(d));
}
},
height: 350,
margin : {
bottom: 100
}
}
};
我是否需要以某种方式使用范围才能正常工作,即仅在选定的开始和结束日期内呈现数据。
感谢您的意见!