Vẽ đồ thị thời gian thực bằng javascript. Biểu đồ hình tròn với jQuery
Nếu khách hàng hoặc khách hàng của bạn cần truyền tải bất kỳ loại báo cáo nào cũng như một số so sánh, các biểu đồ phổ biến nhất sẽ giúp bạn rất nhiều. Nói chung, chúng được tạo ra cho việc này. Để giúp bạn tìm kiếm dễ dàng hơn, như mọi khi, tôi giới thiệu cho bạn tuyển tập 9 thư viện đồ họa khác nhau trong Javascript. Những đồ họa này khá hữu dụng và cũng có hình ảnh động đẹp mắt sẽ khiến bất kỳ người dùng nào cũng thích thú.
2. Biểu đồ.JSThư viện biểu đồ lớn có hỗ trợ thiết kế thích ứng. SVG cũng được sử dụng trong đồ họa.
Thư viện tuyệt vời với số lượng lớn các ví dụ. Về cơ bản, những đồ họa này đơn giản cả về hình thức lẫn cách cài đặt nhưng chúng hoàn thành đầy đủ nhiệm vụ chính của mình.
Đây là một plugin JQuery để tạo đồ họa tương tác cho trang web. TRONG trong trường hợp này tại đây bạn có thể phóng to, thêm và xóa các phần tử khác nhau, xoay và hơn thế nữa. Plugin này đi kèm với một lượng lớn các loại sơ đồ đã có sẵn.
Đây là một thư viện đồ thị và sơ đồ khổng lồ và phong phú do người Trung Quốc tạo ra. Cô ấy ủng hộ số lượng lớn thông tin.
Một thư viện đơn giản mà bạn có thể dễ dàng và nhanh chóng thêm biểu đồ thông thường hoặc một số loại sơ đồ vào trang web.
Một thư viện tuyệt vời khác thực hiện những gì nó phải làm. Có hình ảnh động đẹp, chức năng và dễ cài đặt.
Bạn có thể tạo biểu đồ tương tác bằng cách sử dụng API của Google. Ngoài ra còn có các phòng trưng bày với các sơ đồ đã được tạo sẵn để xem thư viện này có thể làm gì.
Dễ dàng cài đặt và cấu hình thư viện đồ thị và biểu đồ. Chỉ cần nhặt nó lên và cài đặt nó.
Thường trong các ứng dụng web hoặc phần mềm Chúng tôi cần cung cấp một số thông tin cho người dùng. Trước đây, thông tin như thống kê lưu lượng truy cập hoặc số lần nhấp chuột được cung cấp bằng một bài kiểm tra và con số đơn giản. Phương pháp này khá đơn giản và đã lỗi thời.
Với sự cải tiến của Internet, cần phải thu thập và tính toán nhiều dữ liệu hơn. Vì vậy, việc hiển thị kết quả ở dạng văn bản thuần túy khó có thể được như vậy phương pháp hiệu quả. Ngày nay, văn bản đã được thay thế bằng đồ thị và sơ đồ, qua đó người dùng dễ tiếp cận và dễ hiểu hơn. Theo nghĩa đen, ngay lập tức, bằng cách nhìn vào biểu đồ, người dùng có thể xác định phần trăm tăng hoặc giảm lưu lượng truy cập đã tăng kể từ lần kiểm tra cuối cùng. Điều này giúp đẩy nhanh quá trình xác định số liệu cụ thể từ thông tin tính toán.
Có nhiều theo nhiều cách khác nhau hiển thị thông tin, nhưng mục đích của từng thành phần đồ họa (biểu đồ hình tròn, biểu đồ thanh, v.v.) là như nhau - để chuyển đổi các chữ cái và số thành phần trăm và hiển thị nó một cách trực quan.
Dưới đây chúng tôi đã cung cấp danh sách các thư viện biểu đồ có thể hữu ích cho bạn nếu bạn quyết định hiển thị số liệu đọc văn bản của mình dưới dạng biểu đồ.
- Thư viện đồ thị và sơ đồ
Trục đại diện cho nền tảng miễn phíđể trực quan hóa dữ liệu, được thiết kế cho người mới bắt đầu và nhà phát triển nâng cao. Nó có thể tạo ra cả các thành phần trực quan hóa sơ bộ cũng như các mô hình trừu tượng và các lớp hình ảnh, mang lại cho bạn khả năng tạo các hình ảnh trực quan độc đáo.
Biểu đồ Am là tập hợp các biểu đồ trong Flash dành cho trang web hoặc sản phẩm dựa trên web của bạn. Am Charts cho phép bạn trích xuất thông tin từ các tệp CSV hoặc XML đơn giản hoặc họ có thể đọc dữ liệu động và chuyển đổi dữ liệu đó bằng PHP, .NET, Java, Ruby on Rails, Perl, ColdFusion và nhiều ngôn ngữ lập trình khác.
Deensoft là mới thư viện miễn phí, sử dụng Prototype và Canvas để tạo sơ đồ hấp dẫn. Động lực mạnh mẽ cho thư viện này là Flot, Flotr và PlotKit. Mục tiêu của thư viện là sự tự do tối đa trong thiết kế và dễ sử dụng.
Ejschart thực sự dễ thiết kế. Biểu đồ javascript của Emprise cung cấp cho bạn tất cả các công cụ bạn cần để nhanh chóng xuất bản dữ liệu bạn cần ở nhiều định dạng khác nhau. Biểu đồ javascript của Emprise chắc chắn sẽ trở thành công cụ yêu thích của bạn do tính chất của nó khả năng rộng lớn và một hệ thống đơn giản để sử dụng.
EzcomComponents sẽ cho phép bạn tạo sơ đồ theo nhiều biến thể khác nhau. Cơ chế xuất sẽ cho phép bạn tạo hình ảnh từ sơ đồ định dạng khác nhau, cũng như cả tùy chọn 2D và 3D.
Filamentgroup sử dụng javascript để lấy dữ liệu từ bảng HTML và tạo biểu đồ bằng phần tử canvas HTML 5. Công cụ này hiện có mã của bên thứ ba được đóng gói dưới dạng plugin jQuery mới.
Flot là một thư viện javascript để vẽ đồ thị hoàn hảo trong jQuery. Với công cụ này, bạn có thể tạo ra các bản vẽ đồ họa. Điểm nhấn là tính dễ sử dụng (bạn có thể sử dụng nhiều tùy chọn), vẻ ngoài hấp dẫn và các tính năng hữu ích khác.
Nói chung, Biểu đồ bay là một tập hợp các tệp SWF cung cấp khả năng trực quan hóa dữ liệu. Với Fly Charts, bạn có thể tạo các biểu đồ nhỏ gọn, có tính tương tác và hấp dẫn chỉ trong một phút. Công cụ này không yêu cầu bất kỳ quá trình cài đặt nào và có thể hoạt động với bất kỳ ngôn ngữ kịch bản nào.
Biểu đồ kết hợp có thể dễ dàng được sử dụng trong các ứng dụng web động, trang web tĩnh và có thể được kết hợp với javascript để tạo các ứng dụng AJAX. Bản demo có thể là một cách tuyệt vời để cho bạn thấy những gì bạn có thể làm miễn phí trong Biểu đồ kết hợp.
API biểu đồ của Google là một công cụ rất đơn giản mà bạn có thể tạo biểu đồ từ dữ liệu và nhúng chúng vào trang web. Bạn tích hợp thông tin và tham số định dạng bằng cách sử dụng yêu cầu HTTP và Google sẽ phản hồi bằng hình ảnh có sơ đồ ở định dạng PNG. Nhiều định dạng biểu đồ khác nhau được hỗ trợ và bằng cách gửi yêu cầu thẻ hình ảnh, bạn có thể dễ dàng chèn biểu đồ vào trang web.
Biểu đồ kiểu là một công nghệ tiên tiến cho phép bạn tạo biểu đồ động cho trang web của mình. Hướng dẫn này sẽ thông báo cho bạn về tất cả các tính năng của Style Chart.
Bluff là một cổng javascript của thư viện đồ họa Gruff dành cho Ruby. Công cụ này được thiết kế để hỗ trợ tất cả các tính năng của Gruff nhưng có sự khác biệt tối thiểu
JFreeChart là một thư viện biểu đồ Java hoàn chỉnh cho phép các nhà phát triển tạo sơ đồ chuyên nghiệp trong các ứng dụng của bạn. Công cụ này có thiết kế linh hoạt, dễ thay đổi hoặc nâng cao và hướng đến các ứng dụng cho cả nhà phát triển và khách hàng.
Việc tính toán và vẽ các đường, trục, bóng và thậm chí cả lưới đều được điều khiển thông qua trình kết xuất plug-in. Khả năng chỉnh sửa không chỉ các thành phần vẽ, plugin hoàn toàn có thể mở rộng chức năng.
Biểu đồ JS là một trình tạo biểu đồ JavaScript yêu cầu ít hoặc không cần mã! Biểu đồ JS cho phép bạn tạo biểu đồ một cách dễ dàng nhiều mẫu khác nhau(trụ cột, hình tròn, v.v.).
Plotkit là một thư viện JS để vẽ đồ thị và sơ đồ. Ngoài ra còn có hỗ trợ cho HTML và SVG thông qua Adobe SVG Viewer.
Khả năng tuyệt vời để tạo biểu đồ và đồ thị hấp dẫn từ dữ liệu XML. XML cung cấp tính linh hoạt để tạo dữ liệu và Flash cung cấp các tùy chọn tốt nhất cho biểu đồ và đồ thị.
18.
pChart là một khung định hướng lớp PHP được thiết kế để tạo các biểu đồ mượt mà. Thông tin có thể được yêu cầu từ tệp SQL, CSV hoặc nhập thủ công.
Mục đích của công cụ gRaphael là tạo sơ đồ hấp dẫn cho trang web của bạn. Công cụ này dựa trên thư viện đồ họa Raphael. Xem bản demo để có cái nhìn sâu hơn về hoạt động của biểu đồ tĩnh và biểu đồ tương tác.
Visifire là một bộ công cụ miễn phíđể trực quan hóa dữ liệu, được phát triển bởi Microsoft Silverlight và WPF. Visifire có thể được sử dụng với cả ứng dụng WPF và Silverlight. Sử dụng cùng một API, biểu đồ trong cả hai môi trường (WPF và Silverlight) có thể được sửa đổi chỉ trong một phút!
- Bắt đầu vẽ!
Mặc dù một số thư viện vẫn yêu cầu kiến thức lập trình tối thiểu và một số thậm chí có thể khá phức tạp và khó hiểu, nhưng tất cả chúng đều nhằm mục đích cung cấp quy trình hiệu quả nhất để tạo trực quan hóa, biểu đồ và đồ thị. Về cơ bản, thư viện càng phức tạp thì càng có nhiều cơ hội để tạo một dự án cụ thể.
Nếu chúng tôi quên đề cập đến thư viện tuyệt vời này hoặc thư viện tuyệt vời kia, vui lòng làm điều đó cho chúng tôi trong phần bình luận! Cảm ơn trước!
Bạn đã học cách cài đặt và sử dụng Chart.js. Bạn cũng đã tìm hiểu một số tùy chọn chung cho phép bạn thay đổi phông chữ và chú giải công cụ cho các biểu đồ khác nhau. Trong hướng dẫn này, bạn biết cách tạo biểu đồ đường và cột bằng Chart.js.
Tạo biểu đồ đườngBiểu đồ đường rất hữu ích khi bạn muốn hiển thị sự thay đổi giá trị của một biến nhất định so với những thay đổi ở một số biến khác. Biến khác thường là tạm thời. Ví dụ: biểu đồ đường có thể được sử dụng để hiển thị tốc độ của xe trong khoảng thời gian cụ thể.
Chart.js cho phép bạn tạo biểu đồ dạng đường bằng cách đặt loại thành line . Đây là một ví dụ:
Var lineChart = new Chart(speedCanvas, ( type: "line", data: speedData, options: ChartOptions ));
Bây giờ chúng tôi sẽ cung cấp dữ liệu cũng như các tham số cấu hình mà chúng tôi cần để xây dựng biểu đồ đường.
Var speedData = ( nhãn: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], bộ dữ liệu: [( nhãn: "Tốc độ ô tô", dữ liệu: , )] ); var ChartOptions = ( legend: ( display: true, location: "top", labels: ( boxWidth: 80, fontColor: "black" ) ) );
Trong phần này, chúng tôi sẽ tập trung vào các tùy chọn khác nhau được thiết kế đặc biệt để sửa đổi biểu đồ đường. Tất cả các thông số và dữ liệu chúng tôi đã cung cấp ở trên tạo nên biểu đồ sau.
Màu của vùng dưới đường cong được xác định bằng phím BackgroundColor. Tất cả các biểu đồ dạng đường được tạo bằng phương pháp này sẽ được tô bằng màu này. Bạn có thể đặt phím tô thành sai nếu bạn chỉ muốn vẽ một đường thẳng mà không tô bất kỳ màu nào vào vùng ngày.
Một điều khác mà bạn có thể nhận thấy là chúng tôi sử dụng các con trỏ dữ liệu (điểm) riêng lẻ để vẽ biểu đồ. Thư viện tự động nội suy giá trị của tất cả các điểm khác bằng thuật toán tích hợp.
Theo mặc định, các điểm được vẽ bằng phép nội suy bậc ba có trọng số tùy chỉnh. Tuy nhiên, bạn có thể đặt khóa cubInterpolationMode thành đơn điệu để vẽ đồ thị điểm chính xác hơn nếu đồ thị bạn đang tạo được xác định bởi phương trình y = f (x) . Độ co giãn của đường cong Bezier được xác định bằng phím lineTension. Bạn có thể đặt giá trị của nó bằng 0để vẽ các đường thẳng. Lưu ý rằng khóa này sẽ bị bỏ qua nếu cubInterpolationMode đã được chỉ định.
Bạn cũng có thể đặt màu và chiều rộng đường viền bằng cách sử dụng các phím borderColor và borderWidth. Nếu bạn muốn vẽ biểu đồ bằng đường chấm chấm thay vì đường liền nét, bạn có thể sử dụng phím borderDash. Nó lấy một mảng làm giá trị, các phần tử trong đó xác định độ dài và khoảng cách của các nét tương ứng.
Sự xuất hiện của các điểm được vẽ có thể được kiểm soát bằng cách sử dụng các thuộc tính pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius và pointHoverRadius. Ngoài ra còn có phím pointHitRadius, xác định khoảng cách từ đó các điểm trên biểu đồ sẽ bắt đầu tương tác với chuột.
Var speedData = ( nhãn: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], bộ dữ liệu: [( nhãn: "Tốc độ ô tô", dữ liệu: , lineTension: 0, fill: false, borderColor: "orange", BackgroundColor: "transparent", borderDash: , pointBorderColor: "orange", pointBackgroundColor: "rgba(255,150,0,0.5)", pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: "orthRounded" )] );
Đối tượng speedData ở trên hiển thị các điểm dữ liệu giống như biểu đồ trước đó, nhưng với các giá trị khác nhau được đặt cho tất cả các thuộc tính.
Bạn cũng có thể vẽ nhiều đường trên cùng một biểu đồ và đặt các tham số khác nhau để vẽ từng đường như thế này:
Var dataFirst = ( nhãn: "Ô tô A - Tốc độ (mph)", dữ liệu: , lineTension: 0.3, // Set More Options ); var dataSecond = ( label: "Ô tô B - Tốc độ (mph)", data: , // Đặt thêm tùy chọn ); var speedData = ( nhãn: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], bộ dữ liệu: ); var lineChart = new Chart(speedCanvas, ( type: "line", data: speedData ));
Tạo biểu đồ cộtBiểu đồ cột (hoặc biểu đồ) rất hữu ích khi bạn muốn so sánh một phép đo cho các đối tượng khác nhau - ví dụ: số lượng ô tô được bán bởi các công ty khác nhau hoặc số lượng người của một số công ty nhất định. nhóm tuổi trong thành phố. Bạn có thể tạo biểu đồ thanh trong Chart.js bằng cách đặt phím loại thành bar . Theo mặc định, thao tác này sẽ tạo biểu đồ có thanh dọc. Nếu bạn muốn tạo biểu đồ với cột ngang, bạn nên đặt loại là HorizontalBar .
Var barChart = Biểu đồ mới (mật độCanvas, ( loại: "thanh", dữ liệu: mật độData, tùy chọn: biểu đồOptions ));
Hãy tạo một biểu đồ hiển thị mật độ của tất cả các hành tinh trong hệ mặt trời của chúng ta. Dữ liệu mật độ được lấy từ Danh sách thông tin hành tinh do NASA cung cấp.
Var mật độData = ( nhãn: "Mật độ hành tinh (kg/m3)", dữ liệu: ); var barChart = new Chart(denseCanvas, ( type: "bar", data: ( labels: ["Sao Thủy", "Sao Kim", "Trái Đất", "Sao Hỏa", "Sao Mộc", "Sao Thổ", "Sao Thiên Vương", " Neptune"], bộ dữ liệu: ) ));
Các tùy chọn ở trên sẽ tạo biểu đồ sau:
Tương tự như trong biểu đồ đường, các sọc có màu xám nhạt. Bạn có thể thay đổi màu của các thanh bằng phím BackgroundColor. Tương tự, màu sắc và chiều rộng của đường viền của các sọc khác nhau có thể được đặt bằng cách sử dụng các phím borderColor và borderWidth.
Nếu bạn muốn thư viện không vẽ đường viền cho một cạnh cụ thể, bạn có thể chỉ định cạnh đó làm giá trị cho khóa borderSkipped. Bạn có thể đặt các giá trị sau: trên, trái, dưới hoặc phải. Bạn cũng có thể thay đổi đường viền và màu nền của các thanh khác nhau mà bạn nhìn thấy khi di chuột qua chúng bằng cách sử dụng hoverBorderColor và hoverBackgroundColor .
Kích thước của các cột trong biểu đồ thanh ở trên được tính toán tự động. Tuy nhiên, bạn có thể kiểm soát độ rộng của từng cột bằng cách sử dụng thuộc tính barThickness và barPercentage. Phím barThickness được sử dụng để đặt độ dày của các cột tính bằng pixel và barPercentage được sử dụng để đặt độ dày theo phần trăm của chiều rộng nhóm có sẵn.
Hãy làm cho biểu đồ mật độ (hành tinh) trở nên thú vị hơn bằng cách ghi đè các giá trị mặc định cho biểu đồ bằng mã sau đây.
Var mật độData = ( nhãn: "Mật độ hành tinh (kg/m3)", dữ liệu: , màu nền: [ "rgba(0, 99, 132, 0.6)", "rgba(30, 99, 132, 0.6)", " rgba(60, 99, 132, 0.6)", "rgba(90, 99, 132, 0.6)", "rgba(120, 99, 132, 0.6)", "rgba(150, 99, 132, 0.6)" , "rgba(180, 99, 132, 0.6)", "rgba(210, 99, 132, 0.6)", "rgba(240, 99, 132, 0.6)" ], borderColor: [ "rgba(0, 99 , 132, 1)", "rgba(30, 99, 132, 1)", "rgba(60, 99, 132, 1)", "rgba(90, 99, 132, 1)", "rgba(120 , 99, 132, 1), "rgba(150, 99, 132, 1)", "rgba(180, 99, 132, 1)", "rgba(210, 99, 132, 1)", "rgba ( 240, 99, 132, 1)" ], borderWidth: 2, hoverBorderWidth: 0 ); var biểu đồOptions = ( tỉ lệ: ( yAxes: [( barPercentage: 0.5 )] ), các phần tử: ( hình chữ nhật: ( borderSkipped: "left", ) ) ); var barChart = new Chart(denseCanvas, ( type: "horizontalBar", data: ( nhãn: ["Sao Thủy", "Sao Kim", "Trái Đất", "Sao Hỏa", "Sao Mộc", "Sao Thổ", "Sao Thiên Vương", " Neptune"], bộ dữ liệu: , ), tùy chọn: ChartOptions ));
Đối tượng mật độData được sử dụng để thiết lập ranh giới và màu nền cột. Có hai điều cần lưu ý trong đoạn mã trên. Đầu tiên, các giá trị của thuộc tính barPercentage và borderSkipped được đặt bên trong đối tượng ChartOptions thay vì đối tượng dataDensity.
Thứ hai, lần này loại biểu đồ được đặt thành HorizontalBar . Điều đó cũng có nghĩa là bạn sẽ phải thay đổi giá trị barThickness và barPercentage cho trục Y thay vì trục X để các giá trị này có tác dụng gì lên các cột.
Các tùy chọn trên sẽ tạo biểu đồ sau.
Bạn cũng có thể vẽ nhiều tập dữ liệu trên cùng một biểu đồ bằng cách gán id trục cụ thể cho một tập dữ liệu cụ thể. Khóa xAxisID được sử dụng để gán id cho bất kỳ trục X nào trong tập dữ liệu của bạn. Tương tự, khóa yAxisID được sử dụng để gán ID cho bất kỳ trục nào trong tập dữ liệu của bạn. Cả hai trục cũng có khóa id mà bạn có thể sử dụng để gán mã định danh duy nhất cho chúng.
Nếu đoạn cuối hơi khó hiểu thì ví dụ sau sẽ giúp bạn hiểu rõ hơn.
Var mật độData = ( nhãn: "Mật độ hành tinh (kg/m3)", dữ liệu: , nềnColor: "rgba(0, 99, 132, 0.6)", borderColor: "rgba(0, 99, 132, 1)", yAxisID: "mật độ trục y"); var GravityData = ( label: "Trọng lực của hành tinh (m/s2)", data: , BackgroundColor: "rgba(99, 132, 0, 0.6)", borderColor: "rgba(99, 132, 0, 1)", yAxisID: "trục y" ); var PlanetData = ( nhãn: ["Sao Thủy", "Sao Kim", "Trái Đất", "Sao Hỏa", "Sao Mộc", "Sao Thổ", "Sao Thiên Vương", "Sao Hải Vương"], bộ dữ liệu: ); var biểu đồOptions = ( tỉ lệ: ( xAxes: [( barPercentage: 1, CategoryPercentage: 0.6 )], yAxes: [( id: "y-axis-dense" ), ( id: "y-axis-Gravity" )] ) ) ; var barChart = new Chart(denseCanvas, ( type: "bar", data: PlanetData, options: ChartOptions ));
Ở đây, chúng tôi đã tạo hai trục Y có ID duy nhất và chúng đã được gán cho các tập dữ liệu riêng biệt bằng khóa yAxisID. Các phím barPercentage và CategoryPercentage được sử dụng để nhóm các cột cho từng hành tinh. Đặt danh mụcPhần trăm thành nhiều hơn giá trị thấpđể tăng khoảng cách giữa các cột của các hành tinh khác nhau. Tương tự, bằng cách đặt barPercentage thành giá trị cao hơn, chúng ta sẽ giảm khoảng cách giữa các thanh của cùng một hành tinh.
Cuối cùngTrong hướng dẫn này, chúng tôi đã đề cập đến tất cả các khía cạnh của biểu đồ đường và cột trong Chart.js. Bây giờ bạn có thể tạo các biểu đồ cơ bản, sửa đổi chúng vẻ bề ngoài và hiển thị nhiều tập dữ liệu trên một biểu đồ mà không gặp vấn đề gì. Trong phần tiếp theo của loạt bài này, bạn sẽ tìm hiểu về biểu đồ hướng tâm và cực trong Chart.js.
Tôi hy vọng bạn thích hướng dẫn này. Nếu bạn có bất kỳ câu hỏi nào, xin vui lòng gửi chúng trong các ý kiến.
- Dịch
Hầu như không thể tưởng tượng được một bảng điều khiển không có biểu đồ và đồ thị. Họ hiển thị số liệu thống kê phức tạp một cách nhanh chóng và hiệu quả. Hơn nữa, một sơ đồ tốt cũng cải thiện thiết kế tổng thể của trang web của bạn.
Trong bài viết này, tôi sẽ giới thiệu cho bạn một số thư viện JavaScript tốt nhất để lập sơ đồ (và bảng tổng hợp). Những thư viện này sẽ giúp bạn tạo đồ họa đẹp và có thể tùy chỉnh cho các dự án trong tương lai của bạn.
Mặc dù hầu hết các thư viện đều miễn phí và có thể phân phối lại, một số trong số chúng có phiên bản trả phí với chức năng bổ sung.
D3.js - tài liệu tập trung vào dữ liệu Ngày nay, khi chúng ta nghĩ về biểu đồ, điều đầu tiên chúng ta nghĩ đến là D3.js. mã nguồn mở project, D3.js chắc chắn cung cấp nhiều tính năng hữu ích mà hầu hết các thư viện hiện có đều thiếu. Các tính năng như “ Nhập và Exit”, các chuyển đổi mạnh mẽ và cú pháp tương tự như jQuery hoặc Prototype khiến nó trở thành một trong những thư viện JavaScript tốt nhất để tạo đồ thị và biểu đồ. Trong D3.js, chúng được tạo bằng HTML, SVG và CSS.Không giống như nhiều thư viện JavaScript khác, D3.js không có sẵn các biểu đồ dựng sẵn ngay khi sử dụng. Tuy nhiên, bạn có thể xem danh sách các biểu đồ được tạo bằng D3.js để có ý tưởng chung.
D3.js không hoạt động bình thường với các trình duyệt cũ hơn như IE8. Nhưng bạn luôn có thể sử dụng các plugin như plugin aight để tương thích giữa nhiều trình duyệt.
D3.js trước đây đã được sử dụng rộng rãi trên các trang web như NYTimes, Uber và Weather.com
Biểu đồ Google
Google Charts là thư viện JavaScript mà tôi thường xuyên sử dụng để tạo biểu đồ một cách đơn giản và dễ dàng. Cung cấp nhiều loại biểu đồ dựng sẵn như biểu đồ thanh kết hợp, biểu đồ thanh, biểu đồ lịch, biểu đồ hình tròn, biểu đồ địa lý, v.v.
Biểu đồ của Google cũng có nhiều cài đặt cấu hình có thể giúp bạn thay đổi giao diện của biểu đồ. Đồ họa được tạo bằng HTML5/SVG để đảm bảo khả năng tương thích giữa nhiều trình duyệt và khả năng di chuyển đa nền tảng với iPhone, iPad và Android. Cũng chứa VML để hỗ trợ các phiên bản IE cũ hơn.
Highcharts JS
Highcharts JS là một thư viện biểu đồ rất phổ biến khác. Nó đi kèm với một số lượng lớn các hình ảnh động thuộc nhiều loại khác nhau có thể thu hút nhiều sự chú ý đến trang web của bạn. Giống như các thư viện khác, HighchartsJS chứa nhiều biểu đồ được tạo sẵn: spline, hình dạng, kết hợp, cột, biểu đồ, hình tròn, phân tán, v.v.
Một trong những điều nhất lợi ích tuyệt vờiỨng dụng HighchartsJS - tương thích với các trình duyệt cũ hơn như Internet Explorer 6. Các trình duyệt tiêu chuẩn sử dụng SVG để hiển thị biểu đồ. Trong IE cũ, đồ thị được xây dựng thông qua VML.
Mặc dù HighchartsJS miễn phí cho mục đích sử dụng cá nhân nhưng bạn cần mua giấy phép để sử dụng cho mục đích thương mại.
Biểu đồ kết hợp
Fusioncharts là một trong những thư viện JavaScript lâu đời nhất, được phát hành lần đầu tiên vào năm 2002. Đồ thị được tạo bằng HTML5/SVG và VML để có tính di động và khả năng tương thích tốt hơn.
Không giống như nhiều thư viện, Fusioncharts cung cấp khả năng phân tích cả dữ liệu JSON và XML. Bạn cũng có thể xuất các biểu đồ này ở 3 định dạng khác nhau: PNG, JPG và PDF.
Fusioncharts tương thích cao với các trình duyệt cũ hơn như IE6. Và vì lý do này, nó đã trở thành một trong những thư viện được ưa thích nhất trong nhiều tổ chức thương mại.
Bạn có thể sử dụng miễn phí phiên bản có hình mờ của Fusioncharts trong cả dự án cá nhân và thương mại. Tuy nhiên, bạn cần phải mua giấy phép để loại bỏ hình mờ.
Flot
Flot là thư viện JavaScript dành cho JQuery, cho phép bạn tạo đồ thị/biểu đồ. Một trong những thư viện sơ đồ lâu đời nhất và phổ biến nhất.
Flot hỗ trợ biểu đồ thanh, biểu đồ phân tán, biểu đồ thanh, biểu đồ cột và bất kỳ sự kết hợp nào của các loại biểu đồ này. Cũng tương thích với các trình duyệt cũ hơn như IE 6 và Firefox 2.
Flot hoàn toàn miễn phí, hỗ trợ thương mại cung cấp bởi yêu cầu đặc biệt nhà phát triển. Dưới đây là danh sách các ví dụ về biểu đồ được tạo trong Flot.
amCharts
amCharts chắc chắn là một trong những thư viện biểu đồ đẹp nhất hiện có. Nó được chia hoàn toàn thành 3 loại độc lập: Biểu đồ JavaScript, Biểu đồ bản đồ (amMaps) và biểu đồ chứng khoán.
AmMaps là ứng dụng tôi yêu thích nhất trong ba ứng dụng trên. Cung cấp các tính năng như bản đồ nhiệt, vẽ đường, thêm văn bản vào bản đồ, tải biểu tượng hoặc ảnh lên đầu bản đồ của bạn, thay đổi tỷ lệ, v.v.
amCharts sử dụng SVG để hiển thị biểu đồ chỉ hoạt động trong các trình duyệt hiện đại. Đồ thị có thể không hiển thị chính xác trong IE phiên bản dưới 9.
Biểu đồ EJS được cung cấp miễn phí và phiên bản trả phí. Phiên bản miễn phí có một hạn chế là không cho phép bạn sử dụng nhiều hơn 1 biểu đồ trên mỗi trang và nhiều hơn hai chuỗi (số) trên mỗi biểu đồ. Kiểm tra chi tiết giá cả.
biểu đồ uv
uvCharts là một thư viện JavaScript mã nguồn mở tuyên bố có hơn 100 tùy chọn cấu hình. Cô ấy có 12 biểu đồ tiêu chuẩn khác nhau thẳng ra khỏi hộp.
UvCharts được xây dựng trên thư viện D3.js. Dự án này hứa hẹn sẽ loại bỏ tất cả các sắc thái phức tạp của mã hóa D3.js và cung cấp khả năng triển khai biểu đồ dễ dàng chế độ xem chuẩn. uvCharts được tạo bằng SVG, HTML và CSS.
Kết luận Bây giờ việc lựa chọn thư viện sơ đồ tốt nhất cho các dự án trong tương lai là tùy thuộc vào bạn. Các nhà phát triển cần toàn quyền kiểm soát qua đồ thị thì chắc chắn họ sẽ chọn D3.js. Hầu hết các thư viện trên đều hỗ trợ tốt trên diễn đàn Stackoverflow.Tôi hy vọng bạn thích bài viết này. Chúc bạn ngày mới tốt lành.
Nếu trang web của bạn sử dụng nhiều dữ liệu và bạn sẽ cần dễ dàng trực quan hóa dữ liệu đó, thường sử dụng thư viện Biểu đồ JavaScript. Tuy nhiên, có hàng chục thư viện như vậy và tất cả chúng đều có những khả năng hơi khác nhau.
Trong bài viết này, chúng ta sẽ xem xét AnyChart qua 10 ví dụ phong cách nhưng dễ sử dụng. AnyChart rất phù hợp cho nhu cầu trực quan hóa dữ liệu của bạn và khả năng xử lý dữ liệu ở hầu hết mọi định dạng một cách dễ dàng.
Tại sao AnyChartAnyChart là một thư viện thương mại và miễn phí cho mọi mục đích sử dụng phi thương mại. Nó đã được chứng minh rất tốt và đã có mặt trên thị trường trong hơn 10 năm. Ban đầu tôi sử dụng AnyChart dựa trên Flash, nhưng sau đó chuyển sang JavaScript thuần túy với kết xuất SVG / VML.
API AnyChart rất linh hoạt và cho phép bạn thay đổi hầu hết mọi khía cạnh của biểu đồ một cách nhanh chóng trong thời gian chạy.
AnyChart - dòng sản phẩm- AnyChart - được thiết kế để tạo biểu đồ tương tác thuộc tất cả các loại chính
- AnyStock - được thiết kế để trực quan hóa bộ lớn dữ liệu dựa trên ngày/giờ
- AnyMap - dành cho bản đồ địa lý và địa điểm
- AnyGantt - dành cho các giải pháp quản lý dự án và tài nguyên (biểu đồ Gantt, tài nguyên, PERT)
Tuy nhiên, những thư viện này có thể được coi là một thư viện biểu đồ JavaScript (HTML5) lớn. Tất cả chúng đều có cùng một API, tất cả các biểu đồ đều được cấu hình gần như giống hệt nhau, chúng có các chủ đề, cài đặt và cách tải dữ liệu chung.
Bắt đầu nhanh chóng với AnyChartĐể bắt đầu sử dụng AnyChart trên trang HTML của bạn, bạn chỉ cần thực hiện ba việc đơn giản. Hai cái đầu tiên bao gồm một liên kết đến tập tin JavaScript thư viện và cung cấp phần tử HTML ở cấp khối.
Đây là mẫu HTML bạn có thể sử dụng:
html, body, #container ( chiều rộng: 100%; chiều cao: 100%; ) Ví dụ cơ bản về AnyChart // Mã AnyChart tại đây
Thứ ba là sự bổ sung Mã JavaScript tạo ra một biểu đồ cột tương tác đơn giản của một chuỗi duy nhất:
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu var Chart = Anychart.column([ ["Winter", 2], ["Spring", 7], ["Summer", 6], ["Fall " ", 10] ]); // đặt tiêu đề biểu đồ Chart.title("AnyChart Basic Sample"); // đặt vùng chứa biểu đồ và vẽ biểu đồ.container("container").draw(); ));
Và đó là tất cả! Đây là những gì chúng tôi có.
Dễ dàng phải không? Nhưng mọi thứ trở nên đơn giản và linh hoạt hơn trong AnyChart khi thiết lập dữ liệu. Chúng ta hãy chuyển sang phần tiếp theo để xem xét điều này chi tiết hơn.
Lấy dữ liệu vào AnyChartMột trong những điều mà AnyChart làm là nó có thể hoạt động với dữ liệu theo cách dễ dàng nhất. định dạng khác nhau. Việc bạn chọn cái nào cuối cùng sẽ phụ thuộc vào nhiệm vụ hiện tại (và ở một mức độ nào đó sở thích cá nhân của bạn), nhưng cách tiếp cận linh hoạt của AnyChart khiến nó rất phù hợp với hầu hết mọi dự án.
Dữ liệu từ mảngTrên thực tế, bạn đã thấy phương pháp đầu tiên trong phần " Bắt đầu nhanh với AnyChart" ở trên. Sử dụng phương pháp này, bạn khai báo dữ liệu của mình dưới dạng một mảng các mảng và AnyChart thực hiện phần còn lại. Phương pháp này ngắn gọn và cũng dễ dàng định dạng và sử dụng.
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu // dưới dạng Mảng mảng var Chart = Anychart.pie([ ["Peter", 5], ["John", 7], ["James", 9], ["Jacob", 12] ]);chart.title("AnyChart: Mảng các mảng");chart.container("container").draw(); ));
Mảng đối tượngPhương pháp thứ hai rất giống với phương pháp thứ nhất - thiết lập dữ liệu dưới dạng một mảng đối tượng. Trên thực tế, nó kém gọn hơn nhưng vẫn rất dễ định dạng, dễ đọc và dễ hiểu. Ngoài ra, định dạng này cho phép bạn tùy chỉnh các điểm riêng lẻ từ dữ liệu của mình, dữ liệu này cũng có thể được xử lý theo những cách khác nhưng chỉ với ánh xạ bổ sung.
Lưu ý: Khi bạn sử dụng dữ liệu trong các đối tượng trong tình huống tương tự, hãy sử dụng tên thích hợp cho các trường đối số và giá trị. Bạn có thể tìm thấy thông tin về điều này trong tài liệu AnyChart cho từng loại biểu đồ. Trong hầu hết các trường hợp, đối số là x và giá trị thường được đặt trong trường giá trị.
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu // dưới dạng mảng đối tượng // điểm lớn nhất được đánh dấu bằng điểm đánh dấu được cấu hình riêng var Chart = Anychart.line([ (x: "Winter", value: 5 ), (x: "Mùa xuân", giá trị: 9, điểm đánh dấu: (đã bật: true, loại: "star5", điền: "Vàng")), (x: "Mùa hè", giá trị: 7), (x: " Fall", value: 1) ]); Chart.title("AnyChart: Mảng đối tượng"); Chart.container("container").draw(); ));
Tạo nhiều biểu đồ chuỗiBiểu đồ nhiều chuỗi là biểu đồ cho phép bạn hiển thị mức cao và mức thấp của nhiều bộ dữ liệu và so sánh chúng. Khi tạo nhiều biểu đồ chuỗi bằng AnyChart, bạn có thể sử dụng các phương pháp được giới thiệu trước đó nhưng chỉ định thêm tên cho chuỗi của mình. Công cụ AnyChart sẽ đảm nhiệm phần còn lại.
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu // dưới dạng mảng mảng var Chart = Anychart.line() Chart.data((header: ["#", "Euro (€)", "USD ($)", "Pound (£)"], hàng:[ ["Mùa đông", 5, 7, 4], ["Mùa xuân", 7, 9, 6], ["Mùa hè", 9, 12, 8 ], ["Fall", 12, 15, 9] ])); Chart.title("AnyChart: Mảng nhiều chuỗi"); Chart.legend(true); Chart.container("container").draw (; ));
Nhiều hàng: mảng đối tượngBây giờ hãy xem cách bạn có thể tạo biểu đồ nhiều chuỗi bằng cách sử dụng một mảng đối tượng.
Ghi chú: Khi sử dụng các đối tượng như vậy, bạn có thể sử dụng bất kỳ tên trường nào cho các giá trị.
Đây là cách thực hiện:
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu // dưới dạng Mảng đối tượng var Chart = Anychart.column(); Chart.data((header: ["#", "Euro (€)", " USD ($)", "Pound (£)"], row:[ (x: "Mùa đông", usd: 5, eur: 4, bảng Anh: 3), (x: "Mùa xuân", usd: 3, eur: 3, bảng Anh: 3), (x: "Mùa hè", usd: 2, eur: 5, bảng Anh: 3), (x: "Mùa thu", usd: 4, eur: 2, bảng Anh: 3) ])); Chart.title("Mảng đối tượng");chart.legend(true);chart.container("container").draw(); ));
Hiển thị dữ liệu từ bảng HTMLMột cách khác để tải dữ liệu vào AnyChart là sử dụng bảng đã tồn tại trên trang. Nó có thể cực kỳ cách hiệu quả hình dung những điểm chính của một danh sách số nhàm chán khác. Để thực hiện công việc này, bạn sẽ cần thêm tập lệnh bộ điều hợp dữ liệu cùng với thư viện biểu đồ.
Sau đó, có hai tùy chọn: bạn có thể truy xuất dữ liệu từ các bảng được tạo bằng thẻ
Với JavaScript sau:
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu var Chart = Anychart.column(); // phân tích bảng var tableData = Anychart.data.parseHtmlTable("#htmlTable"); Chart.data(tableData); Chart.legend(true); // đặt vùng chứa biểu đồ và vẽ Chart.container("container").draw(); ));
Và đây là những gì nó trông giống như trong thực tế.
Hiển thị dữ liệu bằng cách sử dụng đánh dấu thông thườngBây giờ hãy xem cách này hoạt động như thế nào khi tạo bảng có thẻ và CSS:
... ...
Với JavaScript sau:
Anychart.onDocumentLoad(function() ( // tạo biểu đồ và thiết lập dữ liệu var Chart = Anychart.column(); var tableData = Anychart.data.parseHtmlTable(".table", ".row", ".cell p" , ".heading .cell p", ".title"); Chart.data(tableData); Chart.legend(true); // đặt vùng chứa biểu đồ và vẽ Chart.container("container").draw(); ) );
Bạn xem những gì có thể được cài đặt Bộ chọn CSS cho các hàng, tiêu đề và tiêu đề bảng. Về cơ bản, bạn không cần phải tự thiết lập bảng - bạn có thể thiết lập tập lệnh và lấy dữ liệu từ đánh dấu.
Làm việc với dữ liệu JSONBiểu đồ AnyChart không gặp vấn đề gì khi xử lý dữ liệu ở định dạng JSON thuần túy. Trên thực tế, AnyChart hoạt động tốt với JSON đến mức nó thậm chí còn cung cấp các lược đồ JSON của riêng mình. JSON là một định dạng dữ liệu tuyệt vời, chẳng hạn như nếu bạn muốn giữ các cài đặt và dữ liệu cùng nhau. AnyChart cũng có một số phương pháp tuần tự hóa JSON có thể hỗ trợ xuất.
Bằng cách này, bạn sẽ tạo biểu đồ kết hợp cột và spline từ dữ liệu JSON. Điều này (và các ví dụ sau) yêu cầu tập lệnh bộ điều hợp dữ liệu được đề cập trước đó.
Anychart.onDocumentReady(function() ( // Dữ liệu JSON var json = ("chart": ("type": "cột", "title": "AnyChart: Dữ liệu từ JSON", "series": [( "seriesType" : "Spline", "data": [ ("x": "P1", "value": "128.14"), ("x": "P2", "value": "112.61"), ("x" : "P3", "giá trị": "163,21"), ("x": "P4", "giá trị": "229,98"), ("x": "P5", "giá trị": "90,54") ] ), ("seriesType": "Cột", "data": [ ("x": "P1", "value": "90.54"), ("x": "P2", "value": "104.19" ), ("x": "P3", "giá trị": "150,67"), ("x": "P4", "giá trị": "120,43"), ("x": "P5", "giá trị" : "200.34") ] )], "container": "container" ) ); // đặt biểu đồ dữ liệu JSON = Anychart.fromJson(json); // vẽ biểu đồ Chart.draw(); ));
Làm việc với dữ liệu XMLVà nếu bạn không thích JSON, bạn có thể sử dụng XML vì biểu đồ AnyChart cũng không gặp vấn đề gì với dữ liệu trong định dạng XML. Giống như JSON, AnyChart cũng cung cấp các lược đồ XML riêng. XML cũng tốt khi bạn định lưu trữ cài đặt và dữ liệu nói chung. Một lần nữa, AnyChart có một số phương pháp tuần tự hóa XML có thể hữu ích khi xuất.
Đây là mã ví dụ cho biểu đồ cực nhiều chuỗi được tạo từ cài đặt XML:
Anychart.onDocumentReady(function() ( // Cài đặt và dữ liệu XML var xml = "" + "" + "" + ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ "" + "" + ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""+ ""; // Đặt cài đặt và dữ liệu dưới dạng biểu đồ XML = Anychart.fromXml(xml); // vẽ biểu đồ Chart.draw(); ));
Làm việc với dữ liệu trong định dạng CSVĐiều cuối cùng tôi muốn chứng minh là cách bạn có thể làm việc với dữ liệu được lưu trữ ở định dạng CSV. AnyChart hỗ trợ tính năng này ngay lập tức, với một số thông số bổ sung cấu hình (ví dụ: những gì được sử dụng làm dấu phân cách). CSV là định dạng được biết đến rộng rãi và được sử dụng thường xuyên. Nó tốt cho các tập dữ liệu lớn và giúp tiết kiệm băng thông. Bạn có thể tải xuống dữ liệu từ CSV (như được hiển thị bên dưới), hiển thị dữ liệu đó và sau đó nhúng dữ liệu đó vào biểu đồ của bạn.
Cách dễ nhất để tải tệp CSV vào biểu đồ JS AnyChart là nếu tệp thực sự được phân tách bằng dấu phẩy, chứa đối số trong cột đầu tiên và không có tiêu đề, tức là trông giống như thế này:
Phấn mắt, 249980 Bút kẻ mắt, 213210 Chì kẻ mày, 170670 Sơn móng tay, 143760 Pomade, 128000 Son bóng, 110430 Mascara, 102610 Kem nền, 94190 Rouge, 80540 Phấn phủ, 53540
Anychart.onDocumentReady(function () ( Anychart.data.loadCsvFile("https://cdn.anychart.com/charts-data/data_csv.csv", function (dữ liệu) ( // tạo biểu đồ từ dữ liệu đã tải Chart = Anychart. bar(data); // đặt tiêu đề Chart.title("AnyChart from CSV File"); // vẽ biểu đồ Chart.container("container").draw(); )); ));
Nếu các trường trong của bạn tệp CSVđược sắp xếp khác nhau, dữ liệu có thể được tải vào tập dữ liệu và được sử dụng lại (Tôi sẽ giải thích cách thức hoạt động của tính năng này trong bài viết sau về cách sử dụng nâng cao hơn của thư viện AnyChart). Bạn cũng có thể định cấu hình dấu phân cách trong khi tải dữ liệu vào tập dữ liệu.
Phần kết luậnTrong bài viết này, tôi đã giới thiệu cho bạn thư viện biểu đồ AnyChart JavaScript. Tôi đã nêu ý kiến của mình điểm mạnh và chứng minh việc sử dụng sức mạnh của bạn để tạo các biểu đồ phức tạp và hấp dẫn về mặt trực quan dễ dàng như thế nào chỉ trong một vài dòng mã. Tôi cũng đã trình bày một số cách để lấy dữ liệu vào AnyChart, từ cấu trúc dữ liệu được mã hóa cứng đến khả năng tải xuống các tệp phức tạp hơn qua mạng.
Tất cả các tài liệu có thể được tìm thấy trong mã nguồn
