Highcharts多個圖表，每個使用實時數據

我有以下文件： rsrp.txt，sinr.txt，rssi.txtHighcharts多個圖表，每個使用實時數據

這樣他們每個人的方含信息：

[1433289760000,-83.5]

我想在同一頁面上使用多個圖表。

我試圖從Highcharts頁面使用示例腳本：

 var chart; // global 

    /** 
    * Request data from the server, add it to the graph and set a timeout to request again 
    */ 
    function requestData() { 
     $.ajax({ 
      url: 'rssi.txt', 
      success: function(point) { 
       var series = chart.series[0], 
        shift = series.data.length > 30; // shift if the series is longer than 20 

       // add the point 
       chart.series[0].addPoint(eval(point), true, shift); 

       // call it again after one second 
       setTimeout(requestData, 1700); 
      }, 
      cache: false 
     }); 

    } 

    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       defaultSeriesType: 'spline', 
       events: { 
        load: requestData 
       } 
      }, 
      title: { 
       text: 'RSSI' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150, 
       maxZoom: 20 * 1000 
      }, 
      yAxis: { 
       minPadding: 2.5, 
       maxPadding: 2.5, 
       title: { 
        text: 'dBm', 
        margin: 80 
       } 
      }, 
      series: [{ 
       name: 'RSSI', 
       data: [] 
      }] 
     }); 

    });

複製粘貼外的腳本和更改URL不起作用。（只有一個圖表得到更新）

如果我創建第二個requestData（）函數並複製$（document）.ready部分也不起作用。

這是可能在Highcharts？將輸入文件合併到單個文件中是不會有問題的，如果這有幫助的話。

編輯：

我想在這裏使用的答案來解決它：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Signal</title> 


    <!-- 1. Add these JavaScript inclusions in the head of your page --> 
    <script type="text/javascript" src="jquery-1.10.1.js"></script> 
    <script type="text/javascript" src="highcharts.js"></script> 

    <!-- 2. Add the JavaScript to initialize the chart on document ready --> 
    <script> 
    var chart; // global 
    var chartRsrp; 

    /** 
    * Request data from the server, add it to the graph and set a timeout to request again 
    */ 
    function requestData() { 
     $.ajax({ 
     url: 'rssi.txt', 
     success: function(point) { 
      var series = chart.series[0], 
      shift = series.data.length > 30; // shift if the series is longer than 20 

      // add the point 
      chart.series[0].addPoint(eval(point), true, shift); 

      // call it again after one second 
      setTimeout(requestData, 1700); 
     }, 
     cache: false 
     }); 
    } 

    function requestData2() { 
     $.ajax({ 
     url: 'rsrp.txt', 
     success: function(point) { 
      var series = chartRsrp.series[0], 
      shift = series.data.length > 30; // shift if the series is longer than 20 

      // add the point 
      chartRsrp.series[0].addPoint(eval(point), true, shift); 

      // call it again after one second 
      setTimeout(requestData, 1700); 
     }, 
     cache: false 
     }); 
    } 


    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'spline', 
      events: { 
      load: requestData 
      } 
     }, 
     title: { 
      text: 'RSSI' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      maxZoom: 20 * 1000 
     }, 
     yAxis: { 
      minPadding: 2.5, 
      maxPadding: 2.5, 
      title: { 
      text: 'dBm', 
      margin: 80 
      } 
     }, 
     series: [{ 
      name: 'RSSI', 
      data: [] 
     }] 
     }); 

     chartRsrp = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container2', 
      defaultSeriesType: 'spline', 
      events: { 
      load: requestData2 
      } 
     }, 
     title: { 
      text: 'RSRP' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      maxZoom: 20 * 1000 
     }, 
     yAxis: { 
      minPadding: 2.5, 
      maxPadding: 2.5, 
      title: { 
      text: 'dBm', 
      margin: 80 
      } 
     }, 
     series: [{ 
      name: 'RSRP', 
      data: [] 
     }] 
     }); 

    }); 
    </script> 

</head> 

<body> 

    <!-- 3. Add the container --> 
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 

    <div id="container2" style="width: 800px; height: 400px; margin: 0 auto"></div>

編輯2：解決了這樣的說法：

   requestData2(); 
       requestData3(); 
       requestData4(); 
       setTimeout(requestData, 1300);

第一的RequestData

（）

來源

2015-06-03 fsp

在Highcharts-land中，每個圖表都需要成爲自己的對象。這當然可能具有相同的頁面上有多個圖表，但你必須確保：

每個圖表單獨實例化（在這種情況下，如果你只是複製/粘貼$(document).ready部分，你可能踩到你的chart變量。因此，而不是一個單一的chart變量，你可以單獨設置這些（如chartRsrp = new Highcharts.Chart(...)），並一定要在你的requestData電話不同引用它們。
每個圖表呈現到不同的DOM元素，所以你可以渲染「container-rsrp」，「container-sinr」，「container-rssi」等。

希望這有助於！

來源

2015-06-03 01:14:16

謝謝，試過這個，但只有一個圖表正在獲取更新。我認爲也許一旦它運行第一個requestdata（）函數，第二個永遠不會再被調用。 – fsp

首先，每個排行榜中必須單獨實例化，所以在你的HTML，你必須有一個div每個地方的圖表將被渲染，例如圖表的ID：

<div id='chartrsrp' class="large-12 columns"></div> 
<div id='chartsinr' class="large-12 columns"></div> 
<div id='chartrssi' class="large-12 columns"></div>

接下來，從Js渲染你的圖表，你必須得到的div對象和實例化每個圖表：

var chartrsrp = $("#chartrsrp"); 
chartrsrp.highcharts({ 
    title: { 
    ... 
    }, 
    chart: { 
    ... 
});

希望這有助於！

來源

2015-06-03 09:15:19 Sapikelio

Highcharts多個圖表，每個使用實時數據

回答

相關問題