【发布时间】:2015-09-08 09:01:33
【问题描述】:
我正在使用 Krispos angular-nvd3 来渲染折线图。出于某种原因,线条呈现在图表之外或日期错误。 x 轴是时间刻度,xDomain 的最小值和最大值是使用 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
}
}
};
我是否需要以某种方式使用范围才能正常工作,即仅在选定的开始和结束日期内呈现数据。
感谢您的意见!
【问题讨论】:
标签: nvd3.js angular-nvd3