Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?

  • 21 phút đọc
  • Mã hóa, CSS, jQuery, trực quan hóa dữ liệu, hoạt hình

Thực tế có khá nhiều cách để hiển thị đồ thị trên web. Có những ưu và nhược điểm đối với một loạt các tài nguyên có sẵn cho chúng tôi, nhưng hướng dẫn này sẽ không khám phá tất cả. Thay vào đó, chúng tôi sẽ tạo ra biểu đồ của chúng tôi bằng cách sử dụng một lần rắc CSS3 và jQuery tăng cường dần dần.

Những người trong phòng họp trên toàn thế giới yêu thích một biểu đồ tốt. Họ đi với Powerpoint, điểm đạn và cụm từ như là Run Run It Up The Flagpole, Backwards không phải là một lựa chọn cho những người tạo điều kiện cho mô hình thay đổi trong Zeitgeist. Đồ thị của dự đoán tài chính, số liệu bán hàng hàng quý và bão hòa thị trường là một giấc mơ của người quản lý trung bình.

Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?

Làm thế nào chúng ta có thể là nhà thiết kế web tham gia vào tất cả các hành động đồ thị nóng này? Thực tế có khá nhiều cách để hiển thị đồ thị trên web. Chúng tôi chỉ có thể tạo một hình ảnh và đóng nó vào một trang web. Nhưng điều đó không dễ tiếp cận hoặc thú vị. Chúng tôi có thể sử dụng flash, khá tốt để hiển thị đồ thị - nhưng một lần nữa, không thể truy cập được lắm. Bên cạnh đó, các nhà thiết kế, nhà phát triển và các vị thần đang rơi ra khỏi tình yêu với Flash.

