소개
HTML 표준을 사용하면 이미지 맵을 사용하여 웹페이지 이미지에 핫스팟을 지정할 수 있습니다. 이러한 핫스팟은 마우스 오버 텍스트를 표시하거나 링크로 작동하는 데 사용할 수 있으며 JavaScript 이벤트 처리를 추가하여 상호작용을 사용 설정할 수도 있습니다. 예를 들어 다음 이미지의 막대와 축 라벨 위로 마우스를 가져갑니다.
이러한 핫스팟은 <map> 및 <area> HTML 요소를 사용하여 만들어집니다. 차트 API는 아래에 설명된 대로 핫스팟 지도를 만드는 데 필요한 모든 좌표를 반환할 수 있습니다.
차트용 지도 만들기
차트 URL에 매개변수 chof=json를 추가하면 차트의 이미지 맵을 만드는 데 필요한 모든 데이터가 포함된 JSON 문자열이 다시 수신됩니다. 그런 다음 차트의 특정 섹션으로 연결되는 링크를 추가하거나 JavaScript 함수를 연결하여 이벤트를 클릭함으로써 대화형 차트를 만들 수 있습니다. 일부 차트 유형에서는 이 기능이 지원되지 않습니다. 자세한 내용은 특정 차트 문서를 참조하세요.
이 페이지의 도구를 사용하면 이미지 지도의 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을 사용합니다.
- 유형 - 이 영역의 모양입니다. 차트 유형에 따라 RECT, CIRCLE 또는 POLY 값 중 하나입니다. 이는
<area>태그의 shape 속성과 같습니다. - coords - 영역을 설명하는 숫자 배열로,
<area>태그의 coords 속성과 같습니다.