このドキュメントでは、次の問題に対処します。
1.読み取りtxtファイル
テキストファイルからデータを読み込むための1.1
1.2配列にテキストファイル内のデータが読み出され、リストとして出力します
出力ブロックに警告するために、テキストファイルから読み込む1.3データ
出力ブロックを警告するデータおよびステータスを読み込むためのテキストファイルから1.4
2.読むCSVファイル
2.1 表オブジェクトおよび出力としてテキストファイルに読み込まれたデータ
第二に、XMLデータの使用
3.読むX- MLのファイルを
3.1 XMLデータのインポート
4. XSLTスタイルデザイン
4.1 XMLデータのインポートと変換、およびXSLTスタイルデザインの使用
第三に、JSONデータの使用
5. JSONファイルを読みます
5.1直接アクセスJSON値
アクセスに5.2 JSON.parse()メソッド
アクセスに5.3 $ .getJSON()メソッド
5.4 JSONキャンバスデータをグラフ化
仕事のデータの可視化大部分は、既存のデータのレンダリングを必要とします。プレーンテキスト、CSV、XML、JSONや他の形式の - - データは、多くの異なる形式で保存することができるがあればデジタル形式は、JavaScript、または他のサーバ側のルーチンと、表示のためにこの情報にアクセスすることができます。もちろん、いくつかのケースでは、例えば、複雑なグラフを構築するには、データの手動処理が必要になります。ただし、可能な場合は、コンテンツ(データ)とディスプレイ(チャート)分離が良い考えです。
1.テキストファイルを読みます
sample.txtの中
行1
行2
行3
行4
1.1は、テキストファイルからデータを読み込んでread_text.htmlします
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>从文本文件中读取数据</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <h1>Get data from text file</h1> <div> <p id="fileData"></p> </div> </body> <script> $(document).ready(function() { //$.get()是jQuery.get(),参考文档 https://api.jquery.com/jquery.get/ $.get('sample.txt', function(theData) { $('#fileData').html(theData.replace(/\n/g, '<br>')); }); }); </script> </html>
运行结果
1.2 将文本文件中的数据读入数组,并作为列表输出,read_text_into_list.html中,
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Read Data from Text File into Array and Output as List</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <h1>Put data from text file into array and output as list</h1> <div> <ul id="fileData"> </ul> </div> </body> <script> $(document).ready(function() { $.get('sample.txt', function(theData) { theItems = theData.split('\n'); var theList = ''; var theListItem; for(i = 0; i < theItems.length; i++) { theListItem = '<li>' + theItems[i] + '</li>'; theList = theList + theListItem; }; $('#fileData').html(theList); }); }); </script> </html>
运行结果:
1.3 从文本文件中的读取数据,以警告框输出,alert_data.html中,
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Alert Data from Text File</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <h1>Alert data from text file</h1> <div> <p id="fileData"></p> </div> </body> <script> $(document).ready(function() { jQuery.get('sample.txt', function(theData) { alert(theData); }); }); </script> </html>
运行结果:
1.4从文本文件中的读取数据和状态,以警告框输出,alert_data_status.html中,
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Alert Data and Status from Text File</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <h1>Alert data and status from text file</h1> <div> <p id="fileData"></p> </div> </body> <script> $(document).ready(function() { jQuery.get('sample.txt', function(theData, theStatus) { alert(theData + "\nStatus: " + theStatus); }); }); </script> </html>
运行结果:
2.读取CSV文件
尽管我们可存储和获取文本文件中简单的非结构化数据,但更常见的是使用CSV文件。
CSV文件的数据格式通常为:每行是一条记录,每条记录又可以包含许多列。每个数据列中的值通常有逗号分开。
stores.csv中,
文本编辑器打开
exce编辑器打开
2.1 将文本文件中的数据读入对象并作为表输出,read_csv_into_array.html中
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Read Data from Text File into Objects and Output as Table</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <!--引入jquery-csv库,其中包括各种解析CSV文件以及设置分隔符等的方法 --> <script src="https://cdn.bootcss.com/jquery-csv/1.0.4/jquery.csv.min.js"></script> <body> <h1>Pull data from CSV file into an object and output as table</h1> <div class="result"> <table id="theResult" border="1"></table> </div> </body> <script> $(document).ready(function() { //使用$.get()方法导入和解析CSV文件 $.get('stores.csv', function(theData) { //$.csv.toObjects()将CSV数据转换为一个名为data的对象 var data = $.csv.toObjects(theData); var theHtml = createTable(data); $('#theResult').html(theHtml); }); }); //自定义函数createTable(data),将遍历数据的第一行泪提取csv的列名,并将它们输出到表中 function createTable(data) { var html = ''; if(data[0].constructor === Object) { html += '<tr>\r\n'; for(var item in data[0]) { html += '<th>' + item + '</th>\r\n'; } html += '</tr>\r\n'; for(var row in data) { html += '<tr>\r\n'; for(var item in data[row]) { html += '<td>' + data[row][item] + '</td>\r\n'; } html += '</tr>\r\n'; } } return html; } </script> </html>
运行结果:
正文结束~~~