nvd3日期 - 數據線圖表故障

我在D3和nvd3中是相當新的。我正在嘗試繪製日期軸和數據軸的圖形 - https://jsfiddle.net/sujit77/7ns2g4a1/6/。nvd3日期 - 數據線圖表故障

var dataValue = [{'key':'Line', 'values':[{"key":"2016-04-04 0:0:0","value":1},{"key":"2016-04-05 0:0:0","value":1},{"key":"2016-04-07 0:0:0","value":1},{"key":"2016-04-08 0:0:0","value":1},{"key":"2016-04-11 0:0:0","value":1},{"key":"2016-04-13 0:0:0","value":1},{"key":"2016-04-14 0:0:0","value":0.5},{"key":"2016-04-19 0:0:0","value":1},{"key":"2016-04-20 0:0:0","value":1},{"key":"2016-04-22 0:0:0","value":1},{"key":"2016-04-25 0:0:0","value":1},{"key":"2016-04-26 0:0:0","value":1},{"key":"2016-04-27 0:0:0","value":1},{"key":"2016-04-28 0:0:0","value":1},{"key":"2016-04-29 0:0:0","value":1},{"key":"2016-05-03 0:0:0","value":1},{"key":"2016-05-04 0:0:0","value":0},{"key":"2016-05-06 0:0:0","value":1},{"key":"2016-05-09 0:0:0","value":1},{"key":"2016-05-10 0:0:0","value":1},{"key":"2016-05-11 0:0:0","value":1},{"key":"2016-05-12 0:0:0","value":1},{"key":"2016-05-13 0:0:0","value":1},{"key":"2016-05-16 0:0:0","value":1},{"key":"2016-05-17 0:0:0","value":1},{"key":"2016-05-19 0:0:0","value":1},{"key":"2016-05-24 0:0:0","value":0},{"key":"2016-05-25 0:0:0","value":0.5},{"key":"2016-05-26 0:0:0","value":1}]}]; 

nv.addGraph(function() { 
    var chart = nv.models.lineWithFocusChart() 
    //.showControls(false) 
    //.showMaxMin(false); 
    .x(function(d) {return d3.time.format("%Y-%m-%d %H:%M:%S").parse(d['key']);}) 

    var format = d3.time.format("%m %d %Y"); 

    chart.yAxis 
    .tickFormat(d3.format(',.2f')); 

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

    d3.select('#line-charts').append('svg') 
    .attr('height', 250) 
    .attr('width', 400) 
    .datum(dataValue) 
    .call(chart); 

    nv.utils.windowResize(chart.update); 
    return chart; 
});

我不能繪製應該使用示例數據生成的圖形。我得到瀏覽器的控制檯窗口下面的錯誤 -

Error: attribute transform: Trailing garbage, "translate(0,NaN)".

隨着我試圖隱藏使用「.showControls（假）」和」 .showMaxMin在X軸底部的規模和最小最大值（假）」。但那些不起作用。

來源

2017-05-29 Sujit Kumar Singh

你忘了做y訪問器。

做這樣的事情： chart.y(function (d) { return d.value; });

來源

2017-05-29 23:30:12 jeznag

謝謝您的回答。我還發現我可以通過使用「.lineChart（）」而不是使用「.lineWithFocusChart（）」來刪除底部的「nv-context」（第二個底部圖）。 –

nvd3日期 - 數據線圖表故障

回答

相關問題