- 21 phút đọc
- Mã hóa, CSS, jQuery, trực quan hóa dữ liệu, hoạt hình
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.
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!
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ọ.
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:
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;// 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;
- Một yếu tố
8, nơi chúng tôi muốn đặt biểu đồ của chúng tôi vào tài liệu.// 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;
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
1 để lưu trữ dữ liệu;// 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[] { … } }
- Nhận số lượng cột bằng cách đếm các ô bảng [
2] trong hàng đầu tiên;// 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[] { … } }
- Đối với mỗi cột, tìm số lượng hàng trong thân bảng [
3] và tạo một mảng khác để lưu trữ dữ liệu ô 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[] { … } }
- 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
4], sau đó thêm nó vào mảng dữ liệu ô 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[] { … } }
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:
Phá vỡ nó xuống:
- Đối với mỗi cột, tạo một container
6;// 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[] { … } }
- 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 [
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ó;// 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[] { … } }
- Thêm thuộc tính đánh dấu vào cột, áp dụng lớp CSS của
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;// 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[] { … } }
- Thêm đối tượng vào mảng
0 của chúng tôi để chúng tôi có thể truy cập dữ liệu sau;// 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; }
- 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ự [
1] để chứa các mục danh sách của chúng tô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; }
- Vòng lặp qua dữ liệu nhãn và tạo một mục danh sách [
2] cho mỗi nhãn, gói mỗi nhãn trong mộ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; }
9;// 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[] { … } }
- Đí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ố:
8 để lặp qua,// 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; }
- Một chỉ mục [
9] từ đó bắt đầu lặp lại [bắt đầu 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; }
0].// 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]; }];
Hãy để chia nhỏ phần còn lại:
- Nếu giá trị của
9 nhỏ hơn số lượng thanh, thì hãy tiếp tục đ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; }
- Nhận thanh hiện tại từ mảng bằng cách sử dụng giá trị của
9;// 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; }
- 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
3];// 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]; }]; - Chờ 100 mili giây;
- Tăng
9 bằng 1 và lặp lại quy trình cho thanh tiếp theo.// 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; }
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
4 để làm động thanh đầu tiên [tại Index// 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].// 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]; }];
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[];
}
}];
0Xong. 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[];
}
}];
1Bâ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[];
}
}];
2Trụ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[];
}
}];
3Trụ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[];
}
}];
4Bâ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[];
}
}];
5Khô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[];
}
}];
6Các kiểu chính cần lưu ý ở đây là:
8 và// Add y-axis to graph var yLegend = tableData.yLegend[]; var yAxisList = $['
- ' + this + '
'] .appendTo[yAxisList]; }]; yAxisList.appendTo[graphContainer];
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;// Add bars to graph barContainer.appendTo[graphContainer]; // Add graph to graph container graphContainer.appendTo[figureContainer]; // Add graph container to main container figureContainer.appendTo[container];
- Thanh cho mỗi loài [
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.// Add bars to graph barContainer.appendTo[graphContainer]; // Add graph to graph container graphContainer.appendTo[figureContainer]; // Add graph container to main container figureContainer.appendTo[container];
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[];
}
}];
8Trong 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
Đ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[];
}
}];
9Chú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;
1Khi 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
6 và cho phép các chuyển đổi CSS để chăm sóc hình ảnh động;// 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]; }
- 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