Dyanamic海圖與csv/txt輸入文件

我是新的高圖。我已經通過這個幫助門戶，我無法滿足我的要求，所以需要你幫助/指導完成這項任務。Dyanamic海圖與csv/txt輸入文件

我的任務是從csv/TXT文件讀取包含TPS詳細信息的數據，並將其顯示在動態運行圖表上（如果圖表將在一分鐘內刷新即可）。數據格式： 16：08：02,3 16：08：04,5 16：08：05,1 16：09：01,10

上述文件被附加在每個第二，將從文件中讀取最後一分鐘的數據並將其繪製在圖表上。

我已經嘗試過使用下面的代碼。不知道我錯過了什麼。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>TPS Example</title> 

     <script type="text/javascript" src="C:/Backup/SUNIL/Software/library/jquery-2.2.0.js"></script> 
     <style type="text/css"> 
${demo.css} 
     </style> 
     <script type="text/javascript"> 
$(function() { 
    $(document).ready(function() { 
     Highcharts.setOptions({ 
      global: { 
       useUTC: false 
      } 
     }); 

     $('#container').highcharts({ 
      chart: { 
       renderTo: 'container', 
       type: 'spline', 
       animation: Highcharts.svg, // don't animate in old IE 
       marginRight: 10, 
       events: { 
        load: function() { 

         // set up the updating of the chart each second 
         var series = this.series[0]; 
         setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
           y = Math.random(); 
          series.addPoint([x, y], true, true); 
         }, 1000); 
        } 
       } 
      }, 
      title: { 
       text: 'TPS Data' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150 
      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       plotLines: [{ 
        value: 3, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.series.name + '</b><br/>' + 
         Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' + 
         Highcharts.numberFormat(this.y, 2); 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      exporting: { 
       enabled: false 
      }, 


     series: [{ 
       name: 'Random data', 
       data: (function() { 
        // generate an array of random data 
        var data = [], 
         time = (new Date()).getTime(), 
         i; 

        for (i = -19; i <= 0; i += 1) { 
         data.push({ 
          x: time + i * 1000, 
          y: Math.random() 
         }); 
        } 
        return data; 
       }()) 
      }] 
     }); 
    }); 
}); 
     </script> 
    </head> 
    <body> 
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script> 
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script> 

<div id="container" style="min-width: 50px; height: 200px; margin: 0 auto"></div> 

    </body> 
</html>

來源

2016-01-26 sunil4ur_s1

你不應該載入highcharts兩次，請確保如果你的路徑是正確的和移動腳本頭部。 –

HI已經測試了一個正常工作的示例，即使我也刪除了重複行。它不工作，我也添加了下面的代碼。 $ .get（'data.csv'，function（data）{ var lines = data.split（'\ n'）; $ .each（lines，function（lineNo，line）var items = line.split （'，'）; c.push（items [0]）; d.push（parseInt（items [1]））; }）; }）; –

要使用ajax，您需要使用web服務器，因爲瀏覽器阻止來自本地系統的加載文件。 –

您的腳本文件可能有不正確的路徑。

<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script> 
<script src="C:\Backup\SUNIL\Software\library\Highcharts-4.2.1\js\highcharts.js"></script>

的代碼工作正常：http://jsfiddle.net/tmp3pty2/

來源

2016-01-26 07:20:32 Tetaxa

Dyanamic海圖與csv/txt輸入文件

回答

相關問題