Javascript 如何将JSON数据添加到nvd3图表

Javascript 如何将JSON数据添加到nvd3图表,javascript,html,json,d3.js,nvd3.js,Javascript,Html,Json,D3.js,Nvd3.js,我是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})

我是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.

  })
)

//资料 { 日期:[13089130941309513096130971309813101131031310413105131081310913110] 收盘:[2419.1、2461.6、2492.7、2489.1、2500.7、2548.7、2558.7、2582.8、2603.9、2620.1、2602.5、2572.8]
}

与日期相比,Close中的数组元素数量更少

以下是您可能正在寻找的一个可能的解决方案:

    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:

您遇到了什么问题?代码没有运行。什么都没有形成。谢谢你的回答。您能告诉我如何将JSON文件中的数据添加到图表中吗。我还需要将这些日期更改为%d-%m-%Y格式。@Vishukapoor:您可以将json数据保存在一个文件中,然后在代码中访问它,也可以创建一个公开json数据的后端web服务端点。然后,您可以在应用程序中调用此api。下面是一个从文件访问json数据的示例:非常感谢Gourav。@gaura我不能从plnkr复制并粘贴代码并使用它吗?代码适用于plnkr上的不同数据集,但在我的系统上使用时不适用。您需要在本地Web服务器上运行应用程序,或使用在临时服务器上运行应用程序的IDE,例如Visual Studio、Webstorm、IntelliJ等。。这可能是一个有用的资源