讀一個CSV與Highchart

我掙扎輸出線圖從我的CSV文件，我得到的圖形，但不能在圖形數據，可能有人請告訴我什麼是錯用下面的代碼？讀一個CSV與Highchart

在CSV的數據格式，像這樣：

26-04-2012 09:10,0 
26-04-2012 09:20,0 
26-04-2012 09:30,0 
26-04-2012 09:40,0 
26-04-2012 09:50,0 
26-04-2012 10:00,1 
26-04-2012 10:10,1

HTML代碼：

<!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>Test</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <script src="../../js/highcharts.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 

     var c = []; 
     var d = []; 

     $.get('test.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])); 
      }); 
     }); 
     var options = { 
       chart: { 
        renderTo: 'chart', 
        defaultSeriesType: 'line' 
       }, 
       title: { 
        text: 'reading' 
       }, 
       xAxis: { 
        title: { 
         text: 'Date Measurement' 
        }, 
        categories: c 
       }, 
       yAxis: { 
        title: { 
         text: 'reading' 
        } 
       }, 
       series: [{ 
        data: d 
       }] 
     }; 

     var chart = new Highcharts.Chart(options); 

    }); 
</script> 
    </head> 
    <body> 
     <div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

來源

2012-04-26 Darren Goulden

的問題是，$.get調用將立即返回，因此，您將創建圖表在下載test.csv之前（根本不包含任何數據）。當文件被下載，以便放置圖的創建將有解決問題

，你傳遞給$.get回調函數就會運行。

來源

2012-04-30 06:45:49 eolsson

圖表裝載有沒有數據，因爲CSV文件圖表後加載，因爲get請求需要時間來接收響應。以下將加載文件中的數據並在文件加載後顯示圖表。

<!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>Test</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <script src="../../js/highcharts.js" type="text/javascript"></script> 
<script type="text/javascript"> 

    $(document).ready(function() { 

     var c = []; 
     var d = []; 
     var options = { 
       chart: { 
        renderTo: 'chart', 
        defaultSeriesType: 'line' 
       }, 
       title: { 
        text: 'reading' 
       }, 
       xAxis: { 
        title: { 
         text: 'Date Measurement' 
        }, 
        categories: c 
       }, 
       yAxis: { 
        title: { 
         text: 'reading' 
        } 
       }, 
       series: [{ 
        data: d 
       }] 
     }; 

     var jqxhr = $.get('test.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])); 
      }) 
      var chart = new Highcharts.Chart(options); 

     }); 
    }); 
</script> 
    </head> 
    <body> 
     <div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div> 
    </body> 
</html>

來源

2012-04-30 07:18:31 TonsOfFun111

讀一個CSV與Highchart

回答

相關問題