Как добавить данные JSON в диаграммы nvd3

Question

Я новичок в Javascript и не смог найти ошибку в моем коде. Здесь я использую графики NVD3. Это график, основанный на временных рядах, с датой и ценами закрытия определенного запаса. Данные варьируются с 2005 года по настоящее время.

Вот код

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, 2558.7, 2582.8, 2603.9, 2620.1, 2602.5, 2572.8] }

Answer 1

Число элементов массива в «Закрыть» меньше по сравнению с «Датой».

Вот возможное решение, которое вы могли бы искать:

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 Fiddle: https://jsfiddle.net/m7oaxjue/3/