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沒有繪製正確數據的折線圖

回答

相關問題