Biểu đồ so sánh ngang js năm 2024

CodeLearn is an online platform that helps users to learn, practice coding skills and join the online coding contests.

Links

Learning

Training

Fights

Information

About Us

Terms of Use

Help

Help

Discussion

Powered by CodeLearn © 2024. All Rights Reserved. rev 2/5/2024 5:31:56 PM

amCharts JavaScript Charts làm cho việc hiển thị trực quan hóa dữ liệu trên website từ phức tạp trở nên dễ dàng. JavaScript Stock Chart được thiết kế làm cho nó vô cùng dễ dàng kiểm soát các biểu đồ bằng cách sử dụng cử chỉ cảm ứng. Phóng to, xoay, nhấp vào biểu đồ mà không làm mất sự phản hồi chung của trang web. Không chỉ có vậy, amCharts JavaScript Charts còn có thể tích hợp với Wordpress để đăng biểu đồ lên website của bạn.

Biểu đồ xếp chồng cột hoàn toàn còn gọi là biểu đồ thanh xếp chồng 100% theo chiều dọc. Nó tương tự như các biểu đồ cột xếp chồng khác, ngoại trừ việc chiều cao từng cột được tính theo phần trăm của tổng số. Điều này cho phép bạn so sánh giá trị của từng chuỗi dữ liệu với tổng số theo phần trăm. Kiểu biểu đồ này cũng có tính tương tác, đáp ứng, hỗ trợ hoạt ảnh & xuất dưới dạng ảnh.

Ví dụ bên dưới minh họa một mẫu biểu đồ cột xếp chồng 100% được tạo bằng JavaScript. Bài viết cũng bao gồm mã nguồn cho bạn chỉnh sửa trong trình duyệt hoặc lưu về máy chạy nội bộ.

Nguồn: CanvasJS

Tùy biến biểu đồ

Bạn có thể bật chú giải bằng thuộc tính showInLegend. Thay đổi vị trí của chú thích theo chiều dọc bằng verticalAlign hoặc ngang bằng horizontalAlign. Ngoài ra, bạn còn có thể thay đổi cả color - màu sắc, shared(toolTip) - chia sẻ tooltip và nhiều hơn thế nữa.

Hello các bạn mình là Thiện, là một thực tập sinh Front end đang trong quá trình thử việc và tích lũy kinh nghiệm làm việc . Trong quá trình làm và học ở công ty ABC Software Solution Vietnam, mình đã trải qua biết bao nhiêu thử thách và các task nâng cao có thể kể đến như slide, animation, hình nền gradient đặc biệt.

Một số công việc đặc thù mà các Front end Developer chúng ta hay thường gặp

1. Slide

2. Hoạt ảnh (Animation)

3. Lớp phủ màu pha (Gradient Overlay)

4. Đồ thị / Biểu đồ

Tuy nhiên một trong những cái mà làm mình bất ngờ và dành nhiều thời gian nghiên cứu nhất chính là đồ thị dạng cột ngang và cột dọc. Nhìn thì nó có vẻ chỉ là đồ thị bình thường như bao đồ thị khác mà thôi, chắc hẳn các bạn sẽ nghĩ là à mình có thể dùng thư việc Chart.JS để vẽ nó, vì chartJS hỗ trợ đa dạng đồ thị cũng như cách viết code nó rất dễ hiểu. Nhưng khoan, chúng ta hãy nhìn đồ thị minh họa dưới đây

Ta sẽ thấy nó có những điểm đặc biệt sau đây:

• Các cột của đồ thị có màu sắc không giống nhau. Cột thứ nhất là màu trắng với độ trong suốt là 70%. Cột còn lại thì không có độ trong suốt.
• Mũi tên chỉ chiều tăng dữ liệu có vị trí nằm chính giữa hai cột, thay vì xuất phát từ chính giữa cột thứ nhất.
• Con số biểu thị mức độ tăng trưởng dữ liệu được đặt ở vị trí ngang hàng so với cột thứ hai, có dấu mũi tên lên xuống biểu thị sự tăng hoặc giảm của dữ liệu.

  OK, sau khi phân tích song đồ thị, chúng ta sẽ lựa chọn phương pháp hoặc thư viện để cài đặt nào. Như hồi nãy mình có đề cập đến thư viện Chart.JS đúng không. Nhưng mình không sử dụng Chart.JS vì nó không hỗ trợ mình cài đặt giao diện đồ thị với các đặc điểm đặc biệt vừa kể trên. Vì vậy mình sẽ giới thiệu các bạn một thư viện khác hỗ trợ đồ thị mạnh mẽ hơn, chính là HighChart.JS

