如何將JSON數據添加到nvd3圖表

我是JavaScript新手，無法在代碼中發現錯誤。我在這裏使用NVD3圖表。它是基於時間序列的圖表，包含特定股票的日期和收盤價。數據範圍從2005年到現在。如何將JSON數據添加到nvd3圖表

下面是代碼

var data= JSON.parse("Data.JSON") 

nv.addGraph(function() { 
var chart = nv.models.lineChart() 
       .margin({top: 70, right: 70, bottom: 70, left: 70}) 
       .useInteractiveGuideline(true) 
       .transitionDuration(100) 
       .showYAxis(true) 
       .showXAxis(true) 
; 
//Chart x-axis settings 
chart.xAxis 
    .axisLabel('date') 
    .tickFormat(function(d) {return new Date((data.Date - (25567 + 1))*86400*1000); 

chart.yAxis  //Chart y-axis settings 
    .axisLabel('close') 
    .tickFormat(d3.scale.linear(data.Close)); 




d3.select('#Charts svg') //Selecting the <svg> element where i want to render the chart in. 
    .datum(data)   //Populating the <svg> element with chart data... 
    .call(chart);   //Finally, rendering the chart! 

//Update the chart when window resizes. 

    })

;

//數據 { 「日期」：[13089，13094，13095，13096，13097，13098，13101，13103，13104，13105，13108，13109，13110] 「關閉」：[2419.1，2461.6 ，2492.7,2489.1,2500.7,2548.7,2588.7,2582.8,2603.9,2620.1,2602.5,2572.8] }

來源

2015-11-03 Vishu kapoor

什麼是您所遇到的問題？ –

代碼未運行。什麼都沒有形成。 –

「關閉」中的數組元素的數量與「日期」相比較少。

這裏，你可能會尋找一個可能的解決方案：

nv.addGraph(function() { 
    var chart = nv.models.lineChart(); 

    chart.xAxis.axisLabel('date') 
     .tickFormat(d3.format('')); 

    chart.yAxis.axisLabel('close') 
     .tickFormat(d3.format('')); 

    d3.select('#dateChart') 
     .datum(chartData()) 
     .transition().duration(500) 
     .call(chart); 

    nv.utils.windowResize(function() { 
     d3.select('#dateChart').call(chart) 
    }); 

    return chart; 
}); 


function chartData() { 
    var myData = { 
     "Date": [13089, 13094, 13095, 13096, 13097, 13098, 13101, 13103, 13104, 13105, 13108, 13109, 13110], 
     "Close": [2419.1, 2461.6, 2492.7, 2489.1, 2500.7, 2548.7, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8, 2588.8] 
     //The number of array elements in Close were less compared to Date. Hence added 2588.8 as the last element 
    }; 

    var result = []; 
    for (var i = 0; i < myData.Date.length; i++) { 
     result.push({ 
      x: myData.Date[i], 
      y: myData.Close[i] 
     }); 
    } 

    return [{ 
     values: result, 
     key: 'Date Chart', 
     color: '#ff7f0e' 
    }]; 
}

JS小提琴：https://jsfiddle.net/m7oaxjue/3/

來源

2015-11-03 22:34:47

感謝您的回答。你能告訴我如何添加我的數據，這是在JSON文件的圖表。另外我需要將這些日期更改爲％d-％m-％Y格式。 –

@Vishukapoor：您可以將您的json數據保存在一個文件中，然後在您的代碼中訪問它，或者您可以創建一個公開json數據的後端web服務端點。然後你可以在你的應用程序中調用這個API。以下是從文件訪問json數據的示例：http://plnkr.co/edit/PTiH0GqfknsZG6gtNhnU?p=preview –

非常感謝Gourav。 –

如何將JSON數據添加到nvd3圖表

回答

相關問題