Các công nghệ như HTML5 có thể làm nhiều điều tương tự mà không cần một trình cắm. Phần tử HTML5

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('
'); var graphContainer = $('
'); var barContainer = $('
'); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
3 mới thậm chí có thể được điều chỉnh theo nhiệm vụ. Rất nhiều công cụ biểu đồ là trực tuyến mà chúng tôi có thể sử dụng. Nhưng nếu chúng ta muốn một cái gì đó phù hợp hơn một chút?

Có những ưu và nhược điểm đối với một loạt các tài nguyên có sẵn cho chúng tôi, nhưng hướng dẫn này sẽ không khám phá tất cả. Thay vào đó, chúng tôi sẽ tạo ra biểu đồ của chúng tôi bằng cách sử dụng một lần rắc CSS3 và jQuery tăng cường dần dần. Bởi vì chúng ta có thể.

Thêm sau khi nhảy! Tiếp tục đọc bên dưới & NBSP; ↓

Chúng ta đang làm gì?

Chúng tôi làm điều này. Và nhiều hơn nữa! Dưới đây là một số khả năng về cách bạn có thể mở rộng các kỹ thuật được khám phá trong hướng dẫn này:

  • Một thanh tiến bộ chỉ ra bao lâu cho đến khi kết thúc tất cả nhân loại trong trường hợp bệnh dịch zombie;
  • Một biểu đồ cho thấy sự suy giảm trong các hoạt động ngoài trời an toàn trong một bệnh dịch zombie;
  • Một biểu đồ tương tự đáng sợ cho thấy sự suy giảm cách cư xử trong một bệnh dịch zombie;
  • Sự gia tăng của những người không biết về bệnh dịch zombie vì họ đang chia sẻ với tất cả những người bạn đã chết của họ trên Facebook những gì họ đã làm trên Farmville.

Hoặc bạn có thể tạo một biểu đồ hoặc thanh hạn ngạch chỉ đơn giản là minh họa một cái gì đó hữu ích và ít đầy sợ hãi và thây ma. Vì vậy, hãy để Lôi tiếp tục với nó.

Những gì bạn cần

  • Một bản chỉnh sửa văn bản hoặc HTML. Bạn chọn đi; Nhiều người ở ngoài đó.
  • jQuery. Thực hành kịch bản an toàn và nhận được cái mới nhất. Giữ cho trang web JQuery mở để bạn có thể tìm kiếm tài liệu khi bạn đi.
  • Có thể là một trình soạn thảo hình ảnh, chẳng hạn như sơn, để chế giễu biểu đồ của bạn có thể trông như thế nào.
  • Một trình duyệt web hiện đại và tốt để xem trước thay đổi.

Nên làm vậy. Xin lưu ý rằng hướng dẫn này không được thiết kế như một phần giới thiệu về HTML, CSS, jQuery hoặc zombie. Một số kiến ​​thức trung gian về ba công nghệ này và xác sống được giả định.

Dấu ấn

Bạn có thể tạo HTML cơ bản cho một biểu đồ theo một số cách. Trong hướng dẫn này, chúng tôi sẽ bắt đầu với

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('
'); var graphContainer = $('
'); var barContainer = $('
'); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
4, bởi vì nó sẽ có ý nghĩa nhất về mặt trực quan nếu JavaScript hoặc CSS không được áp dụng. Đó là một dấu hiệu lớn trong cột cho khả năng tiếp cận.

Nhanh! Bạn chỉ được cung cấp một số con số đáng báo động. Dân số của zombie rám nắng được dự đoán sẽ vượt khỏi tầm kiểm soát trong vài năm tới. Những con hổ carbon và khỉ xanh đang bị đe dọa ngay lập tức. Sau đó, những thây ma rám nắng có thể sẽ đến với chúng tôi. Nhưng bạn chỉ là một nhà thiết kế. Bạn có thể làm gì để giúp đỡ?

Tôi biết! Bạn có thể tạo một trang web minh họa sự sụp đổ sắp xảy ra của chúng tôi với đồ họa hoạt hình đẹp, bình tĩnh, trơn tru!

Để bắt đầu, hãy để Lừa đặt dữ liệu này vào một bảng, với các cột cho mỗi năm và các hàng cho các loài khác nhau.



   
      
      
      Example 01: No CSS
   

   
      

Population of endangered species from 2012 to 2016

Population in thousands
  2012 2013 2014 2015 2016
Carbon Tiger 4080 6080 6240 3520 2240
Blue Monkey 5680 6880 6240 5120 2640
Tanned Zombie 1040 1760 2880 4720 7520

Xem ví dụ dưới đây để xem nó trông trần trụi như thế nào, không có CSS ​​hoặc JavaScript được áp dụng. Khả năng truy cập của bảng này sẽ cho phép mọi người sử dụng đầu đọc màn hình để hiểu dữ liệu và thông điệp cơ bản, đó là cách chạy cho cuộc sống của bạn! Những thây ma đang đến!

Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?

Phần dễ dàng bây giờ là ra khỏi con đường. Bây giờ, hãy để Lừa chạm vào sức mạnh của CSS và Javasscript (thông qua JQuery) để thực sự minh họa những gì các con số đang nói với chúng tôi. Về mặt kỹ thuật, mục đích của chúng tôi là tạo ra một biểu đồ hoạt động trong tất cả các trình duyệt hiện đại, từ IE 8 trở đi.

Tôi đã nói tất cả các trình duyệt hiện đại? IE 8 thật may mắn: Nó được đi chơi với những đứa trẻ tuyệt vời. Các trình duyệt hỗ trợ CSS3 sẽ có thêm một vài rắc.

“Theo sức mạnh của bạn kết hợp với nhau

Nếu bạn muốn triệu tập Captain Planet, bạn có thể phải tìm nơi khác. Nếu bạn muốn học cách kết hợp CSS và jQuery để tạo ra một biểu đồ minh họa cho sự diệt vong sắp xảy ra của chúng ta dưới bàn tay của một đội quân zombie đang phát triển, những người thích bronzer hơn bộ não, thì hãy đọc tiếp.

Điều đầu tiên cần làm là tạo kiểu cho bảng của chúng tôi với một số CSS cơ bản. Đây là một mạng lưới an toàn tốt đẹp cho những người trú ẩn đã kích hoạt JavaScript trong trình duyệt của họ.

Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?

Bắt đầu trong JQuery

Chúng tôi sẽ sử dụng jQuery để tạo biểu đồ của chúng tôi một cách nhanh chóng, tách biệt với bảng dữ liệu gốc. Để làm điều này, chúng tôi cần đưa dữ liệu ra khỏi bảng và lưu trữ nó ở định dạng có thể sử dụng hơn. Sau đó, chúng tôi có thể thêm vào tài liệu của chúng tôi các yếu tố mới sử dụng dữ liệu này để xây dựng biểu đồ của chúng tôi.

Hãy bắt đầu bằng cách tạo chức năng

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('
'); var graphContainer = $('
'); var barContainer = $('
'); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
5 chính của chúng tôi. Tôi đã viết tắt một số hoạt động bên trong của chức năng này để bạn có được một bức tranh rõ ràng hơn về cấu trúc. Đừng quên: Bạn luôn có thể đề cập đến mã nguồn đi kèm với hướng dẫn này.

Ở đây, cấu trúc cơ bản của chúng tôi:

// Wait for the DOM to load everything, just to be safe
$(document).ready(function() {

   // Create our graph from the data table and specify a container to put the graph in
   createGraph('#data-table', '.chart');

   // Here be graphs
   function createGraph(data, container) {
      // Declare some common variables and container elements
      …

      // Create the table data object
      var tableData = {
         …
      }

      // Useful variables to access table data
      …

      // Construct the graph
      …

      // Set the individual heights of bars
      function displayGraph(bars) {
         …
      }

      // Reset the graph's settings and prepare for display
      function resetGraph() {
         …
         displayGraph(bars);
      }

      // Helper functions
      …

      // Finally, display the graph via reset function
      resetGraph();
   }
});

Chúng tôi chuyển hai tham số cho chức năng này:

  1. // Declare some common variables and container elements
    var bars = [];
    var figureContainer = $('
    '); var graphContainer = $('
    '); var barContainer = $('
    '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
    6, dưới dạng phần tử
    // Declare some common variables and container elements
    var bars = [];
    var figureContainer = $('
    '); var graphContainer = $('
    '); var barContainer = $('
    '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
    4;
  2. Một yếu tố
    // Declare some common variables and container elements
    var bars = [];
    var figureContainer = $('
    '); var graphContainer = $('
    '); var barContainer = $('
    '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
    8, nơi chúng tôi muốn đặt biểu đồ của chúng tôi vào tài liệu.

Tiếp theo, chúng tôi sẽ khai báo một số biến để quản lý các yếu tố dữ liệu và container của chúng tôi, cộng với một số biến hẹn giờ cho hoạt hình. Đây là mã:

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('
'); var graphContainer = $('
'); var barContainer = $('
'); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;

Không có gì quá thú vị ở đây, nhưng những điều này sẽ rất hữu ích sau này.

Nhận dữ liệu

Bên cạnh việc hiển thị dữ liệu đơn giản, một biểu đồ thanh tốt nên có một tiêu đề lớn đẹp, các trục được dán nhãn rõ ràng và một huyền thoại được mã hóa màu. Chúng tôi cần phải tước dữ liệu ra khỏi bảng và định dạng nó theo cách có ý nghĩa hơn trong một biểu đồ. Để làm điều đó, chúng tôi sẽ tạo một đối tượng JavaScript lưu trữ dữ liệu của chúng tôi trong các chức năng nhỏ tiện dụng. Hãy để sinh ra đối tượng

// Declare some common variables and container elements
var bars = [];
var figureContainer = $('
'); var graphContainer = $('
'); var barContainer = $('
'); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
9 của chúng tôi:

// Create table data object
var tableData = {
   // Get numerical data from table cells
   chartData: function() {
      …
   },
   // Get heading data from table caption
   chartHeading: function() {
      …
   },
   // Get legend data from table body
   chartLegend: function() {
      …
   },
   // Get highest value for y-axis scale
   chartYMax: function() {
      …
   },
   // Get y-axis data from table cells
   yLegend: function() {
      …
   },
   // Get x-axis data from table header
   xLegend: function() {
      …
   },
   // Sort data into groups based on number of columns
   columnGroups: function() {
      …
   }
}

Chúng tôi có một số chức năng ở đây và chúng được giải thích trong các bình luận của mã. Hầu hết trong số họ khá giống nhau, vì vậy chúng tôi không cần phải đi qua từng người. Thay vào đó, hãy để Lừa chọn một trong số họ,

// Create table data object
var tableData = {
   // Get numerical data from table cells
   chartData: function() {
      …
   },
   // Get heading data from table caption
   chartHeading: function() {
      …
   },
   // Get legend data from table body
   chartLegend: function() {
      …
   },
   // Get highest value for y-axis scale
   chartYMax: function() {
      …
   },
   // Get y-axis data from table cells
   yLegend: function() {
      …
   },
   // Get x-axis data from table header
   xLegend: function() {
      …
   },
   // Sort data into groups based on number of columns
   columnGroups: function() {
      …
   }
}
0:

// Sort data into groups based on number of columns
columnGroups: function() {
   var columnGroups = [];
   // Get number of columns from first row of table body
   var columns = data.find('tbody tr:eq(0) td').length;
   for (var i = 0; i < columns; i++) {
      columnGroups[i] = [];
      data.find('tbody tr').each(function() {
         columnGroups[i].push($(this).find('td').eq(i).text());
      });
   }
   return columnGroups;
}

Ở đây, cách thức của nó bị phá vỡ:

  • Tạo mảng
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    1 để lưu trữ dữ liệu;
  • Nhận số lượng cột bằng cách đếm các ô bảng (
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    2) trong hàng đầu tiên;
  • Đối với mỗi cột, tìm số lượng hàng trong thân bảng (
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    3) và tạo một mảng khác để lưu trữ dữ liệu ô bảng;
  • Sau đó lặp qua mỗi hàng và lấy dữ liệu từ mỗi ô bảng (thông qua hàm jQuery
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    4), sau đó thêm nó vào mảng dữ liệu ô bảng.

Khi đối tượng của chúng tôi chứa đầy dữ liệu ngon ngọt, chúng tôi có thể bắt đầu tạo các yếu tố tạo nên biểu đồ của chúng tôi.

Sử dụng dữ liệu

Sử dụng hàm jQuery

// Create table data object
var tableData = {
   // Get numerical data from table cells
   chartData: function() {
      …
   },
   // Get heading data from table caption
   chartHeading: function() {
      …
   },
   // Get legend data from table body
   chartLegend: function() {
      …
   },
   // Get highest value for y-axis scale
   chartYMax: function() {
      …
   },
   // Get y-axis data from table cells
   yLegend: function() {
      …
   },
   // Get x-axis data from table header
   xLegend: function() {
      …
   },
   // Sort data into groups based on number of columns
   columnGroups: function() {
      …
   }
}
5, giờ đây chúng tôi có thể lặp qua dữ liệu của mình tại bất kỳ điểm nào và tạo các yếu tố tạo nên biểu đồ của chúng tôi. Một trong những bit phức tạp hơn liên quan đến việc chèn các thanh đại diện cho mỗi loài bên trong các cột hàng năm.

Đây là mã:

// Loop through column groups, adding bars as we go
$.each(columnGroups, function(i) {
   // Create bar group container
   var barGroup = $('
'); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
' + barObj.label + '
') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });

Không bao gồm các tiêu đề, bảng của chúng tôi có năm cột với ba hàng. Đối với biểu đồ của chúng tôi, điều này có nghĩa là đối với mỗi cột chúng tôi tạo, ba thanh sẽ xuất hiện trong cột đó. Hình ảnh sau đây cho thấy biểu đồ của chúng tôi sẽ được xây dựng như thế nào:

Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?

Phá vỡ nó xuống:

  • Đối với mỗi cột, tạo một container
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    6;
  • Vòng lặp bên trong mỗi cột để lấy dữ liệu hàng và ô;
  • Tạo một đối tượng thanh (
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    7) để lưu trữ các thuộc tính cho mỗi thanh, chẳng hạn như nhãn, chiều cao và đánh dấu của nó;
  • Thêm thuộc tính đánh dấu vào cột, áp dụng lớp CSS của
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    8 vào mã màu mỗi thanh trong cột, quấn nhãn trong
    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    9;
  • Thêm đối tượng vào mảng
    // Sort data into groups based on number of columns
    columnGroups: function() {
       var columnGroups = [];
       // Get number of columns from first row of table body
       var columns = data.find('tbody tr:eq(0) td').length;
       for (var i = 0; i < columns; i++) {
          columnGroups[i] = [];
          data.find('tbody tr').each(function() {
             columnGroups[i].push($(this).find('td').eq(i).text());
          });
       }
       return columnGroups;
    }
    0 của chúng tôi để chúng tôi có thể truy cập dữ liệu sau;
  • Ghép tất cả lại với nhau bằng cách thêm các cột vào một phần tử container.

Điểm thưởng nếu bạn nhận thấy rằng chúng tôi đã không đặt chiều cao của các thanh. Điều này là để chúng tôi có nhiều quyền kiểm soát hơn về cách các thanh được hiển thị.

Bây giờ chúng tôi có các thanh của chúng tôi, hãy để chúng tôi làm việc về việc dán nhãn biểu đồ của chúng tôi. Bởi vì mã để hiển thị các nhãn khá giống nhau, nói chuyện với bạn thông qua tất cả các chiến thắng là cần thiết. Ở đây, cách chúng tôi hiển thị trục y:

// Add y-axis to graph
var yLegend   = tableData.yLegend();
var yAxisList   = $('
    '); $.each(yLegend, function(i) { var listItem = $('
  • ' + this + '
  • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);

    Điều này bị phá vỡ như sau:

    • Nhận dữ liệu bảng có liên quan cho nhãn của chúng tôi,
    • Tạo một danh sách không có thứ tự (
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      1) để chứa các mục danh sách của chúng tôi;
    • Vòng lặp qua dữ liệu nhãn và tạo một mục danh sách (
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      2) cho mỗi nhãn, gói mỗi nhãn trong một
      // Create table data object
      var tableData = {
         // Get numerical data from table cells
         chartData: function() {
            …
         },
         // Get heading data from table caption
         chartHeading: function() {
            …
         },
         // Get legend data from table body
         chartLegend: function() {
            …
         },
         // Get highest value for y-axis scale
         chartYMax: function() {
            …
         },
         // Get y-axis data from table cells
         yLegend: function() {
            …
         },
         // Get x-axis data from table header
         xLegend: function() {
            …
         },
         // Sort data into groups based on number of columns
         columnGroups: function() {
            …
         }
      }
      9;
    • Đính kèm mục danh sách vào danh sách của chúng tôi;
    • Cuối cùng, đính kèm danh sách vào một phần tử container.

    Bằng cách lặp lại kỹ thuật này, chúng ta có thể thêm nhãn LEGEND, nhãn trục X và tiêu đề cho biểu đồ của chúng ta.

    Trước khi chúng tôi có thể hiển thị biểu đồ của mình, chúng tôi cần đảm bảo rằng mọi thứ chúng tôi đã thực hiện được thêm vào phần tử container của chúng tôi.

    // Add bars to graph
    barContainer.appendTo(graphContainer);
    
    // Add graph to graph container
    graphContainer.appendTo(figureContainer);
    
    // Add graph container to main container
    figureContainer.appendTo(container);

    Hiển thị dữ liệu

    Tất cả những gì còn lại để làm trong jQuery là đặt chiều cao của mỗi thanh. Đây là nơi công việc trước đây của chúng tôi, lưu trữ thuộc tính chiều cao trong một đối tượng thanh, sẽ có ích.

    Chúng tôi sẽ làm động đồ biểu đồ của chúng tôi tuần tự, từng người một, uno por uno.

    Một giải pháp khả thi là sử dụng chức năng gọi lại để làm động thanh tiếp theo khi hình ảnh động cuối cùng hoàn tất. Tuy nhiên, biểu đồ sẽ mất quá nhiều thời gian để sinh động. Thay vào đó, biểu đồ của chúng tôi sẽ sử dụng hàm hẹn giờ để hiển thị mỗi thanh sau một khoảng thời gian nhất định, bất kể mỗi thanh mất bao lâu để phát triển. Rad!

    Ở đây, chức năng

    // Sort data into groups based on number of columns
    columnGroups: function() {
       var columnGroups = [];
       // Get number of columns from first row of table body
       var columns = data.find('tbody tr:eq(0) td').length;
       for (var i = 0; i < columns; i++) {
          columnGroups[i] = [];
          data.find('tbody tr').each(function() {
             columnGroups[i].push($(this).find('td').eq(i).text());
          });
       }
       return columnGroups;
    }
    4:

    // Set the individual height of bars
    function displayGraph(bars, i) {
       // Changed the way we loop because of issues with $.each not resetting properly
       if (i < bars.length) {
          // Animate the height using the jQuery animate() function
          $(bars[i].bar).animate({
             height: bars[i].height
          }, 800);
          // Wait the specified time, then run the displayGraph() function again for the next bar
          barTimer = setTimeout(function() {
             i++;
             displayGraph(bars, i);
          }, 100);
       }
    }

    Những gì bạn nói? Tại sao bạn lại sử dụng chức năng

    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    5 như bạn có ở mọi nơi khác? Câu hỏi hay. Đầu tiên, hãy để thảo luận về những gì chức năng
    // Sort data into groups based on number of columns
    columnGroups: function() {
       var columnGroups = [];
       // Get number of columns from first row of table body
       var columns = data.find('tbody tr:eq(0) td').length;
       for (var i = 0; i < columns; i++) {
          columnGroups[i] = [];
          data.find('tbody tr').each(function() {
             columnGroups[i].push($(this).find('td').eq(i).text());
          });
       }
       return columnGroups;
    }
    4 làm, vậy thì tại sao nó lại như vậy.

    Hàm

    // Sort data into groups based on number of columns
    columnGroups: function() {
       var columnGroups = [];
       // Get number of columns from first row of table body
       var columns = data.find('tbody tr:eq(0) td').length;
       for (var i = 0; i < columns; i++) {
          columnGroups[i] = [];
          data.find('tbody tr').each(function() {
             columnGroups[i].push($(this).find('td').eq(i).text());
          });
       }
       return columnGroups;
    }
    4 chấp nhận hai tham số:

    1. // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      8 để lặp qua,
    2. Một chỉ mục (
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      9) từ đó bắt đầu lặp lại (bắt đầu từ
      // Loop through column groups, adding bars as we go
      $.each(columnGroups, function(i) {
         // Create bar group container
         var barGroup = $('
      '); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
      ' + barObj.label + '
      ') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });
      0).

    Hãy để chia nhỏ phần còn lại:

    • Nếu giá trị của
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      9 nhỏ hơn số lượng thanh, thì hãy tiếp tục đi;
    • Nhận thanh hiện tại từ mảng bằng cách sử dụng giá trị của
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      9;
    • Làm động thuộc tính chiều cao (được tính theo tỷ lệ phần trăm và được lưu trữ trong
      // Loop through column groups, adding bars as we go
      $.each(columnGroups, function(i) {
         // Create bar group container
         var barGroup = $('
      '); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
      ' + barObj.label + '
      ') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });
      3);
    • Chờ 100 mili giây;
    • Tăng
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      9 bằng 1 và lặp lại quy trình cho thanh tiếp theo.

    Vì vậy, tại sao bạn lại chỉ sử dụng chức năng

    // Create table data object
    var tableData = {
       // Get numerical data from table cells
       chartData: function() {
          …
       },
       // Get heading data from table caption
       chartHeading: function() {
          …
       },
       // Get legend data from table body
       chartLegend: function() {
          …
       },
       // Get highest value for y-axis scale
       chartYMax: function() {
          …
       },
       // Get y-axis data from table cells
       yLegend: function() {
          …
       },
       // Get x-axis data from table header
       xLegend: function() {
          …
       },
       // Sort data into groups based on number of columns
       columnGroups: function() {
          …
       }
    }
    5 với
    // Loop through column groups, adding bars as we go
    $.each(columnGroups, function(i) {
       // Create bar group container
       var barGroup = $('
    '); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
    ' + barObj.label + '
    ') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });
    6 trước khi hoạt hình?

    Bạn có thể, và nó sẽ hoạt động tốt ngay lần đầu tiên. Nhưng nếu bạn đã cố gắng đặt lại hoạt hình thông qua nút Reset Reset biểu đồ, thì các sự kiện thời gian sẽ rõ ràng rõ ràng và các thanh sẽ làm động ra khỏi chuỗi.

    Tôi muốn được chứng minh là sai, và nếu có một cách tốt hơn để làm điều này, hãy thoải mái tắt trong phần bình luận.

    Tiếp tục, ở đây, ____ ____57:

    // Reset graph settings and prepare for display
    function resetGraph() {
       // Stop all animations and set the bar's height to 0
       $.each(bars, function(i) {
          $(bars[i].bar).stop().css('height', 0);
       });
    
       // Clear timers
       clearTimeout(barTimer);
       clearTimeout(graphTimer);
    
       // Restart timer
       graphTimer = setTimeout(function() {
          displayGraph(bars, 0);
       }, 200);
    }

    Hãy để phá vỡ

    // Loop through column groups, adding bars as we go
    $.each(columnGroups, function(i) {
       // Create bar group container
       var barGroup = $('
    '); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
    ' + barObj.label + '
    ') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });
    7 xuống:

    • Dừng tất cả các hình ảnh động và đặt chiều cao của mỗi thanh trở lại 0;
    • Xóa bộ hẹn giờ để không có hình ảnh động đi lạc;
    • Chờ đợi 200 mili giây;
    • Gọi
      // Sort data into groups based on number of columns
      columnGroups: function() {
         var columnGroups = [];
         // Get number of columns from first row of table body
         var columns = data.find('tbody tr:eq(0) td').length;
         for (var i = 0; i < columns; i++) {
            columnGroups[i] = [];
            data.find('tbody tr').each(function() {
               columnGroups[i].push($(this).find('td').eq(i).text());
            });
         }
         return columnGroups;
      }
      4 để làm động thanh đầu tiên (tại Index
      // Loop through column groups, adding bars as we go
      $.each(columnGroups, function(i) {
         // Create bar group container
         var barGroup = $('
      '); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
      ' + barObj.label + '
      ') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });
      0).

    Cuối cùng, hãy gọi

    // Loop through column groups, adding bars as we go
    $.each(columnGroups, function(i) {
       // Create bar group container
       var barGroup = $('
    '); // Add bars inside each column for (var j = 0, k = columnGroups[i].length; j < k; j++) { // Create bar object to store properties (label, height, code, etc.) and add it to array // Set the height later in displayGraph() to allow for left-to-right sequential display var barObj = {}; barObj.label = this[j]; barObj.height = Math.floor(barObj.label / chartYMax * 100) + '%'; barObj.bar = $('
    ' + barObj.label + '
    ') .appendTo(barGroup); bars.push(barObj); } // Add bar groups to graph barGroup.appendTo(barContainer); });
    7 ở dưới cùng của
    // Declare some common variables and container elements
    var bars = [];
    var figureContainer = $('
    '); var graphContainer = $('
    '); var barContainer = $('
    '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
    5 và xem điều kỳ diệu xảy ra khi chúng ta đắm mình trong vinh quang của công việc khó khăn của chúng ta.

    Không quá nhanh, ánh nắng mặt trời! Trước khi chúng ta đi xa hơn, chúng ta cần mặc một số quần áo lên.

    CSS

    Điều đầu tiên chúng ta cần làm là ẩn bảng dữ liệu gốc. Chúng tôi có thể làm điều này theo một số cách, nhưng vì CSS của chúng tôi sẽ tải tốt trước JavaScript, hãy để Lừa làm điều này theo cách dễ nhất có thể:

    // Wait for the DOM to load everything, just to be safe
    $(document).ready(function() {
    
       // Create our graph from the data table and specify a container to put the graph in
       createGraph('#data-table', '.chart');
    
       // Here be graphs
       function createGraph(data, container) {
          // Declare some common variables and container elements
          …
    
          // Create the table data object
          var tableData = {
             …
          }
    
          // Useful variables to access table data
          …
    
          // Construct the graph
          …
    
          // Set the individual heights of bars
          function displayGraph(bars) {
             …
          }
    
          // Reset the graph's settings and prepare for display
          function resetGraph() {
             …
             displayGraph(bars);
          }
    
          // Helper functions
          …
    
          // Finally, display the graph via reset function
          resetGraph();
       }
    });
    0

    Xong. Hãy để tạo ra một khu vực container đẹp để đặt biểu đồ của chúng tôi vào. Bởi vì một vài danh sách không được đặt hàng đang được sử dụng để tạo biểu đồ của chúng tôi, chúng tôi cũng sẽ đặt lại các kiểu cho chúng. Cho các yếu tố

    // Add y-axis to graph
    var yLegend   = tableData.yLegend();
    var yAxisList   = $('
      '); $.each(yLegend, function(i) { var listItem = $('
    • ' + this + '
    • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
      3 và
      // Add y-axis to graph
      var yLegend   = tableData.yLegend();
      var yAxisList   = $('
        '); $.each(yLegend, function(i) { var listItem = $('
      • ' + this + '
      • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
        4 A
        // Add y-axis to graph
        var yLegend   = tableData.yLegend();
        var yAxisList   = $('
          '); $.each(yLegend, function(i) { var listItem = $('
        • ' + this + '
        • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
          5 rất quan trọng vì nó sẽ neo các yếu tố vị trí chính xác nơi chúng ta muốn trong các container đó.

          // Wait for the DOM to load everything, just to be safe
          $(document).ready(function() {
          
             // Create our graph from the data table and specify a container to put the graph in
             createGraph('#data-table', '.chart');
          
             // Here be graphs
             function createGraph(data, container) {
                // Declare some common variables and container elements
                …
          
                // Create the table data object
                var tableData = {
                   …
                }
          
                // Useful variables to access table data
                …
          
                // Construct the graph
                …
          
                // Set the individual heights of bars
                function displayGraph(bars) {
                   …
                }
          
                // Reset the graph's settings and prepare for display
                function resetGraph() {
                   …
                   displayGraph(bars);
                }
          
                // Helper functions
                …
          
                // Finally, display the graph via reset function
                resetGraph();
             }
          });
          1

          Bây giờ cho truyền thuyết. Chúng tôi định vị huyền thoại ngay xuống dưới cùng của container của nó (

          // Add y-axis to graph
          var yLegend   = tableData.yLegend();
          var yAxisList   = $('
            '); $.each(yLegend, function(i) { var listItem = $('
          • ' + this + '
          • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
            3) và xếp hàng các mục theo chiều ngang:

            // Wait for the DOM to load everything, just to be safe
            $(document).ready(function() {
            
               // Create our graph from the data table and specify a container to put the graph in
               createGraph('#data-table', '.chart');
            
               // Here be graphs
               function createGraph(data, container) {
                  // Declare some common variables and container elements
                  …
            
                  // Create the table data object
                  var tableData = {
                     …
                  }
            
                  // Useful variables to access table data
                  …
            
                  // Construct the graph
                  …
            
                  // Set the individual heights of bars
                  function displayGraph(bars) {
                     …
                  }
            
                  // Reset the graph's settings and prepare for display
                  function resetGraph() {
                     …
                     displayGraph(bars);
                  }
            
                  // Helper functions
                  …
            
                  // Finally, display the graph via reset function
                  resetGraph();
               }
            });
            2

            Trục X rất giống với truyền thuyết. Chúng tôi xếp hàng các phần tử theo chiều ngang và neo chúng vào đáy của container của nó (

            // Add y-axis to graph
            var yLegend   = tableData.yLegend();
            var yAxisList   = $('
              '); $.each(yLegend, function(i) { var listItem = $('
            • ' + this + '
            • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
              4):

              // Wait for the DOM to load everything, just to be safe
              $(document).ready(function() {
              
                 // Create our graph from the data table and specify a container to put the graph in
                 createGraph('#data-table', '.chart');
              
                 // Here be graphs
                 function createGraph(data, container) {
                    // Declare some common variables and container elements
                    …
              
                    // Create the table data object
                    var tableData = {
                       …
                    }
              
                    // Useful variables to access table data
                    …
              
                    // Construct the graph
                    …
              
                    // Set the individual heights of bars
                    function displayGraph(bars) {
                       …
                    }
              
                    // Reset the graph's settings and prepare for display
                    function resetGraph() {
                       …
                       displayGraph(bars);
                    }
              
                    // Helper functions
                    …
              
                    // Finally, display the graph via reset function
                    resetGraph();
                 }
              });
              3

              Trục Y có liên quan nhiều hơn một chút và đòi hỏi một vài thủ thuật. Chúng tôi cung cấp cho nó một

              // Add y-axis to graph
              var yLegend   = tableData.yLegend();
              var yAxisList   = $('
                '); $.each(yLegend, function(i) { var listItem = $('
              • ' + this + '
              • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
                8 để phá vỡ nó ra khỏi dòng nội dung bình thường, nhưng được neo vào container của nó. Chúng tôi kéo dài từng
                // Sort data into groups based on number of columns
                columnGroups: function() {
                   var columnGroups = [];
                   // Get number of columns from first row of table body
                   var columns = data.find('tbody tr:eq(0) td').length;
                   for (var i = 0; i < columns; i++) {
                      columnGroups[i] = [];
                      data.find('tbody tr').each(function() {
                         columnGroups[i].push($(this).find('td').eq(i).text());
                      });
                   }
                   return columnGroups;
                }
                2 lên toàn bộ chiều rộng của biểu đồ và thêm một đường viền trên đỉnh. Điều này sẽ cung cấp cho chúng tôi một số đường ngang đẹp trong nền.

                Sử dụng sức mạnh của lề âm, chúng ta có thể bù các nhãn số bên trong

                // Create table data object
                var tableData = {
                   // Get numerical data from table cells
                   chartData: function() {
                      …
                   },
                   // Get heading data from table caption
                   chartHeading: function() {
                      …
                   },
                   // Get legend data from table body
                   chartLegend: function() {
                      …
                   },
                   // Get highest value for y-axis scale
                   chartYMax: function() {
                      …
                   },
                   // Get y-axis data from table cells
                   yLegend: function() {
                      …
                   },
                   // Get x-axis data from table header
                   xLegend: function() {
                      …
                   },
                   // Sort data into groups based on number of columns
                   columnGroups: function() {
                      …
                   }
                }
                9 để chúng chuyển lên và sang trái. Đáng yêu!

                // Wait for the DOM to load everything, just to be safe
                $(document).ready(function() {
                
                   // Create our graph from the data table and specify a container to put the graph in
                   createGraph('#data-table', '.chart');
                
                   // Here be graphs
                   function createGraph(data, container) {
                      // Declare some common variables and container elements
                      …
                
                      // Create the table data object
                      var tableData = {
                         …
                      }
                
                      // Useful variables to access table data
                      …
                
                      // Construct the graph
                      …
                
                      // Set the individual heights of bars
                      function displayGraph(bars) {
                         …
                      }
                
                      // Reset the graph's settings and prepare for display
                      function resetGraph() {
                         …
                         displayGraph(bars);
                      }
                
                      // Helper functions
                      …
                
                      // Finally, display the graph via reset function
                      resetGraph();
                   }
                });
                4

                Bây giờ cho thịt trong bánh sandwich loài có nguy cơ tuyệt chủng của chúng tôi: các thanh. Hãy để bắt đầu với phần tử container cho các thanh và các cột:

                // Wait for the DOM to load everything, just to be safe
                $(document).ready(function() {
                
                   // Create our graph from the data table and specify a container to put the graph in
                   createGraph('#data-table', '.chart');
                
                   // Here be graphs
                   function createGraph(data, container) {
                      // Declare some common variables and container elements
                      …
                
                      // Create the table data object
                      var tableData = {
                         …
                      }
                
                      // Useful variables to access table data
                      …
                
                      // Construct the graph
                      …
                
                      // Set the individual heights of bars
                      function displayGraph(bars) {
                         …
                      }
                
                      // Reset the graph's settings and prepare for display
                      function resetGraph() {
                         …
                         displayGraph(bars);
                      }
                
                      // Helper functions
                      …
                
                      // Finally, display the graph via reset function
                      resetGraph();
                   }
                });
                5

                Không có gì quá phức tạp ở đây. Chúng tôi chỉ đơn giản là thiết lập một số kích thước cho container và đặt

                // Add bars to graph
                barContainer.appendTo(graphContainer);
                
                // Add graph to graph container
                graphContainer.appendTo(figureContainer);
                
                // Add graph container to main container
                figureContainer.appendTo(container);
                1 để đảm bảo nó xuất hiện ở phía trước các dấu trục Y.

                Bây giờ cho mỗi cá nhân

                // Add bars to graph
                barContainer.appendTo(graphContainer);
                
                // Add graph to graph container
                graphContainer.appendTo(figureContainer);
                
                // Add graph container to main container
                figureContainer.appendTo(container);
                2:

                // Wait for the DOM to load everything, just to be safe
                $(document).ready(function() {
                
                   // Create our graph from the data table and specify a container to put the graph in
                   createGraph('#data-table', '.chart');
                
                   // Here be graphs
                   function createGraph(data, container) {
                      // Declare some common variables and container elements
                      …
                
                      // Create the table data object
                      var tableData = {
                         …
                      }
                
                      // Useful variables to access table data
                      …
                
                      // Construct the graph
                      …
                
                      // Set the individual heights of bars
                      function displayGraph(bars) {
                         …
                      }
                
                      // Reset the graph's settings and prepare for display
                      function resetGraph() {
                         …
                         displayGraph(bars);
                      }
                
                      // Helper functions
                      …
                
                      // Finally, display the graph via reset function
                      resetGraph();
                   }
                });
                6

                Các kiểu chính cần lưu ý ở đây là:

                • // Add y-axis to graph
                  var yLegend   = tableData.yLegend();
                  var yAxisList   = $('
                    '); $.each(yLegend, function(i) { var listItem = $('
                  • ' + this + '
                  • ') .appendTo(yAxisList); }); yAxisList.appendTo(graphContainer);
                    8 và
                    // Add bars to graph
                    barContainer.appendTo(graphContainer);
                    
                    // Add graph to graph container
                    graphContainer.appendTo(figureContainer);
                    
                    // Add graph container to main container
                    figureContainer.appendTo(container);
                    4, có nghĩa là các thanh sẽ được gắn vào đáy đồ thị của chúng tôi và lớn lên;
                  • Thanh cho mỗi loài (
                    // Add bars to graph
                    barContainer.appendTo(graphContainer);
                    
                    // Add graph to graph container
                    graphContainer.appendTo(figureContainer);
                    
                    // Add graph container to main container
                    figureContainer.appendTo(container);
                    5,
                    // Add bars to graph
                    barContainer.appendTo(graphContainer);
                    
                    // Add graph to graph container
                    graphContainer.appendTo(figureContainer);
                    
                    // Add graph container to main container
                    figureContainer.appendTo(container);
                    6 và
                    // Add bars to graph
                    barContainer.appendTo(graphContainer);
                    
                    // Add graph to graph container
                    graphContainer.appendTo(figureContainer);
                    
                    // Add graph container to main container
                    figureContainer.appendTo(container);
                    7), sẽ được định vị trong
                    // Add bars to graph
                    barContainer.appendTo(graphContainer);
                    
                    // Add graph to graph container
                    graphContainer.appendTo(figureContainer);
                    
                    // Add graph container to main container
                    figureContainer.appendTo(container);
                    8.

                  Bây giờ, tại sao don lồng chúng tôi giảm thiểu số lượng cạnh sắc nét trên bất kỳ trang nào bằng cách sử dụng thuộc tính

                  // Add bars to graph
                  barContainer.appendTo(graphContainer);
                  
                  // Add graph to graph container
                  graphContainer.appendTo(figureContainer);
                  
                  // Add graph container to main container
                  figureContainer.appendTo(container);
                  9 để làm tròn các cạnh của các góc trên bên trái và trên bên phải của mỗi thanh? OK, vì vậy
                  // Add bars to graph
                  barContainer.appendTo(graphContainer);
                  
                  // Add graph to graph container
                  graphContainer.appendTo(figureContainer);
                  
                  // Add graph container to main container
                  figureContainer.appendTo(container);
                  9 là thực sự cần thiết, nhưng nó thêm một liên lạc tốt đẹp cho các trình duyệt hỗ trợ nó. Rất may, các phiên bản mới nhất của các trình duyệt phổ biến nhất hỗ trợ nó.

                  Bởi vì chúng tôi đã đặt các giá trị từ mỗi ô bảng trong mỗi thanh, chúng tôi có thể thêm một cửa sổ bật lên nhỏ gọn xuất hiện khi bạn di chuột qua một thanh:

                  // Wait for the DOM to load everything, just to be safe
                  $(document).ready(function() {
                  
                     // Create our graph from the data table and specify a container to put the graph in
                     createGraph('#data-table', '.chart');
                  
                     // Here be graphs
                     function createGraph(data, container) {
                        // Declare some common variables and container elements
                        …
                  
                        // Create the table data object
                        var tableData = {
                           …
                        }
                  
                        // Useful variables to access table data
                        …
                  
                        // Construct the graph
                        …
                  
                        // Set the individual heights of bars
                        function displayGraph(bars) {
                           …
                        }
                  
                        // Reset the graph's settings and prepare for display
                        function resetGraph() {
                           …
                           displayGraph(bars);
                        }
                  
                        // Helper functions
                        …
                  
                        // Finally, display the graph via reset function
                        resetGraph();
                     }
                  });
                  7

                  Đầu tiên, cửa sổ bật lên được ẩn khỏi chế độ xem thông qua

                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  1. Sau đó, khi một phần tử
                  // Add bars to graph
                  barContainer.appendTo(graphContainer);
                  
                  // Add graph to graph container
                  graphContainer.appendTo(figureContainer);
                  
                  // Add graph container to main container
                  figureContainer.appendTo(container);
                  2 được bay lơ lửng, chúng tôi đã đặt
                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  3 để đưa nó vào chế độ xem và đặt một
                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  4 âm để làm cho nó xuất hiện trên mỗi thanh.

                  Các thuộc tính

                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  5,
                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  6 và
                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  7 hiện đang được hầu hết các trình duyệt hiện đại hỗ trợ. Trong số các trình duyệt hiện đại này, chỉ có Safari yêu cầu tiền tố nhà cung cấp (
                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  8) để làm cho
                  // Set the individual height of bars
                  function displayGraph(bars, i) {
                     // Changed the way we loop because of issues with $.each not resetting properly
                     if (i < bars.length) {
                        // Animate the height using the jQuery animate() function
                        $(bars[i].bar).animate({
                           height: bars[i].height
                        }, 800);
                        // Wait the specified time, then run the displayGraph() function again for the next bar
                        barTimer = setTimeout(function() {
                           i++;
                           displayGraph(bars, i);
                        }, 100);
                     }
                  }
                  7 hoạt động. Lưu ý rằng các thuộc tính này chỉ đơn giản là các cải tiến cho biểu đồ của chúng tôi và aren cần phải hiểu nó. Đường cơ sở của chúng tôi về Internet Explorer 8 chỉ đơn giản là bỏ qua chúng.

                  Bước cuối cùng của chúng tôi trong việc kết hợp mọi thứ lại với nhau là mã màu mỗi thanh:

                  // Wait for the DOM to load everything, just to be safe
                  $(document).ready(function() {
                  
                     // Create our graph from the data table and specify a container to put the graph in
                     createGraph('#data-table', '.chart');
                  
                     // Here be graphs
                     function createGraph(data, container) {
                        // Declare some common variables and container elements
                        …
                  
                        // Create the table data object
                        var tableData = {
                           …
                        }
                  
                        // Useful variables to access table data
                        …
                  
                        // Construct the graph
                        …
                  
                        // Set the individual heights of bars
                        function displayGraph(bars) {
                           …
                        }
                  
                        // Reset the graph's settings and prepare for display
                        function resetGraph() {
                           …
                           displayGraph(bars);
                        }
                  
                        // Helper functions
                        …
                  
                        // Finally, display the graph via reset function
                        resetGraph();
                     }
                  });
                  8

                  Trong ví dụ này, tôi đã chỉ cần thêm một

                  // Reset graph settings and prepare for display
                  function resetGraph() {
                     // Stop all animations and set the bar's height to 0
                     $.each(bars, function(i) {
                        $(bars[i].bar).stop().css('height', 0);
                     });
                  
                     // Clear timers
                     clearTimeout(barTimer);
                     clearTimeout(graphTimer);
                  
                     // Restart timer
                     graphTimer = setTimeout(function() {
                        displayGraph(bars, 0);
                     }, 200);
                  }
                  0 và
                  // Reset graph settings and prepare for display
                  function resetGraph() {
                     // Stop all animations and set the bar's height to 0
                     $.each(bars, function(i) {
                        $(bars[i].bar).stop().css('height', 0);
                     });
                  
                     // Clear timers
                     clearTimeout(barTimer);
                     clearTimeout(graphTimer);
                  
                     // Restart timer
                     graphTimer = setTimeout(function() {
                        displayGraph(bars, 0);
                     }, 200);
                  }
                  1 gạch theo chiều dọc. Điều này sẽ cập nhật các kiểu cho các thanh và các biểu tượng nhỏ đại diện cho chúng trong truyền thuyết. Tốt đẹp.

                  Và, tin hay không, đó là nó!

                  Thành phẩm

                  Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?

                  Điều đó về kết thúc nó lên. Tôi hy vọng chúng tôi đã làm đủ để cảnh báo công chúng về sự nguy hiểm của dân số quá mức zombie. Tuy nhiên, nhiều hơn thế, tôi hy vọng bạn đã đạt được điều gì đó hữu ích từ hướng dẫn này và bạn sẽ tiếp tục vượt qua ranh giới của những gì có thể được thực hiện trong trình duyệt-đặc biệt là với các tiêu chuẩn web thích hợp và không sử dụng phích cắm của bên thứ ba -Ins. Nếu bạn đã có ý tưởng về cách mở rộng hoặc cải thiện bất cứ điều gì bạn đã thấy ở đây, thì hãy ngần ngại để lại nhận xét bên dưới hoặc tìm tôi trên Twitter @Derek_Mack.

                  Phần thưởng: Giải phóng sức mạnh của CSS3

                  Phần thưởng này không chi tiết như ví dụ chính của chúng tôi. Nó phục vụ chủ yếu như là một chương trình giới thiệu của một số tính năng được xem xét trong đặc tả CSS3.

                  Bởi vì hỗ trợ cho các thuộc tính CSS3 hiện bị hạn chế, nên việc sử dụng chúng. Mặc dù một số tính năng được đề cập ở đây đang tìm đường vào các trình duyệt web khác, nhưng các tính năng dựa trên webkit như Apple Safari và Google Chrome đang dẫn đầu.

                  Chúng ta thực sự có thể tạo biểu đồ của mình bằng cách sử dụng không có hình ảnh nào và thậm chí làm động các thanh bằng CSS thay vì jQuery.

                  Hãy bắt đầu bằng cách xóa các hình ảnh nền khỏi các thanh của chúng tôi, thay thế chúng bằng thuộc tính

                  // Reset graph settings and prepare for display
                  function resetGraph() {
                     // Stop all animations and set the bar's height to 0
                     $.each(bars, function(i) {
                        $(bars[i].bar).stop().css('height', 0);
                     });
                  
                     // Clear timers
                     clearTimeout(barTimer);
                     clearTimeout(graphTimer);
                  
                     // Restart timer
                     graphTimer = setTimeout(function() {
                        displayGraph(bars, 0);
                     }, 200);
                  }
                  2:

                  // Wait for the DOM to load everything, just to be safe
                  $(document).ready(function() {
                  
                     // Create our graph from the data table and specify a container to put the graph in
                     createGraph('#data-table', '.chart');
                  
                     // Here be graphs
                     function createGraph(data, container) {
                        // Declare some common variables and container elements
                        …
                  
                        // Create the table data object
                        var tableData = {
                           …
                        }
                  
                        // Useful variables to access table data
                        …
                  
                        // Construct the graph
                        …
                  
                        // Set the individual heights of bars
                        function displayGraph(bars) {
                           …
                        }
                  
                        // Reset the graph's settings and prepare for display
                        function resetGraph() {
                           …
                           displayGraph(bars);
                        }
                  
                        // Helper functions
                        …
                  
                        // Finally, display the graph via reset function
                        resetGraph();
                     }
                  });
                  9

                  Chúng tôi có thể làm tương tự với các cửa sổ bật lên số nhỏ của chúng tôi:

                  // Declare some common variables and container elements
                  var bars = [];
                  var figureContainer = $('
                  '); var graphContainer = $('
                  '); var barContainer = $('
                  '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
                  0

                  Để biết thêm thông tin về gradient webkit, hãy xem blog Surfin xông Safari.

                  Tiếp tục với các cửa sổ bật lên, hãy để giới thiệu

                  // Reset graph settings and prepare for display
                  function resetGraph() {
                     // Stop all animations and set the bar's height to 0
                     $.each(bars, function(i) {
                        $(bars[i].bar).stop().css('height', 0);
                     });
                  
                     // Clear timers
                     clearTimeout(barTimer);
                     clearTimeout(graphTimer);
                  
                     // Restart timer
                     graphTimer = setTimeout(function() {
                        displayGraph(bars, 0);
                     }, 200);
                  }
                  3. Chuyển đổi CSS rất dễ sử dụng và hiểu. Khi trình duyệt phát hiện sự thay đổi trong một thuộc tính của phần tử (chiều cao, chiều rộng, màu sắc, độ mờ, v.v.), nó sẽ chuyển sang thuộc tính mới.

                  Một lần nữa, hãy tham khảo Surfin xông Safari để biết thêm thông tin về hoạt hình

                  // Reset graph settings and prepare for display
                  function resetGraph() {
                     // Stop all animations and set the bar's height to 0
                     $.each(bars, function(i) {
                        $(bars[i].bar).stop().css('height', 0);
                     });
                  
                     // Clear timers
                     clearTimeout(barTimer);
                     clearTimeout(graphTimer);
                  
                     // Restart timer
                     graphTimer = setTimeout(function() {
                        displayGraph(bars, 0);
                     }, 200);
                  }
                  3 và CSS3.

                  Đây là một ví dụ:

                  // Declare some common variables and container elements
                  var bars = [];
                  var figureContainer = $('
                  '); var graphContainer = $('
                  '); var barContainer = $('
                  '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
                  1

                  Khi bạn di chuột qua thanh, lề và độ mờ của cửa sổ bật lên sẽ thay đổi. Điều này kích hoạt một sự kiện chuyển tiếp theo các thuộc tính chúng tôi đã đặt. Rất tuyệt.

                  Nhờ

                  // Reset graph settings and prepare for display
                  function resetGraph() {
                     // Stop all animations and set the bar's height to 0
                     $.each(bars, function(i) {
                        $(bars[i].bar).stop().css('height', 0);
                     });
                  
                     // Clear timers
                     clearTimeout(barTimer);
                     clearTimeout(graphTimer);
                  
                     // Restart timer
                     graphTimer = setTimeout(function() {
                        displayGraph(bars, 0);
                     }, 200);
                  }
                  3, chúng tôi có thể đơn giản hóa các chức năng JavaScript của mình một chút:

                  // Declare some common variables and container elements
                  var bars = [];
                  var figureContainer = $('
                  '); var graphContainer = $('
                  '); var barContainer = $('
                  '); var data = $(data); var container = $(container); var chartData; var chartYMax; var columnGroups; // Timer variables var barTimer; var graphTimer;
                  2

                  Đây là những điều chính mà chúng tôi đã thay đổi:

                  • Đặt chiều cao của các thanh thông qua hàm jQuery
                    // Reset graph settings and prepare for display
                    function resetGraph() {
                       // Stop all animations and set the bar's height to 0
                       $.each(bars, function(i) {
                          $(bars[i].bar).stop().css('height', 0);
                       });
                    
                       // Clear timers
                       clearTimeout(barTimer);
                       clearTimeout(graphTimer);
                    
                       // Restart timer
                       graphTimer = setTimeout(function() {
                          displayGraph(bars, 0);
                       }, 200);
                    }
                    6 và cho phép các chuyển đổi CSS để chăm sóc hình ảnh động;
                  • Khi đặt lại biểu đồ, tắt chuyển đổi để chiều cao của các thanh được đặt ngay lập tức thành 0.

                  Kiểm tra ví dụ nếu bạn đã cài đặt phiên bản mới nhất của Safari hoặc Chrome.

                  Phần thưởng Ultra-Mega Webkit: Bây giờ trong 3-D!

                  Đối với một cái nhìn lén lút về những gì tương lai nắm giữ, hãy xem một thử nghiệm nhỏ mà tôi đặt cùng nhau, với hiệu ứng 3 chiều và biến đổi CSS. Một lần nữa, nó yêu cầu các phiên bản mới nhất của Safari hoặc Chrome:

                  Như trong ví dụ WebKit trước đây của chúng tôi, không có hình ảnh và tất cả hoạt hình được xử lý thông qua CSS. Hôn mặt tôi!no images, and all animation is handled via CSS. Kiss my face!

                  Tôi có thể nói với bạn những gì làm với tất cả thông tin này. Nhưng tôi cảnh báo bạn về việc lạm dụng tiềm năng của sức mạnh mới của bạn. Theo lời của người bạn của chúng tôi, Captain Planet, thì sức mạnh là của bạn!

                  Sử dụng nó một cách rộng rãi.

                  Đọc thêm

                  • Biểu đồ.js, một thư viện nguồn mở cho các biểu đồ đáp ứng
                  • Hoạt hình chức năng trong thiết kế UX
                  • Nâng cấp hoạt hình CSS với các đường cong chuyển động
                  • Tạo đồ thị với Adobe Illustrator

                  Hướng dẫn can you create graphs in html? - bạn có thể tạo biểu đồ bằng html không?
                  (AL, KW, IL, mRN)

                  Bạn có thể tạo một biểu đồ trong HTML không?

                  Bạn có thể tạo HTML cơ bản cho một biểu đồ theo một số cách. Trong hướng dẫn này, chúng tôi sẽ bắt đầu với một bảng, bởi vì nó sẽ có ý nghĩa nhất về mặt trực quan nếu JavaScript hoặc CSS không được áp dụng. Đó là một dấu kiểm lớn trong cột để tiếp cận. Nhanh!. In this tutorial, we'll start with a table , because it will make the most sense visually if JavaScript or CSS is not applied. That's a big checkmark in the column for accessibility. Quick!

                  Làm cách nào để tạo biểu đồ thanh trong HTML?

                  .
                  Biểu đồ thanh JavaScript .
                  .

                  Làm thế nào để bạn tạo một biểu đồ tương tác trong HTML?

                  Để bắt đầu, chúng tôi sẽ tạo đánh dấu HTML của chúng tôi cho biểu đồ.Chúng tôi sẽ tạo ra một với lớp biểu đồ của lớp.Bên trong điều này, chúng tôi sẽ thêm hai.Cái đầu tiên sẽ có lớp biểu đồ-INFO của Biểu đồ, div này sẽ chứa huyền thoại đồ thị và các nút cho phép chúng tôi chuyển đổi giữa các biểu đồ.

                  Làm thế nào để bạn tạo một biểu đồ trên một trang web?

                  Thực hiện theo các bước để thêm biểu đồ hình tròn Google trên trang web:..
                  Bước 1: Bắt đầu với một trang web cơ bản đơn giản.Thêm một phần tử div Div với ID ID Piechart,:.
                  Bước 2: Thêm tham chiếu.Thêm tham chiếu đến API biểu đồ tại Google.com ..
                  Bước 3: Thêm chức năng JavaScript ..