【问题标题】:Angular-nvd3 linechart with lines rendered outside chartAngular-nvd3 折线图,线条呈现在图表之外
【发布时间】: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 开始.如下图:

这些是使用的基本图表选项。 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 } } };

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

感谢您的意见!

【问题讨论】:

    标签: nvd3.js angular-nvd3


    【解决方案1】:

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

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

    日期刻度使用xDomain设置:

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

    【讨论】:

      猜你喜欢
      • 2016-04-05
      • 2015-12-05
      • 1970-01-01
      • 1970-01-01
      • 2015-09-17
      • 2021-09-02
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多