소개
HTML 표준에서는 이미지 맵을 사용하여 웹페이지 이미지의 핫스팟을 지정할 수 있습니다. 이러한 핫스팟은 마우스 오버 텍스트를 표시하거나 링크로 작동하는 데 사용할 수 있습니다. 또는 자바스크립트 이벤트 처리를 추가하여 상호작용을 사용 설정할 수도 있습니다. 예를 들어 다음 이미지의 막대와 축 라벨 위로 마우스를 가져갑니다.
이러한 핫스팟은 <map> 및 <area> HTML 요소를 사용하여 만들어집니다. Chart API는 다음에 설명된 것처럼 핫스팟 지도를 만드는 데 필요한 모든 좌표를 반환할 수 있습니다.
차트용 지도 만들기
chof=json 매개변수를 차트 URL에 추가하면 차트용 이미지 맵을 만드는 데 필요한 모든 데이터가 포함된 JSON 문자열이 다시 반환됩니다. 그런 다음 차트의 특정 섹션에 링크를 추가하거나 자바스크립트 함수를 클릭 이벤트에 연결하여 차트를 대화형으로 만들 수 있습니다. 일부 차트 유형에서만 이 기능을 지원합니다. 자세한 내용은 해당 차트 문서를 참조하세요.
이 페이지의 도구를 사용하면 이미지 지도용 HTML을 생성할 수 있습니다. 이 HTML을 페이지에 영구적으로 삽입할 수도 있고, 코드를 복사한 다음 페이지를 즉시 요청 및 생성할 수도 있습니다(페이지에서 사용자가 페이지의 지도를 동적으로 변경할 수 있는 경우).
다음은 이 도구를 사용하여 지도를 생성하는 방법입니다.
- 차트의 JSON 출력 가져오기:
chof=json를 차트 URL에 추가하고 브라우저에서 해당 URL로 이동하여 반환된 텍스트를 복사합니다. - 'JSON 출력'으로 표시된 아래 텍스트 상자에 복사한 JSON 텍스트를 붙여넣고 '지도 만들기'를 클릭합니다.
- 생성된 지도 코드를 페이지에 붙여넣기
- 생성된 코드를
<map>요소의 고유한 이름으로 업데이트합니다. - 필요하지 않은 지도 요소 (예: 특정 막대, 슬라이스, 라벨 또는 축 요소)를 삭제합니다.
- 생성된
<area>요소에서 href 속성을 업데이트합니다. usemap="#MAP_NAME"속성을<img>요소에 추가하여MAP_NAME을 지도 이름으로 대체합니다.중요: usemap 값 앞에 '#'을 추가해야 합니다(예:
usemap="#mymap"). 이 경우 지도 이름은 '#mymap'이 아니라 'mymap'입니다.
JSON 문자열 형식
chof=json를 지정하면 반환되는 JSON의 형식은 다음과 같습니다.
- chartshape라는 루트 객체입니다. 이 객체에는 차트의 이미지 맵에서 각 영역을 나타내는 객체의 배열이 포함됩니다. 각 객체에는 다음과 같은 속성이 있습니다.
- name - 이 특정 지역의 이름입니다. 일반적인 이름 지정 규칙은 elementtype_series#_item#입니다. 예를 들어 첫 번째 계열의 첫 번째 막대를 설명하는 영역의 경우 bar0_0, x축의 두 번째 축 라벨을 설명하는 영역의 경우 axis0_1입니다.
- type - 이 영역의 형태입니다. 차트 유형에 따라 RECT, Circle, POLY 값 중 하나입니다. 이는
<area>태그의 shape 속성과 같습니다. - coords - 영역을 설명하는 숫자 배열로
<area>태그의 coords 속성과 같습니다.