1

我正在使用 Krispos angular-nvd3来渲染折线图。出于某种原因,线条呈现在图表之外或日期错误。xDomainx 轴是时间刻度,使用 datepicker 设置的最小值和最大值。

设置xDomain图表时,使用选定的开始日期和结束日期作为 x 轴的最小值和最大值来呈现图表。但是,由于数据集的最短日期出现在所选开始日期之前,因此这些线条会在时间间隔之外呈现。在此示例中,选择的开始日期为2015-08-08,结束日期为2015-11-08

带有在图表外部呈现的线条的图像

如果我使用forceX而不是xDomain设置最小值和最大值,则线条将在图表网格中呈现。但在这种情况下,数据集的最小日期在所选开始日期之前,因此 x 轴从2015-07-07而不是2015-08-08开始。如下图所示:

在此处输入图像描述

这些是使用的基本图表选项。xDomainforceX动态设置。

$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 } } };

我是否需要以某种方式使用范围才能正常工作,即仅在选定的开始和结束日期内呈现数据。

感谢您的意见!

4

1 回答 1

2

这个问题的解决方案是使用图表选项clamp(),在这种情况下:

xScale: d3.time.scale().clamp(true)

日期刻度使用xDomain

xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()]

在此处输入图像描述

于 2015-09-08T09:42:33.837 回答