Question

我正在尝试使用nvd3.js加载两个及时相关的数据行来创建一个实线图。但是，我在从JSON文件加载两行加上时间时遇到问题。 HTML页面上显示的所有内容都是“无数据可用”。

JS：

d3.json('temp.json', function(data) {
    nv.addGraph(function() {
        var chart = nv.models.lineChart().margin({
            right: 100
        })
        //Chart x-axis settings
        chart.xAxis.tickFormat(function(d) {
            return d3.time.format('%d %b %Y %H Z')(data[0]);
        });
        chart.yAxis //Chart y-axis settings
        .axisLabel('°F').tickFormat(d3.format('1f'));
        var d = [{
            values: data[1],
            key: "Temperature",
            color: "#FF0000"
        }, {
            values: data[2],
            key: "Dew Point",
            color: "#33CC33"
        }];
        d3.select('#chart svg').datum(d).call(chart);
        nv.utils.windowResize(chart.update);
        return chart;
    });
});

JSON：

[
  {
    "Valid Time":"4/5/14 12:00",
    "Temperature":55,
    "Dew Point":35
  },
  {
    "Valid Time":"4/5/14 13:00",
    "Temperature":53,
    "Dew Point":33
  },
  {
    "Valid Time":"4/5/14 14:00",
    "Temperature":53,
    "Dew Point":34
  },
  {
    "Valid Time":"4/5/14 15:00",
    "Temperature":53,
    "Dew Point":36
  },
  {
    "Valid Time":"4/5/14 16:00",
    "Temperature":57,
    "Dew Point":39
  },
  {
    "Valid Time":"4/5/14 17:00",
    "Temperature":60,
    "Dew Point":38
  },
  {
    "Valid Time":"4/5/14 18:00",
    "Temperature":64,
    "Dew Point":34
  },
  {
    "Valid Time":"4/5/14 19:00",
    "Temperature":68,
    "Dew Point":33
  },
  {
    "Valid Time":"4/5/14 20:00",
    "Temperature":71,
    "Dew Point":29
  },
  {
    "Valid Time":"4/5/14 21:00",
    "Temperature":73,
    "Dew Point":25
  },
  {
    "Valid Time":"4/5/14 22:00",
    "Temperature":74,
    "Dew Point":23
  },
  {
    "Valid Time":"4/5/14 23:00",
    "Temperature":75,
    "Dew Point":23
  },
  {
    "Valid Time":"4/6/14 0:00",
    "Temperature":75,
    "Dew Point":23
  }
]

Answer 1

在.json文件中使用没有空格的关键字。将关键字更改为有效时间和露点。然后使用以下代码

$(document).ready(function(){

var chart;
    var width = 500, height = 200;


    var data1 = [ {
        key : "temperature",
        values : []
    }, {
        key : "Dewpoint",
        values : []
    } ];

    nv.addGraph(function() {
        chart = nv.models.lineChart()
                .useInteractiveGuideline(true)
                .showLegend(true)
                .showYAxis(true)
                .showXAxis(true)
                .margin({
                    right : 90
                })
                .x(function(d) {

                    return d.validtime;
                });




        chart.xAxis.tickFormat(function(d) {
        return d3.time.format('%d %b %Y %H Z');
    });
        chart.yAxis //Chart y-axis settings
    .axisLabel('°F').tickFormat(d3.format('1f'));

        d3.select('#chart svg')
        .datum(data1)
        .transition()
        .duration(500) 
        .call(chart);

        nv.utils.windowResize(chart.update);


        return chart;
    });
    var A, B, C;
     setInterval(function() { 
    d3.json("temp.json", function(data) {

    console.log(data_str); 
    for(i=0;i<data_str.length;i++)
    { 


        A = (data_str[i].temperature);
        B = (data_str[i].Dewpoint);
        C = (data_str[i].validtime);
        console.log(data.temperature);




        data1[0].values.push({
            x : C,
            y : A 
        });

        data1[1].values.push({
            x : C,
            y : B
        });





        }   
    chart.update();
            });


});

 });

NVD3.js从JSON加载行数据

1 个答案: