集成现有数据——从标准文本文件中读取数据

相关文章推荐

博学的上铺 · 始皇陵挖出金駱駝證實秦與西亞經濟往來｜ ...· 3 月前 ·

怕老婆的卤蛋 · Statistical Basis for ...· 3 月前 ·

追风的小虾米 · 上外新闻| ...· 9 月前 ·

面冷心慈的花卷 · 四所知名英国皇家音乐学院，RNCM、RAM、 ...· 1 年前 ·

苦闷的弓箭 · 童建明任最高检党组副书记、分管日常工作的副检 ...· 2 年前 ·

数据可视化工作最大的一部分工作涉及的是渲染现有数据。数据可以被存储为许多不同的格式——普通文本，CSV、XML、JSON和其他格式——但只要是数字格式，JavaScript或其他服务器端例程就与可能访问该信息用于展示。当然在某些情况下，例如构建复杂的图表时，会要求你手动处理数据。不过，在可能的情况下，将内容（数据）和显示（图表）分离是一个好主意。

1.读取文本文件

sample.txt中

Line one
Line two
Line three
Line four

1.1 从文本文件中读取数据，read_text.html中，

<!doctype html>
        <meta charset="UTF-8">
        <title>从文本文件中读取数据</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
        <h1>Get data from text file</h1>
            <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>
        <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>
        <h1>Put data from text file into array and output as list</h1>
            <ul id="fileData">
        </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>
        <meta charset="UTF-8">
        <title>Alert Data from Text File</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
        <h1>Alert data from text file</h1>
            <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>
        <meta charset="UTF-8">
        <title>Alert Data and Status from Text File</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
        <h1>Alert data and status from text file</h1>
            <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>
        <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>
            <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>