NVD3.js JSON에서 라인 데이터로드

nvd3.js를 사용하여 채워진 선 그림을 만드는 데 시간적으로 관련된 두 개의 데이터 라인을로드하려고합니다. 그러나 JSON 파일에서 두 줄을 더한 시간과 함께로드하는 데 문제가 있습니다. HTML 페이지에 표시된 것은 모두 "데이터 없음"입니다.NVD3.js JSON에서 라인 데이터로드

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 : .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 
    } 
]

출처

2014-04-05 Chad H

파일이 있는지 확인 했습니까? 디버그 콘솔에 오류 메시지가 표시됩니까? –

파일이 있습니다. F12에 304가 표시됩니다. 콘솔에서 말하는 "total 11"은 nv.d3.min.js : 1 –

입니까? 예상되는 형식은 키 : "온도", 값 : 64,68,71,73 등이지만 데이터 [0]과 데이터 [1]은이를 반환하지 않습니다. 옳은? – patb23

키워드를 사용. 키워드를 으로 변경하십시오. 유효 시간 및 이슬점. 다음 코드를 사용하십시오

$(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(); 
      }); 


}); 

});

출처

2017-05-03 10:03:35

NVD3.js JSON에서 라인 데이터로드

답변

관련 문제