Highcharts閱讀文本文件

Question

我是JavaScript和HighCharts的新手。我相信這是一個非常簡單的問題，但我迷路了。 我想創建一個三行散點圖。我需要從一個文本文件中讀取數據，並將該文件看起來像這樣：

x y1 y2 y3   

1.02 1.00 6.70 8.19
2.04 1.00 13.30 8.19
3.06 1.00 13.50 8.19
4.08 1.00 9.60 8.19
5.10 1.00 14.60 8.19
6.12 1.00 19.20 8.57

所以我需要繪製三行w^ITH（x和Y1），（X和Y 2），（x和Y3）

這是我HighCharts代碼：

  <script type="text/javascript"> 

      $(document).ready(function() { 
       var chart1 = new Highcharts.Chart(options); 
      }); 

      var options = { 
      chart: { 
        renderTo: 'container', 
       type: 'scatter',    
        zoomType: 'xy' 
       }, 
      title: { 
        text: 'Demo' 
       }, 
      xAxis: { 
       title: { 
      enabled: true, 
      text: 'Time, ns' 
      }, 
     startOnTick: true, 
     endOnTick: true, 
     showLastLabel: true 
       }, 
      yAxis: { 
       title: { 
      text: 'Value' 
      } 
       }, 
       series: [] 
      }; 

      $.get('///plot.txt', function(data) { 
       var lines = data.toString().split('\n'); 
       $.each(lines, function(lineNo, line) { 
        var item = line.split()}); 
      options.series[0].data[0].push(parseFloat(item[0])); 
      options.series[0].data[1].push(parseFloat(item[1])); 

    options.series[1].data[0].push(parseFloat(item[0])); 
       options.series[1].data[1].push(parseFloat(item[2])); 

       options.series[2].data[0].push(parseFloat(item[0])); 
       options.series[2].data[1].push(parseFloat(item[3])); 

      }, 'text') 

      var chart1 = new Highcharts.Chart(options); 

      </script> 

我覺得我搞砸了整個代碼。抱歉，我從未寫過JavaScript。任何幫助將非常感激。先謝謝你。

Answer 1

這就是你想要得到什麼：http://jsfiddle.net/z28vy/

現在幾點意見

讀取DOC

你必須看看HighChart文檔那是相當不錯的，對的jsfiddle活生生的例子。有些與您的使用案例非常接近（顯示的數據來自通過AJAX調用獲得的數據）。

您需要什麼特別的是獲取原始文本數據，這會迫使您變成惱人的解析東西。

瞭解你在做什麼

即使你的代碼最終會工作，它看起來像你搞亂了一下與你的JavaScript的同步/異步故事。如果你是一個初學者，那麼一次就要學習很多東西。更不用說你試圖堅持使用匿名函數的jQuery風格......

縮進！

首先，我不知道它是否僅僅是您在這裏的帖子，或者如果您真的編寫了這樣的代碼，但正確縮進它！它會一目瞭然地告訴你很多問題。尤其是當你正在編寫封閉代碼

陣列

然後，只是有點邏輯（例如你的Ajax調用成功回調函數。）：你必須知道的是，雖然動態，陣列中的javascript不能在任何未分配的插槽上進行隨機訪問（讀取或寫入）。所以當你在做

options.series[0].data[0].push(parseFloat(item[0])); 

你應該有以前設置的選項。系列[0]你沒有，因爲你的選擇對象定義系列作爲一個空數組：那你阿賈克斯成功方法時，或在靜態定義的選項，這取決於靈活性

series: [] 

你可以做你需要在你的使用系列的數量。我更喜歡你留在第一個簡單的和做的事：

series: [{ 
      name: 'Serie 1', 
      data: [] 
     },{ 
      name: 'Serie 2', 
      data: [] 
     },{ 
      name: 'Serie 3', 
      data: [] 
     }] 

就像你可以訪問每個3系列像你這樣......好吧，除了你有數據同樣的問題[0]不存在這也不是出於同樣的原因。因爲...

首先使用API​​，因爲它去

你加點，你的一系列的方式太複雜反正反正不打擾了。系列有一個addPoint（）方法，只需使用它！因此，而不是

options.series[0].data[0].push(parseFloat(item[0])); 
options.series[0].data[1].push(parseFloat(item[1])); 

只是做

options.series[0].addPoint([parseFloat(item[0]), parseFloat(item[1])]); 

它已經更容易閱讀:)

jQuery是沒那麼神奇，它只是邏輯

現在的問題你有是你使用jquery $ .each（）我不知道你是否不明白它，或者如果你開始使用它，然後決定硬編寫你的數據h繼續前進。

$.each(lines, function(lineNo, line) { 
    var item = line.split()}); 
options.series[0].data[0].push(parseFloat(item[0])); 
options.series[0].data[1].push(parseFloat(item[1])); 

正如你將清楚地看到，如果你開始縮進和分開的東西，你沒有什麼比在每一行都沒有目的的分開。

只需使用您的拆分即可獲得。如果我們說我們把目前的serie號碼放在serieIdx中：

$.each(lines, function(lineNo, line) { 
    var item = line.split(' '); 
    if(item.length==4 && !isNaN(parseFloat(item[0]))) { // skip unwanted line such as header or empty line 
     chart1.series[serieIdx].addPoint([parseFloat(item[0]), parseFloat(item[serieIdx+1])], false); 
    } 
}); 

就是這樣。你只需要遍歷你的3個系列，你就可以走了。

在HighCharts一個側面說明關於意甲addPoint

要小心，如果你打電話addPoint無效數據（如東西而不是數字數組）沒有明顯的錯誤引發，但它打破無論如何。就我而言，在我加入試驗

if(item.length==4... 

而且因爲我也有過在最後一行的末尾第一個「\ n」，上層分裂給了我最後一個空字符串，這顯然結束了作爲內部拆分後的空項目數組。它觸發了一個addPoint（[NaN，NaN]），純粹使點之間的界線在整個圖中消失。小心點！

關於的jsfiddle樣品

的jsfiddle顯然不允許AJAX，但還是提供，而不是一招：POST數據在的jsfiddle給定延遲後服務器將重新發送回在回答一個JSON（在我的例子中，我放3秒。）

http://jsfiddle.net/z28vy/

Answer 2

我沒有看過以前的答案，因爲已經很長了，但是我總是建議從Highcharts閱讀教程：http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json