Cách đọc dữ liệu từ tệp CSV cục bộ trong HTML

Nếu truy cập trang web thông qua máy chủ web, tôi. e. với http, thì bạn chỉ có thể đọc các tệp [XML/CSV] nằm trong thư mục của máy chủ web trở xuống

Khi chúng tôi chạy các ví dụ thường cục bộ, tôi. e. không phải thông qua máy chủ web, sau đó chúng tôi có thể đọc mọi thứ

Thật không may, điều đó có nghĩa là, trừ khi ai đó sửa lỗi cho tôi, nếu người dùng muốn đọc tệp dữ liệu cục bộ, anh ta sẽ phải đặt nó trên máy chủ web

Lấy tệp csv cục bộ và tạo biểu đồ

Điều này dựa trên video hướng dẫn của Daniel Shiffman về Làm việc với dữ liệu và API trong JavaScript

Nguồn

Mục đích

Tìm nạp tệp csv cục bộ và tạo biểu đồ

Bước 1. Tải tệp CSV cục bộ

1. Xem lại tệp CSV nguồn và xóa tất cả các lỗi cũng như các hàng và cột trống
2. Sử dụng fetch[] để lấy dữ liệu của nó
3. Hoàn thành luồng dữ liệu

async function getData[] {
  const response = await fetch[`ZonAnn.Ts+dSST.csv`];
  const table = await response.text[];
}

Bước 2. phân tích thủ công

1. Tách dữ liệu thành các hàng dựa trên ngắt dòng
2. Loại bỏ hàng tiêu đề
3. Lặp qua các hàng để lấy năm và nhiệt độ ra khỏi dữ liệu
4. Đẩy năm vào mảng dữ liệu trục X, tạm thời mảng dữ liệu trục Y
5. Hãy nhớ rằng trong bảng tính, các số được thể hiện dưới dạng chuỗi. Vì vậy, bạn phải chuyển đổi chúng thành số bằng phương pháp parseFloat[]

async function getData[] {
  const xs = [];
  const ys = [];
  const response = await fetch['ZonAnn.Ts+dSST.csv'];
  const data = await response.text[];
  const table = data.split[/\n/].slice[1];
  table.forEach[row => {
    const columns = row.split[','];
    const year = columns[0];
    xs.push[year];
    const temp = columns[1];
    ys.push[parseFloat[temp] + 14];
  }]
}

Bước 3. đồ thị. js

1. Triệu tập hướng dẫn bắt đầu của chart.js
2. Sao chép và dán ví dụ như bên dưới vào trang của bạn.

   
   
   var ctx = document.getElementById['myChart'].getContext['2d'];
   var myChart = new Chart[ctx, {
       type: 'bar',
       data: {
           labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
           datasets: [{
               label: '# of Votes',
               data: [12, 19, 3, 5, 2, 3],
               backgroundColor: [
                   'rgba[255, 99, 132, 0.2]',
                   'rgba[54, 162, 235, 0.2]',
                   'rgba[255, 206, 86, 0.2]',
                   'rgba[75, 192, 192, 0.2]',
                   'rgba[153, 102, 255, 0.2]',
                   'rgba[255, 159, 64, 0.2]'
               ],
               borderColor: [
                   'rgba[255, 99, 132, 1]',
                   'rgba[54, 162, 235, 1]',
                   'rgba[255, 206, 86, 1]',
                   'rgba[75, 192, 192, 1]',
                   'rgba[153, 102, 255, 1]',
                   'rgba[255, 159, 64, 1]'
               ],
               borderWidth: 1
           }]
       },
       options: {
           scales: {
               yAxes: [{
                   ticks: {
                       beginAtZero: true
                   }
               }]
           }
       }
   }];
   
   

3. Cấu hình nguồn dữ liệu.
   Trong trường hợp của chúng tôi, năm phải là nhãn trục X trong khi dữ liệu trục Y tạm thời. Kích hoạt hàm getData[] để trả về một đối tượng bằng chữ đại diện cho một cặp dữ liệu mong muốn. Bằng cách đó, chúng tôi có thể trích dẫn dữ liệu đó bằng cách sử dụng ký hiệu dấu chấm.

   async function getData[] {
     const xs = [];
     const ys = [];
     const response = await fetch['ZonAnn.Ts+dSST.csv'];
     const data = await response.text[];
     const table = data.split[/\n/].slice[1];
     table.forEach[row => {
       const columns = row.split[','];
       const year = columns[0];
       xs.push[year];
       const temp = columns[1];
       ys.push[parseFloat[temp] + 14];
     }]
     return { xs, ys }
   }
   

4. Sắp xếp các dòng mã liên quan đến chart.js thành một chức năng.

   async function chartIt[] { // Organize the `chart.js` related code line into a function
         const data = await getData[]; // Get resulting data from the getData[] function.
         const ctx = document.getElementById['myChart'].getContext['2d'];
         const myChart = new Chart[ctx, {
             type: 'line', // Switch the graph to a line chart
             data: {
                 labels: data.xs, // Customize the label sources
                 datasets: [{
                     label: 'Combined Land-Surface Air and Sea-Surface Water Temperature [℃]', // new name
                     data: data.ys, // Customize the data source for the Y-axis
                     fill: false, // Do not fill the line
                     backgroundColor: 'rgba[255, 99, 132, 0.2]', // Adopt single color scheme across different datasets
                     borderColor: 'rgba[255, 99, 132, 1]', // adopt single color scheme across different datasets
                     borderWidth: 1
                 }]
             },
             options: {
                 scales: {
                     yAxes: [{
                         ticks: {
                             // Include a ℃ sign in the ticks
                             callback: function[value, index, values] {
                                 return value + '℃';
                             }
                         }
                     }]
                 }
             }
         }];
     }
   

5. Gọi hàm

   async function getData[] {
     const xs = [];
     const ys = [];
     const response = await fetch['ZonAnn.Ts+dSST.csv'];
     const data = await response.text[];
     const table = data.split[/\n/].slice[1];
     table.forEach[row => {
       const columns = row.split[','];
       const year = columns[0];
       xs.push[year];
       const temp = columns[1];
       ys.push[parseFloat[temp] + 14];
     }]
   }
   

   0

Làm cách nào để chuyển đổi CSV sang HTML?

Làm cách nào để mở tệp CSV cục bộ bằng JavaScript?