顯示高分辨率csv文件數據的問題

我正嘗試使用.csv文件中的數據創建高圖line圖。但是我的網頁只顯示x和y軸的標題，但沒有數據。代碼如下：顯示高分辨率csv文件數據的問題

$(document).ready(function() { 
    var c = []; 
    var d = []; 

$.get('data.csv', function(data) {     
    alert("data in the file: " + 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: 'Weight Monitor' 
     }, 
     xAxis: { 
      title: { 
       text: 'Date Measured' 
      }, 
      categories: c 
     }, 
     yAxis: { 
      title: { 
       text: 'Weight (in Lbs)' 
      } 
     }, 
     series: [{ 
      data: d 
     }] 
}; 
var chart = new Highcharts.Chart(options); 
    });

我試圖從打印文件在屏幕上讀取的數據只是爲了檢查，如果該文件被正確讀取和我得到正確的數據，但是我的圖表沒有顯示任何東西。

以下是在我的CSV文件中的數據：

2011-08-01 00:00:00,155 
    2011-08-02 00:00:00,156 
    2011-08-03 00:00:00,157 
    2011-08-03 00:00:00,160

其中左值是在x軸上被示出的日期和右值讀取點圖形。

任何幫助將感恩。

來源

2011-08-14 Naphstor

你能解釋一下這個問題與以前的問題有什麼不同嗎？（http://stackoverflow.com/questions/7051753/problem-with-highcharts-series-option）可以保證提出一個全新的問題嗎？ –

您的代碼完美無缺。

<script type="text/javascript"> 

    $(document).ready(function() { 

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

     $.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])); 
      }); 
     }); 

     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>

拷貝整個代碼並將其保存爲目錄中的.html文件，並創建在同一個目錄中的data.csv文件和確保沒有空行，沒有空位，不需要它們，最後也沒有換行符。

然後打開.html文件，圖表應該顯示正確的數據。

來源

2011-08-15 01:33:25

-2

您必須正確閱讀文檔。請參閱http://www.highcharts.com/documentation/how-to-use#preprocessing

他們已經有csv http://highcharts.com/studies/data-from-csv.htm的演示。

請仔細閱讀文檔並熟悉一下！。

來源

2011-08-14 17:18:18

感謝您的回覆。但我完全閱讀文檔，甚至嘗試編寫演示csv文件的確切代碼，但沒有發生任何事情。所以我通過定義簡單的數組像var c，var d來改變我的代碼。但仍然不動。我不知道這是否可能是問題，因爲我使用Zend框架php – Naphstor

引用'試圖從屏幕上的文件中讀取數據以檢查文件是否被正確讀取，並且我得到了正確的數據'，所以沒有什麼Zend框架，也沒有你的PHP可以做的。你得到csv，然後你需要填充它並通過。我從來沒有使用它，但只是通過文檔，我覺得很容易被捕獲。一切都很好解釋。 –

感謝Hari。我有我的圖表工作。這是圖表問題的初始化。現在解決了。 – Naphstor

在$ .get中添加圖表。注意我們不能在Ajax回調之外創建圖表，因爲我們必須等待從服務器返回數據。見this。

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

    },'Text');

還別說明確的數據返回類型「文本」，這可能是一個問題一段時間。

來源

2014-04-22 10:44:43

顯示高分辨率csv文件數據的問題

回答

相關問題