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

Giới thiệu

Các tiêu chuẩn HTML cho phép bạn chỉ định các điểm nóng 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 như đường liên kết, hoặc thậm chí bạn có thể thêm phương thức xử lý sự kiện JavaScript để bật tính tương tác. Ví dụ: di chuột qua các 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 biểu đồ đó, như 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 biểu đồ, bạn sẽ nhận lại được 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 đồ của mình. Sau đó, bạn có thể thêm đường liên kết đến các phần cụ thể của biểu đồ hoặc đính kèm các hàm JavaScript vào các sự kiện nhấp chuột để tăng tính tương tác cho biểu đồ của bạn. Xin lưu ý rằng không phải loại biểu đồ nào cũng hỗ trợ tính năng này. Hãy xem tài liệu về biểu đồ cụ thể của bạn để 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 HTML này vĩnh viễn 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 của bạn, sau đó 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 linh động thay đổi bản đồ trên trang.

Dưới đâ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 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 mà 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" rồi 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 một tên riêng biệt cho phần tử <map> của bạn.
5. Xoá mọi thành phần bản đồ mà bạn không cần (ví dụ: thanh, lát cắt, nhãn hoặc phần tử trục cụ thể).
6. Cập nhật 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 bản đồ của bạn bằng MAP_NAME.

   Lưu ý quan trọng: Hãy nhớ thêm tiền tố '#' vào giá trị bản đồ sử dụng. 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

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

• Đố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 vùng trong bản đồ hình ảnh của biểu đồ. Mỗi đối tượng đều có các thuộc tính sau:
  • name – Tên của khu vực cụ thể này. Quy ước đặt tên chung là elementtype_loạt#_item#. Ví dụ: bar0_0 cho khu vực mô tả thanh đầu tiên trong chuỗi đầu tiên hoặc axis0_1 cho 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. Giá trị này sẽ là một trong các giá trị sau, tùy thuộc vào loại biểu đồ: JAPAN, CIRCLE hoặc POLY. Điều 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>.