1. Highcharts là gì?

Highchart là một thư viện Java Script dùng để hỗ trợ lập trình viên trong việc tạo ra các biểu đồ đẹp mắt với các Setting rất phong phú về màu sắc,dạng biểu đồ,…Highcharts có thể đáp ứng được hầu như tất cả các yêu cầu về vẽ biểu đồ trong các ứng dụng web. Highchart được tạo bởi javascript nên có thể tích hợp dễ dàng vào các website và tương tác tốt với nhiều ngôn ngữ lập trình.

2. Thiết lập khung giao diện HTML.

index.html 1. Cấu trúc chung

2. Nút điều khiển đồ thị dọc sang ngang và ngược lại.

3. Các thẻ div có ID định danh tên các đồ thị để API Highcharts đọc và xuất hình ảnh biểu đồ cho phù hợp

3. Khởi tạo đồ thị qua Highcharts

Highcharts là một bộ thư viện vẽ đồ thị rất lớn. Vì thế nó được chia thành nhiều module nhỏ hơn. Trong ví dụ lần này ta chỉ dùng đến các module Highstock, Annotation, ColorAxis, Accessbility.

• Highstock: Module chính cung cấp nhiều loại hình dáng biểu đồ khác nhau.
• Annotation: Module phụ trợ dùng để tạo ra chú thích dùng để so sánh mức độ chênh lệch giữa hai điểm dữ liệu trên biểu đồ.
• ColorAxis: Module phụ trợ dùng để tô màu cho các thành phẩn điểm dữ liệu.
• Accebility: Module phụ trợ dùng để vẽ mũi tên biểu thị chiều hướng tăng giảm giữa các điểm dữ liệu

  index.js

Mảng dữ liệu dùng để vẽ cùng lúc 4 đồ thị khác nhau

Cấu trúc chung của chương trình gồm bốn phần sau đây

4. Cấu hình, xử lí và vẽ đồ thị

Ở bước này mình sẽ không nói chi tiết tất tần tật mọi thứ, mà mình chỉ nói những chỗ đặc biệt nhất của đồ thị 1. Các loại đối tượng API mà chúng ta sẽ sử dụng

• Chart: Cấu hình kiểu đồ thị, màu nền và font chữ
• Color Axis: Cấu hình màu sắc cho các điểm dữ liệu, điểm dữ liệu nào lớn thì màu sắc hiển thị càng đậm hơn và ngược lại, điểm dữ liệu nào nhỏ hơn thì màu sắc hiển thị nhạt hơn.
• Plot Options: Cấu hình về cách hiển thị con số đi kèm theo đơn vị tính trên mỗi điểm dữ liệu. Các đơn vị tính thường gặp có thể là đơn vị độ dài, đơn vị tiền tệ, đơn vị thời gian

• Series: Mảng dữ liệu dùng để vẽ đồ thị:

⛳ Ngoài ra nó còn chứa dữ liệu so sánh mức độ tăng giảm giữa hai điểm dữ liệu nằm bên trái và bên phải mũi tên (từ khóa gợi nhớ là flags). 🪧 Việc tính toán so sánh ấy được thực hiện ở mảng data thứ hai

Defs: Vẽ mũi tên biểu diễn chiều hướng tăng hoặc giảm giữa hai điểm dữ liệu trong biểu đồ.

2. Cấu hình vị trí điểm đầu và điểm cuối của mũi tên nằm chính giữa hai điểm dữ liệu

• Đây là một trong những phần khó nhất khi thiết kế biểu đồ. Nó đòi hỏi ta phải áp dụng công thức tính toán để dịch chuyển vị trí mũi tên theo ý muốn
• Đi sâu vào thuộc tính shapes, ta sẽ có các thuộc tính con quan trọng sau:
  • Points: Vị trí điểm đầu và điểm cuối của mũi tên
    • Hàm getPointStartCustom() sẽ giúp ta tính toán tọa độ xuất phát của mũi tên
    • Hàm getPointEndCustom() sẽ giúp ta tính toán tọa độ kết thúc của mũi tên
  • Type = path chỉ mũi tên có dạng là đường thẳng
  • Fill: Màu sắc của mũi tên
  • Stroke: Màu sắc của viền mũi tên
  • Opacity: Mức độ đậm nhạt của mũi tên
  • Stroke Width: Độ dày của viền mũi tên.

3. Đối với đồ thị nằm ngang, cũng sẽ có nhiều thuộc tính tương đồng với đồ thị dọc, tuy nhiên ta cần thay đổi 2 thuộc tính sau cho phù hợp với đồ thị ngang: