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

How to add JSON data to nvd3 charts

本文关键字：nvd3 添加 JSON 数据      更新时间：2023-09-26

我是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】}

与"Date"相比，"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：https://jsfiddle.net/m7oaxjue/3/

相关文章：