Tạo bản đồ hình ảnh biểu đồ

Giới thiệu

Tiêu chuẩn HTML cho phép bạn xác định các điểm nổi bật trên hình ảnh trang web bằng cách sử dụng bản đồ hình ảnh. Các điểm nóng này có thể được dùng để hiển thị văn bản di chuột qua hoặc hoạt động dưới dạng đường liên kết, hoặc thậm chí bạn có thể thêm tính năng xử lý sự kiện JavaScript để kích hoạt khả năng tương tác. Ví dụ: di chuột qua thanh và nhãn trục của hình ảnh sau:

 

Những điểm nóng này được tạo bằng cách sử dụng các phần tử HTML <map> và <area>. API biểu đồ có thể trả về tất cả các toạ độ cần thiết để tạo bản đồ điểm nóng cho nó, như được mô tả tiếp theo.

Tạo bản đồ cho biểu đồ của bạn

Nếu thêm tham số chof=json vào URL của biểu đồ, bạn sẽ nhận được lại một chuỗi JSON chứa tất cả dữ liệu cần thiết để tạo bản đồ hình ảnh cho biểu đồ. Sau đó, bạn có thể thêm đường liên kết đến các phần cụ thể trên biểu đồ hoặc đính kèm hàm JavaScript để nhấp vào các sự kiện nhằm tăng tính tương tác cho biểu đồ. Xin lưu ý rằng không phải tất cả các loại biểu đồ đều hỗ trợ tính năng này; hãy xem tài liệu cụ thể về biểu đồ để biết thông tin chi tiết.

Công cụ trên trang này sẽ giúp bạn tạo HTML cho bản đồ hình ảnh. Bạn có thể nhúng vĩnh viễn HTML này vào trang của mình hoặc thậm chí có thể sao chép mã của chúng tôi vào trang, rồi yêu cầu và tạo bản đồ nhanh chóng, nếu trang của bạn cho phép người dùng thay đổi linh động bản đồ trên trang.

Sau đây là cách sử dụng công cụ này để tạo bản đồ:

1. Nhận kết quả JSON cho biểu đồ của bạn: thêm chof=json vào URL của biểu đồ, duyệt đến URL đó trong trình duyệt rồi sao chép văn bản được trả về.
2. Dán văn bản JSON bạn đã sao chép vào hộp văn bản bên dưới được đánh dấu là "Kết quả JSON" và nhấp vào "Tạo bản đồ".
3. Dán mã bản đồ đã tạo vào trang của bạn
4. Cập nhật mã đã tạo bằng tên riêng biệt cho phần tử <map>.
5. Xoá mọi thành phần bản đồ không cần thiết (ví dụ: thanh, lát, nhãn hoặc các thành phần trục cụ thể).
6. Cập nhật các thuộc tính href trong các phần tử <area> đã tạo.
7. Thêm thuộc tính usemap="#MAP_NAME" vào phần tử <img>, thay thế tên của bản đồ bằng MAP_NAME.

   Lưu ý quan trọng: Hãy nhớ thêm tiền tố "#" vào trước giá trị usemap. Ví dụ: usemap="#mymap". Trong trường hợp này, tên bản đồ là "mymap" chứ không phải "#mymap".

 

Định dạng của chuỗi JSON

Đây là định dạng của JSON được trả về khi bạn chỉ định chof=json:

• Một đối tượng gốc có tên là chartshape. Đối tượng này chứa một mảng các đối tượng, mỗi đối tượng đại diện cho một khu vực trong bản đồ hình ảnh của biểu đồ. Mỗi đối tượng có các thuộc tính sau:
  • tên – Tên của khu vực cụ thể này. Quy ước đặt tên chung là phần tử_chuỗi#_mặt_hàng#. Ví dụ: bar0_0 cho một khu vực mô tả thanh đầu tiên trong chuỗi đầu tiên hoặc Trục0_1 cho một khu vực mô tả nhãn trục thứ hai trên trục x.
  • loại – Hình dạng của khu vực này. Đây sẽ là một trong các giá trị sau đây, tùy thuộc vào loại biểu đồ: CHROME, CONNECTOR hoặc POLY. Thuộc tính này tương đương với thuộc tính hình dạng của thẻ <area>.
  • coords – Một mảng số mô tả khu vực; tương đương với thuộc tính coords của thẻ <area>.