在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文件數據loks是這樣的。

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

最後，我將與y軸數據配對的x軸的時間數據，因爲它很可能我會懷念在數據記錄一段時間間隔，因此，如果您是否能在該回答。總的來說，我想繪製來自4個傳感器的數據。

Answer 1

你應該在ajax調用中移動圖表inilazize，因爲在你的情況下，ajax和highcharts的定義是在「同一時間」運行的。

結果是應該的樣子：

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