Highcharts에서 JSON 데이터 가져 오기

Question

이 항목에 대한 많은 참조를 읽었지만 여전히 혼란 스럽습니다. 내 코드를 추가했습니다.

첨부 된 코드에는 두 개의 그림이 있습니다. plot_1은 페이지 내에 정의 된 데이터를 사용하고 plot_2은 동일하지만 가져온 JSON 데이터를 사용합니다. plot_1은 정상적으로 작동하며 plot_2은 작동하지 않습니다. 이 포럼에는 JSON 데이터를 가져 오는 여러 가지 버전이 많이 있습니다. 성공하지 못했지만 여러 가지를 모방하려고했습니다. 이 코드는 임베디드 시스템에서 사용하고 있습니다. 누구든지 도울 수 있다면, 나는 그것을 감사 할 것입니다.

<script> 
$(function() { 
     $('#plot_1').highcharts({ 
     chart: { 
     borderWidth: 2, 
     borderRadius: 3, 
     borderColor: '#a1a1a1', 
       type: 'line', 
     marginBottom: 30 
     }, 
     title: { 
       text: 'Battery Voltage and Current' 
     }, 
     xAxis: { 
       type: 'datetime', 
     pointStart: Date.UTC(2013, 2, 26),  // Jan = 0 
     pointInterval: 60 * 1000 * 15,  // 15 minutes 
     labels: { 
     align: 'center', 
     x: 0, 
     y: 16 
     } 
     }, 

     yAxis: [{    // Primary axis (left) 
     startOnTick: true, 
       title: { 
       text: 'Volts', 
     style: { 
      color: '#89A54E' 
     } 
       }, 
     labels: { 
     align: 'right', 
     x: -3, 
     y: 0, 
     style: { 
      color: '#89A54E' 
     } 
     }, 
     min: 6, 
     max: 16 

     },{     // Secondary axis (right) 
     opposite: true, 
     gridLineWidth: 1, 
      title: { 
       text: 'Amps', 
     style: { 
      color: '#4572A7' 
     } 
       }, 
     labels: { 
     align: 'left', 
     x: 3, 
     y: 0, 
     style: { 
      color: '#4572A7' 
     } 
     }, 
     min: -0.5, 
     max: 0.5 
    }], 

    legend: { 
     enabled: false 
    }, 

    plotOptions: { 
     series : { 
     marker: { 
      enabled: false 
     } 
     } 
    }, 

     series: [{ 
      name: 'Volt', 
     color: '#89A54E', 
       data: [12.4, 12.4, 12.4, 12.2, 12.0, 11.9, 11.9, 11.8, 11.6, 11.4, 11.1, 10.9,  11.4,  11.5,  11.7,  11.9,  12.2,  12.4,  12.4,  12.4] 
     }, { 
       name: 'Amp', 
     color: '#4572A7', 
     yAxis: 1, 
       data: [-0.1, -0.2, -0.1, -0.2, -0.3, -0.3, -0.4, -0.3, -0.4, -0.4, -0.3, -0.3, 0.3, 0.3, 0.4, 0.5, 0.4, 0.4, 0.4, 0.1] 
     }] 
     }); 
}); 
    </script> 


    <script> 
$(function() { 

    var data1 = [], data2 = []; 

    function requestData1() { 
     $.ajax({ 
      url: "sig0.jsn", 
      dataType: "json", 
      success: function(data1) { 
       alert (data1); 
       this.series[0].setData(data1); 
      }, 
      cache: false 
     }); 
    } 

    function requestData2() { 
     $.ajax({ 
      url: "sig2.jsn", 
      dataType: "json", 
      success: function(data2) { 
       alert (data2); 
       this.series[0].setData(data2); 
      }, 
      cache: false 
     }); 
    } 


     $('#plot_2').highcharts({ 
     chart: { 
     borderWidth: 2, 
     borderRadius: 3, 
     borderColor: '#a1a1a1', 
       type: 'line', 
     marginBottom: 30, 
     events: { 
     load: requestData1, 
     load: requestData2 
     } 
     }, 
     title: { 
       text: 'Received Signal Strength' 
     }, 
     xAxis: { 
       type: 'datetime', 
     pointStart: Date.UTC(2013, 2, 26),  
     pointInterval: 60 * 1000 * 15, 
     labels: { 
     align: 'center', 
     x: 0, 
     y: 16 
     } 
     }, 

     yAxis: {    // Primary axis (left) 
     startOnTick: true, 
       title: { 
       text: 'Strength (db)' 
       }, 
     labels: { 
     align: 'right', 
     x: -3, 
     y: 0 

     }, 
     min: -40, 
     max: 0 

    }, 

    legend: { 
     align: 'left', 
     verticalAlign: 'top', 
     floating: true, 
     x: 50, 
     y: 45 
    }, 

    plotOptions: { 
     series : { 
     marker: { 
      enabled: false 
     } 
     } 
    }, 

     series: [{ 
      name: 'Device A', 
     color: '#89A54E', 
       data: data1 
     },{ 
      name: 'Device B', 
     color: '#4572A7', 
       data: data2 
     }] 

     }); 

}); 
    </script> 

JSON 파일 데이터가 이와 유사합니다. 내가 데이터 기록에 약간의 시간 간격을 놓칠 가능성이 있기 때문에 내가 y 축 데이터와 결합 x 축 시간 데이터를 가지고, 그래서 당신이있는 것을 고려하시기 바랍니다 수 있다면 결국

{ 
"data" : [-25, -23, -15, -16, -26, -24, -26, -28, 29, -16, -22, -24, -22, -17, -21, -25, -21, -22, -23, -22] 
} 

대답. 전반적으로 나는 4 개의 센서로부터 데이터를 플로팅하고 싶다.

Answer 1

ajax와 highcharts 정의가 "같은 시간에"실행되기 때문에 차트를 inilazize로 이동해야합니다. 그 결과

은해야 것 같습니다 :

$.ajax({ 
     url: "sig2.jsn", 
     dataType: "json", 
     success: function(data2) { 
      alert (data2); 
      this.series[0].setData(data2); 
      $('#plot_2').highcharts({ 
          //parameters 
      }); 
     }, 
     cache: false 
    });