nvd3没有绘制正确数据的折线图

我目前正在尝试渲染流星JS中的nvd3折线图。我正在运行Meteor 1.1.0.3并在1.7.1版本上运行nvd3软件包。nvd3没有绘制正确数据的折线图

使用nvd3上的例子：http://nvd3.org/examples/line.html，我得到了下面的代码。但是，即使正确地遵循示例，图表也会绘制，但日期均为12/31/1969，y轴会生成-1,0和1值。见所附的图像：

谁能告诉我什么，我在这里失踪？

nv.addGraph(function() { 
    var chart = nv.models.lineChart() 
     .margin({ left: 25 }) 
     .showLegend(true) 
     .showXAxis(true) 
     .showYAxis(true); 

    chart.xAxis 
     .axisLabel('Date') 
     .tickFormat(function(d) { 
      return d3.time.format('%x')(new Date(d)); 
     }); 

    chart.yAxis 
     .axisLabel('Data') 
     .tickFormat(d3.format('d')); 

    d3.select('#data-chart svg').datum(formattedData).call(chart); 

    nv.utils.windowResize(chart.update); 

    return chart; 
}); 

formattedData = [ 
{ 
    key: 'Data', //key - the name of the series. 
    values: [{ date: 1439963723311, total: 3}, { date: 1441283002275, total: 1}, { date: 1441194849210, total: 2}], //values - represents the array of {x,y} data points 
    color: '#ff0000' //color - optional: choose your own line color. 
} 
];

来源

2015-09-04 mayvn

你需要告诉D3如何访问数据是什么x和什么为y。

（在NVD3网站上的例子已经有键为“X”和“Y”）

尝试添加访问函数：

var chart = nv.models.lineChart() 
     .x(function (d) { return d.date }) 
     .y(function (d) { return d.total })

，如果你想确保在y轴从0开始，包括

 .forceY([0]);

此外，您需要确保事先对数据进行排序（最后两项失效）。

一个活生生的例子见本普拉克： http://plnkr.co/edit/QjcEXIIQ5aIhuFhpRwsj?p=preview

来源

2015-09-07 05:43:33 Lucas

完美！我也尝试了一种不同的方式，我用“x”和“全部”将“date”完全替换为“y”，并且它工作正常。最后一个问题 - 你如何格式化刻度，所以它是每个刻度的一个日期？现在它的渲染间隔为2天（“8/19/15 - 8/21/15”等）。再次感谢。 – mayvn

看看这个答案：http://stackoverflow.com/questions/29967173/how-to-make-xaxis-hourly-tickslike-0-1-2-23-in-stackedarechart-use-nvd3-js/30066232# 30066232 – Lucas

@Lucus这将是一个足够的答案，但日期的格式只填充到数据数组中，如果其相应的“总计”键中的值不为0。这意味着如果2015年7月9日共有3件，2015年9月8日有3件，2015年9月9日有2件，则会跳过9/8并仅填充图表上的其他2件。有没有一种JS/nvs3方式来填充默认值为0的缺失日期？ – mayvn

nvd3没有绘制正确数据的折线图

回答

相关问题