사이트의 레이아웃 디자인—Portal for ArcGIS

사이트를 구성하고 데이터를 추가한 후에는 사이트 편집기를 사용하여 사이트 디자인을 시작할 수 있습니다. 사이트 편집기는 기본 사이트 템플릿이 제공되는 전체 페이지 편집기입니다. 해당 사이트 템플릿을 수정하여 사용자 사이트의 브랜드 이미지와 데이터에 맞추거나 사이트 템플릿을 완전히 제거하여 처음부터 만들 수 있습니다. 카드 드래그 앤 드롭을 사용하고, 전반적인 테마를 설정하며, 마크다운이나 사용자 정의 HTML을 사용하여 머리글과 바닥글을 사용자 정의하여 사이트 레이아웃을 디자인합니다.

사이트 편집기 접근

사이트 편집기를 사용하여 사이트 디자인을 시작하거나 언제든지 사이트 편집기로 돌아가 변경을 할 수 있습니다.

Sites 사용자에게 표시됩니다 관리 응용프로그램에 로그인합니다.
사이트 탭을 클릭합니다.
편집하려는 사이트를 찾은 다음 사이트 편집기를 선택합니다.

사이트 설정 구성

사이트 이름을 지정하고 설명 등을 입력합니다. 사이트 탭을 클릭하고 사이트 관리자에 접근하여 사이트 설정 및 기능을 구성할 수도 있습니다.

측면 패널을 열고 사이트 정보를 클릭합니다.
사이트 이름 필드에 이름을 입력합니다.
사이트에 대한 간단한 배경 정보를 사이트 정보 필드에 입력합니다.
사용자 정의 파비콘 필드에 이미지 URL을 붙여넣어 파비콘(선택)을 입력합니다.
Google Analytics에서 토글하려면 클릭합니다.
사용자 정의 베이스맵에서 토글하려면 클릭합니다. 드롭다운 메뉴에서 원하는 맵을 선택할 수 있습니다.
사용자 정의 패널 상단에서 기능을 클릭하여 기능 메뉴를 엽니다. 이 메뉴 내에서 사용 가능한 기능 간을 토글할 수 있습니다. 사이트 기능 관리의 기능에 대해 자세히 알아보세요.

머리글

이미지 URL을 제공하거나 사용자 정의 CSS를 사용하여 사이트 상단의 메뉴 모음에 브랜드를 추가합니다.

측면 패널을 열고 머리글을 클릭합니다. 로고 및 사이트 제목을 사용하여 제목을 입력하고 로고 URL을 제공할 수 있습니다.
사이트의 이름을 지정하려면 로고 및 사이트 제목 사용을 선택한 다음 사이트 제목 텍스트 필드에 제목을 입력하여 사이트 머리글에 제목을 배치합니다.
사이트 머리글에 이미지를 배치하려면 로고 URL 필드에 이미지 URL을 붙여넣습니다.
사용자 정의 HTML이나 CSS로 사이트 머리글에 브랜드를 적용하려면 사용자 정의 HTML/CSS 사용을 선택합니다.
측면 패널의 CSS 상자를 수정한 후 변경 사항 적용을 클릭하여 적용된 코드를 확인합니다.

주의:

HTML 헤더에는 임베드된 JavaScript가 지원되지 않습니다. 스크립트 태그가 무시됩니다.

비고:

사이트의 기능을 유지하기 위해서는 내 데이터와 로그인 영역을 편집하거나 제거할 수 없습니다.

테마

사이트의 헤더, 텍스트, 버튼 색상을 선택하여 사이트의 테마를 만들 수 있습니다.

다음 옵션의 색상을 선택하려면 색상 코드를 입력하거나 색상 코드 필드 옆에 있는 색상 선택기에서 색상을 선택합니다.
- 머리글 배경 색상은 사이트 머리글에 색상을 적용합니다.
- 머리글 텍스트 색상은 머리글의 모든 텍스트에 색상을 적용합니다.
- 본문 배경 색상은 사이트 행에 색상을 적용합니다.
- 본문 텍스트 색상은 사이트 전반의 텍스트에 색상을 적용합니다.
- 팁:
  텍스트 색상을 행별로 변경할 수도 있습니다.
  본문 링크 색상은 사이트에 제공된 링크에 색상을 적용합니다.
- 버튼 배경 색상은 사이트에 제공된 버튼에 색상을 적용합니다.
- 버튼 텍스트 색상은 사이트에 제공된 버튼의 텍스트에 색상을 적용합니다.
색상을 설정한 후에는 변경 사항 적용을 클릭합니다.
또한 사이트의 머리글 및 본문에 있는 텍스트에 글꼴을 적용할 수 있습니다.
- 사이트 본문의 글꼴을 선택하려면 기본 글꼴 설정 아이콘을 클릭합니다.
- 사이트 머리글의 글꼴을 변경하려면 머리글 글꼴 설정 아이콘을 클릭합니다.

비고:

다시 시작하거나 기본 색상으로 돌아가려면 테마 메뉴 하단에 있는 기본으로 재설정을 선택합니다.

레이아웃 및 카드

사이트나 페이지의 기본 레이아웃은 행과 카드로 구성됩니다. 카드는 행에 배치되는데 한 행에 배치할 수 있는 카드 수에는 제한이 없습니다. 카드를 편집하려면 설정 버튼을 클릭합니다. 카드를 삭제하려면 삭제 버튼을 클릭합니다. 사이트를 만들 때 행, 배너, 이미지, 웹맵, 텍스트, 범주,연락처 정보, 갤러리, iframe, 이벤트 세부정보, 이벤트 목록 뷰, 비디오, 소셜 미디어, 요약 통계, 차트 카드를 사용할 수 있습니다.

행 카드

행을 사용하여 사이트의 전체 레이아웃을 구성할 수 있습니다. 사이트 편집기에서 카드를 드래그하여 텍스트, 이미지, 미디어 등 추가 카드로 행을 채웁니다.

사이트 편집기의 행을 레이아웃에 드래그합니다.
그러면 페이지에 안내를 위한 표시가 나타납니다.
해당 행 위에 마우스를 놓으면 오른쪽에 3개의 버튼 즉, 페이지에서의 행 이동을 위한 화살표, 행 편집을 위한 설정 버튼, 행 삭제를 위한 삭제 버튼이 나타납니다.
설정 버튼을 클릭하면 편집 모드로 전환됩니다.
상자형이나 전체형을 선택하여 행의 레이아웃을 지정합니다.전체형을 선택하면 콘텐츠가 페이지 전체에 표시되며 상자형을 선택하면 콘텐츠가 행 내 고정 너비로 표시됩니다.
이 특정 행의 텍스트 색상을 설정합니다.
배경 색상(기본 설정은 투명) 또는 배경 이미지를 설정합니다.
필요한 경우 이미지 원본을 클릭한 다음 이미지 파일을 업로드하거나 이미지 URL을 제공하도록 선택하여 이미지를 추가할 수 있습니다. 두 옵션 모두 JPG, JPEG, PNG가 지원됩니다.
- 이미지 파일을 업로드하려면 이미지 업로드를 선택한 다음 파일을 사이트 편집기 내의 해당 상자에 드래그하거나 이미지 찾아보기를 클릭하여 파일을 찾아 추가합니다. 최대 파일 크기는 3MB입니다.
- 또는 지원되는 이미지 링크를 URL 필드에 붙여넣어 이미지 URL을 제공합니다.
이미지 파일을 사용할 경우 자르기 버튼을 클릭한 다음 핸들을 드래그하여 자르기 프레임의 크기를 조정하는 방식으로 이미지를 사용자 정의할 수 있습니다. 점선에서 드래그하여 자르기 프레임의 위치를 조정할 수 있습니다. 또한 이미지 아래의 슬라이더를 조정하여 이미지를 확대하거나 자르기 프레임 내를 클릭하여 이미지 위치를 조정할 수 있습니다.
배경 색상과 이미지를 추가하는 경우에는 백분율을 입력하거나 슬라이더를 사용하여 모양 메뉴의 이미지 투명도를 조정할 수 있습니다.
고정 배경을 활성화하면 콘텐츠가 배경 이미지와 다른 속도로 스크롤되도록 시차 효과를 줄 수 있습니다.
필요한 경우 이미지 초점 포인트를 설정하면 이미지가 다양한 화면 크기에 맞춰 조정될 때 이미지의 초점을 유지할 수 있습니다.

배너 카드

배너를 사용하여 사이트 내에 머리글과 검색 바를 추가할 수 있습니다.

배너카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
헤드라인과 하위 헤드라인의 텍스트를 입력합니다.
검색 메뉴에서 검색 바 표시를 클릭하여 검색 바(옵션)를 배너에 추가합니다. 필요한 경우 위치별 검색 기능 추가를 클릭하여 사용자가 위치별로 결과를 필터링할 수 있는 보조 검색 옵션을 추가합니다.
필요한 경우 검색 바에 나타날 플레이스 홀더 텍스트를 추가합니다.
옵션 메뉴에서 최소 높이의 값을 입력하여 배너 높이를 설정합니다. 값은 0보다 커야 합니다.
배경 이미지 메뉴에서는 필요에 따라 이미지 파일을 업로드하거나 이미지 URL을 제공하도록 선택합니다. 두 옵션 모두 JPG, JPEG, PNG가 지원됩니다.
- 이미지 파일을 업로드하려면 이미지 업로드를 선택한 다음 파일을 사이트 편집기 내의 해당 상자에 드래그하거나 이미지 찾아보기를 클릭하여 파일을 찾아 추가합니다. 최대 파일 크기는 3MB입니다.
- 또는 지원되는 이미지 링크를 URL 필드에 붙여넣어 이미지 URL을 제공합니다.
이미지 파일을 사용할 경우 자르기 버튼을 클릭한 다음 핸들을 드래그하여 자르기 프레임의 크기를 조정하는 방식으로 이미지를 사용자 정의할 수 있습니다. 점선에서 드래그하여 자르기 프레임의 위치를 조정할 수 있습니다. 또한 이미지 아래의 슬라이더를 사용하여 이미지 확대를 조정하거나 자르기 프레임 내를 클릭하여 이미지 위치를 조정할 수 있습니다.
이미지 업로드 옵션과 이미지 URL 옵션의 경우 이미지 초점 포인트를 선택하여 다양한 화면 크기에서 이미지가 나타나는 방식과 관계없이 이미지의 초점 영역을 유지할 수 있습니다.

검색 카드

사용자가 사이트에 공유된 콘텐츠를 빠르게 찾을 수 있도록 검색 창을 추가합니다.

검색 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
플레이스 홀더 텍스트 검색 필드에 플레이스 홀더 텍스트를 입력합니다. 예를 들어 "키워드별 검색" 또는 "데이터 찾기"를 사용할 수 있습니다.
위치 기반 검색을 쿼리하기 위한 검색 창을 더 추가하려면 위치별 검색 기능 추가 확인란을 선택합니다. 또한 위치 플레이스 홀더 텍스트 필드에 플레이스 홀더 텍스트를 입력할 수도 있습니다.

이미지 카드

파일을 사용하여 이미지를 업로드하거나 이미지 URL을 제공하는 방법으로 이미지를 추가할 수 있습니다. 내부적으로 공유된 이미지는 팀 또는 기관에 속하며 로그인한 사용자만 볼 수 있습니다.

이미지 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
이미지 원본을 선택합니다. 이미지 파일을 업로드하거나 이미지 URL을 제공할 수 있습니다. 두 옵션 모두 JPG, JPEG, PNG가 지원됩니다.
- 이미지 파일을 업로드하려면 이미지 업로드를 선택한 다음 파일을 사이트 편집기 내의 해당 상자에 드래그하거나 이미지 찾아보기를 클릭하여 파일을 찾아 추가합니다. 최대 파일 크기는 3MB입니다.
- 또는 이미지 URL을 선택한 다음 지원되는 이미지 링크를 URL 필드에 붙여넣어 이미지 URL을 제공합니다.
이미지 파일을 사용할 경우 자르기 버튼을 클릭한 다음 핸들을 드래그하여 자르기 프레임의 크기를 조정하는 방식으로 업로드된 이미지를 사용자 정의할 수 있습니다. 점선을 클릭하고 드래그하여 자르기 프레임의 위치를 조정할 수 있습니다. 또한 이미지 아래의 슬라이더를 조정하여 이미지를 확대하거나 자르기 프레임 내를 클릭하여 이미지 위치를 추가 조정할 수 있습니다.
옵션 메뉴에서 이미지 대체 텍스트를 입력하여 시력이 약한 사용자에게 도움을 주고 사이트의 접근성을 향상시킬 수 있습니다.
이미지 하이퍼링크를 제공하고 해당 링크가 동일한 탭이나 새 탭에서 열리도록 선택합니다.
이미지 캡션의 텍스트를 입력하고 텍스트 정렬을 선택합니다.
필요한 경우 이미지 크기를 채우기로 조정을 클릭하여 이미지의 초점을 설정합니다. 초점을 설정하면 이미지가 다양한 화면에 맞게 크기가 조정될 때 원하는 위치에 초점이 맞춰진 상태로 유지됩니다.

웹맵

사이트에 웹맵을 표시합니다. 웹맵은 비공개적으로 공유할 수 있습니다. 팀이나 기관에 속한 사용자만 로그인을 통해 이러한 웹맵에 접근할 수 있습니다.

웹맵 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
웹맵 찾기를 클릭합니다.
내 맵, 내 기관의 맵, 모든 맵을 검색하여 웹맵을 찾습니다.
맵의 제목을 표시하려면 제목 전환 버튼을 클릭합니다.
맵의 높이(픽셀 단위)를 설정합니다.

텍스트 카드

텍스트 형식 지정, 목록 추가, 테이블 삽입을 수행할 수 있습니다. 사용자 정의 HTML도 사용할 수 있습니다.

텍스트 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
텍스트를 추가합니다.
형식을 지정할 텍스트를 선택합니다. 형식 옵션에는 스타일(헤더, 코드 조각, 인용 문자 추가), 굵게, 기울임꼴, 링크가 포함되어 있습니다.
텍스트 정렬을 조정하려면 단락 옵션을 클릭하고 정렬을 선택합니다. 단락 옵션을 선택한 후 들여쓰기 또는 내어쓰기를 선택하여 한 줄의 텍스트를 들여쓰거나 내어쓸 수도 있습니다.

비고:

텍스트 색상은 행 카드 설정에서 수정할 수 있습니다.

글머리 기호 목록 또는 번호가 매겨진 목록 추가

텍스트를 추가하거나 기존 텍스트를 선택합니다.
글머리 기호 목록을 만들려면 순서가 지정되지 않은 목록을 선택합니다.
번호가 매겨진 목록을 추가하려면 순서가 지정된 목록을 선택합니다.

테이블 삽입

테이블 옵션을 클릭합니다.
원하는 행과 열의 셀 수를 선택합니다.
테이블 크기를 선택한 후 클릭하여 테이블을 삽입합니다. 셀 내부를 클릭하고 행 또는 열 삽입이나 삭제 버튼을 선택하여 셀을 추가하거나 제거합니다. 테이블을 완전히 제거하려면 삭제 버튼을 클릭합니다.

비고:

헤더를 테이블에 추가하려면 테이블의 상단 행을 클릭한 후 테이블 헤더 토글 버튼을 클릭합니다. 헤더를 사용하면 보조 기술을 사용하는 사용자가 테이블의 콘텐츠를 쉽게 탐색할 수 있습니다.

삽입 버튼 및 카드

삽입 버튼을 클릭합니다.
다음 옵션 중에서 선택합니다.
- 버튼 - 자세한 내용에 대한 링크를 제공하여 행동 지침을 추가합니다.
- 와이드 카드- 단일 카드를 삽입하여 콘텐츠를 표시하고, 더 많은 정보에 연결하며 그림을 표시할 수 있습니다.
- 카드- 여러 카드를 삽입합니다.

비고:

그림은 카드의 코드 보기 내부에서 호스팅 이미지에 대한 링크를 제공하여 편집할 수 있습니다.

HTML 추가

HTML을 사용하여 텍스트 모양을 사용자 정의할 수 있습니다.

텍스트 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
코드 뷰 옵션을 클릭합니다.

주의:

보안을 위해 텍스트 카드에는 임베드된 JavaScript가 지원되지 않습니다. 스크립트 태그가 무시됩니다.

다음의 HTML 요소가 허용됩니다.

'a', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
 'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
 'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
 'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
 'ul', 'center', 'style', 'div', 'span'

이러한 요소에는 다음과 같은 속성이 허용됩니다.


 All supported HTML elements allow : ['class', 'style'], 'a' : ['href', 'title', 'target', 'data-toggle', 'data-target', 'name'], 'blockquote': ['cite'],	'button'    : ['name', 'value', 'data-toggle', 'data-target', 'data-dismiss'], 'col' : ['span', 'width'], 'colgroup' : ['span', 'width'],	'div' : ['data-show', 'data-target', 'data-toggle'] 'img' : ['align', 'alt', 'height', 'src', 'title', 'width' ], 'ol' : ['start', 'type'], 'q' : ['cite'], 'table' : ['summary', 'width', 'class'], 'td' : ['abbr', 'axis', 'colspan', 'rowspan', 'width'], 'th' : ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
 'ul' : ['type']

범주 카드

범주를 사용하여 사용자가 사용 가능한 콘텐츠를 빠르게 찾을 수 있도록 사이트의 데이터셋을 그룹화할 수 있습니다.

범주카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
범주의 링크 텍스트를 편집합니다.
태그 쿼리 사용이나 그룹 사용을 선택합니다.
이 선택에 따라 사용자가 이 범주를 클릭했을 때 검색 결과에 반환되는 데이터셋이 결정됩니다.
- 태그 - 태그 쿼리를 입력합니다. .해당 엔터프라이즈 포털 항목에 일치하는 태그가 있는 모든 데이터셋이 검색 결과에 반환됩니다.
- 그룹 - 그룹을 선택합니다. 이 그룹 내의 모든 데이터셋이 검색 결과에 반환됩니다.
라이브러리에서 아이콘을 선택하는 경우:
1. 아이콘 선택을 선택합니다.
2. 모달에서 아이콘을 선택하고 선택을 클릭합니다.
  이 아이콘이 측면 패널에 표시됩니다.
3. 아이콘 오른쪽에 있는 회색 상자를 클릭하여 아이콘의 색상을 선택합니다.
사용자 고유의 아이콘을 사용하는 경우:
1. 아이콘의 URL을 제공합니다.
2. 아이콘에 대한 대체 텍스트를 제공하면 시력이 약한 사용자에게 도움을 주고 사이트의 접근성을 향상시킬 수 있습니다.
기본 측면 패널로 돌아가려면 사이트 편집기로 돌아가기를 클릭합니다.

팁:

사용자 정의 아이콘은 .svg나 투명한 .png 파일로 저장해야 합니다. 아이콘은 120x120픽셀에 맞게 크기가 조정됩니다.

연락처 정보 카드

데이터 소유자에게 이메일을 보낼 연락처 정보를 제공합니다.

연락처 정보카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
담당자 이메일 주소와 이메일 제목란을 제공합니다.
사용자가 홈페이지에서 이메일을 클릭하면 사용자의 이메일 편집기가 자동으로 열립니다.
기본 측면 패널로 돌아가려면 사이트 편집기로 돌아가기를 클릭합니다.

갤러리 카드

갤러리 카드를 사용하여 앱, 대시보드, 데이터셋, 사이트, 페이지, 웹맵, 문서를 나타낼 수 있습니다. 갤러리 카드는 기관의 ArcGIS Online 그룹에서 이러한 항목을 자동으로 검색합니다. 콘텐츠를 기관이나 특정 그룹에 추가하는 경우 레이아웃을 편집하지 않아도 새 응용프로그램 타일이 사이트에 나타납니다.

갤러리 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
표시 드롭다운 메뉴를 클릭한 다음 콘텐츠가 유형별로 표시되도록 선택하거나 개별 항목을 수동으로 선택하여 카드에 나타낼 항목을 선택합니다.
- 콘텐츠를 유형별로 표시하려면 동적을 클릭한 다음 앱, 대시보드, 데이터셋, 사이트, 페이지, 웹맵, 문서를 선택합니다. 추가 설정의 경우 표시된 카드의 수와 이러한 항목이 쿼리될 그룹이나 태그를 선택해야 합니다.
  팁:
  앱에는 애플리케이션, 양식(Survey123), 웹 매핑 애플리케이션 항목이 포함되어 있습니다. 지원되는 문서 유형에는 PDF, Microsoft Excel, Microsoft PowerPoint, iWork Keynote, iWork Pages, iWork 문서, Visio 문서가 포함됩니다.
- 혼합 콘텐츠를 표시하려면 수동을 클릭한 다음 콘텐츠 추가를 클릭하고 기관에 속한 앱, 데이터셋, 사이트, 페이지의 조합을 선택하여 콘텐츠를 개별적으로 선택합니다.
  팁:
  수동 표시 방식을 선택한 경우 사이트 편집기에서 카드 목록을 조정하여 카드가 레이아웃에 나타나는 순서를 바꿀 수 있습니다. 카드의 이름을 클릭하여 목록 내의 새 위치로 드래그 앤 드롭합니다.
스타일 드롭다운 메뉴에서 다음 옵션을 사용하여 갤러리 카드의 모양을 선택합니다.
- 이미지 - 아이콘이나 썸네일을 선택합니다. ArcGIS Online사이트 편집기사이트ArcGIS Online내 콘텐츠썸네일 편집ArcGIS Online항목 세부정보콘텐츠개요썸네일 편집항목 세부정보
- 모서리 - 각진 모서리나 둥근 모서리를 선택합니다.
- 버튼 텍스트 - 필요한 경우 해당 텍스트 상자에 새 이름을 입력하여 탐색 버튼의 이름을 바꿉니다.

iframe 카드

iframe 및 외부 리소스를 임베드합니다.

주의:

다른 웹사이트의 iframe 코드를 임베드하지 마세요. 임베드하려는 URL만 붙여넣어야 합니다.

iframe카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
iframe URL 및 iframe 높이를 제공합니다.
iframe에 제목을 추가합니다.
자동을 켜서 스크롤링을 활성화합니다.
적용을 클릭합니다.

비고:

HTTP가 사용된 iframe URL은 HTTPS가 사용되는 사이트 편집기에 나타나지 않습니다. 사이트를 저장한 후 확인하여 iframe이 제대로 나타나는지 살펴봅니다.

비디오 카드

비디오 카드를 추가하여 YouTube, Vimeo, Facebook 비디오를 임베드합니다.

미디어 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
Facebook, Vimeo, YouTube의 비디오 URL을 비디오 URL 필드에 붙여넣습니다.
비디오 출처에 따라 비디오 표시를 구성할 수 있는 추가 옵션이 나타납니다.
- Facebook 비디오의 경우 게시물 텍스트 표시를 선택하여 좋아요, 댓글, 공유의 개수와 기타 관련 텍스트를 표시할 수 있습니다. 항상 캡션 표시를 선택하면 비디오 캡션이 표시됩니다.
- Vimeo 비디오의 경우 비디오 제목 표시, 비디오 소유자 표시, 비디오 소유자 썸네일 표시, 비디오 반복 재생을 선택합니다.
- YouTube 비디오의 경우에는 YouTube 브랜딩 표시와 비디오 반복 재생을 선택합니다.
비디오 URL 옆의 복사 버튼을 클릭하면 해당 링크를 앱 내 다른 곳에 재사용할 수 있도록 클립보드에 저장할 수 있습니다.

소셜 미디어 카드

URL을 사용하여 사이트에서 소셜 미디어 게시물과 타임라인을 직접 공유합니다.

Facebook 게시물

단일 게시물을 표시하여 특정 콘텐츠를 강조 표시합니다.

소셜 미디어 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
공개적으로 공유된 Facebook 게시물의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다. 정확한 URL을 복사하려면 사이트 편집 모드로 돌아가기 전에 게시물의 타임스탬프(게시글의 좌측 상단에 있는 날짜나 시간)를 클릭한 다음 브라우저에 새 URL을 복사합니다.
필요한 경우 게시물 텍스트 표시 토글 키를 클릭하여 게시물과 관련된 텍스트를 표시할 수 있습니다.

Facebook 타임라인

더욱 다양하게 탐색할 수 있도록 Facebook 페이지의 타임라인, 이벤트, 메시지를 표시합니다.

소셜 미디어 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
공개적으로 공유된 Facebook 페이지의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다.
필요한 경우 다음 옵션의 조합을 클릭하여 켭니다.
- Facebook 페이지 탭을 켜면 페이지 머리글 아래에 타임라인 탭이 표시됩니다. 이벤트나 메시지와 함께 타임라인을 공유하려면 해당 옵션을 클릭하세요.
- 이벤트를 켜면 페이지의 이벤트 뷰에 대한 목록 뷰가 표시됩니다.
- 메시지를 켜면 사용자가 Facebook 메신저를 사용하여 메시지를 작성해 Facebook 페이지 관리자에게 보낼 수 있습니다.
- 큰 머리글 사용을 켜면 페이지 머리글의 크기를 늘리고 메시지 보내기 버튼 연결 사용자를 Facebook 메신저에 추가할 수 있습니다.
- 커버 사진 표시를 켜면 페이지 커버 사진이 표시됩니다.

Twitter 게시물

단일 Twitter 게시물을 표시하여 특정 트윗을 강조 표시합니다.

소셜 미디어 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
공개적으로 공유된 Twitter 게시물의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다. 단일 트윗의 링크를 가져오려면 게시물 우측 상단에 있는 추가 아이콘을 클릭한 다음 트윗 링크 복사하기를 선택합니다.
필요한 경우 옵션 메뉴에서 다음 옵션의 조합을 클릭하여 켭니다.
- 어두운 테마 표시를 켜면 디스플레이 색상이 반전됩니다.
- 트윗 너비 선택을 켜면 게시물 표시 크기를 작게, 보통, 크게 중에서 선택할 수 있습니다.
트윗 위치 선택을 켜면 왼쪽, 중앙, 오른쪽 정렬을 선택할 수 있습니다.

Twitter 타임라인

스크롤 가능한 Twitter 타임라인을 표시합니다.

소셜 미디어 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
공개적으로 공유된 Twitter 타임라인의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다.
필요한 경우 옵션 메뉴에서 다음 옵션의 조합을 클릭하여 켭니다.
- 컬렉션 높이 선택에서는 기본값을 선택하여 현재 표시 상태로 유지하거나 확장됨을 선택하여 타임라인의 더 많은 부분을 표시합니다.
- 트윗 제한을 켜면 타임라인에 표시되는 트윗 수를 설정할 수 있습니다.
- 어두운 테마 표시를 켜면 디스플레이 색상이 반전됩니다.
- 머리글 표시를 켜면 머리글이 표시됩니다. 마찬가지로 바닥글 표시를 선택하면 바닥글이 표시됩니다.
- 테두리 표시를 켜면 타임라인 둘레에 테두리가 표시됩니다.
- 배경 표시를 켜면 배경이 제거됩니다.

Twitter 컬렉션

사이트에 Twitter 컬렉션을 표시합니다. Twitter 컬렉션을 생성 방법에 대한 자세한 내용은 Twitter Developer 설명서의 트윗 컬렉션 선별 방법을 참고하세요.

소셜 미디어 카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
공개적으로 공유된 Twitter 컬렉션의 URL을 소셜 미디어 게시물 URL 필드에 붙여넣습니다.
필요한 경우 옵션 메뉴에서 다음 옵션의 조합을 클릭하여 켭니다.
- 트윗 제한을 활성화하면 컬렉션에 표시되는 트윗 수에 대해 제한을 설정할 수 있습니다.
- 확대된 높이를 활성화하면 더 많은 콜렉션을 한 번에 표시할 수 있습니다.
- 어두운 테마 표시는 텍스트 색상을 흰색으로 변경하고 어두운 회색 배경을 적용합니다.
- 헤더 표시는 콜렉션의 제목을 표시합니다. 마찬가지로 바닥글 표시를 선택하면 바닥글이 표시되어 임베드하거나 Twitter에서 볼 수 있는 링크가 제공됩니다.
- 경계 표시를 켜면 카드 둘레에 경계가 표시됩니다.
- 배경 표시를 켜면 흰색 배경이 카드에 적용됩니다. 어두운 테마 표시도 선택되어 있으면 어두운 회색 배경이 적용됩니다.

요약 통계 카드

요약 통계를 사용하여 핵심성과지표(KPI) 등에 대한 데이터를 한눈에 파악할 수 있습니다. 요약 통계는 데이터셋 쿼리를 통해 생성되며 데이터셋이 업데이트되면 자동으로 업데이트됩니다. 내부적으로 공유된 데이터를 사용하여 생성된 요약 통계는 접근 권한을 가진 사용자만 로그인을 통해 접근할 수 있습니다.

요약 통계카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
항목 선택기를 열어 원하는 데이터 서비스를 찾으려면 데이터 추가(+)를 클릭합니다. 사이트 편집 시 통계 아래의 원본 링크는 데이터셋 미리 보기 페이지의 항목 세부정보 페이지로 연결됩니다.
통계 필드의 경우 선택한 서비스에서 필드를 선택합니다. 이 필드는 다음 단계에서 사용됩니다.
통계 유형의 경우 선택한 필드에서 수행할 작업의 유형을 선택합니다.
- 텍스트 필드와 날짜 필드의 경우 개수, 최소값, 최대값을 선택합니다.
- 숫자 필드의 경우 개수, 합계, 최소값, 최대값, 평균, 표준편차, 분산을 선택합니다.
필요한 경우 다음과 같이 통계에 필터를 추가합니다.
1. 필터에 사용할 속성을 선택합니다.
2. 추가를 선택합니다.
3. 필터 입력이 표시될 새 속성 상자를 선택합니다. 입력 상자는 필드 유형에 따라 달라집니다.
4. 원하는 필터를 입력합니다.
5. 필터 상자 바깥쪽을 클릭하거나 키보드에서 Enter 키를 누릅니다.
제목 텍스트 상자에 제목을 입력합니다.
필요한 경우 후행 텍스트에 텍스트를 입력하여 통계에 대한 세부정보를 제공하고 통계 자체의 강조 색상 설정을 변경합니다.

차트 카드

데이터셋을 사용하여 간단한 차트를 직접 생성하거나 사용자 자신의 차트 JSON을 입력하여 사용자 정의 차트를 생성합니다. 비공개적으로 공유된 데이터로 생성된 차트는 팀이나 기관에 대한 접근 권한을 가진 사용자만 로그인을 통해 볼 수 있습니다.

가로 막대형 차트

막대형 차트는 선택한 데이터셋에 대한 쿼리를 통해 생성되며 데이터셋이 업데이트되면 자동으로 업데이트됩니다.

차트카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
기본 설정에 따라 막대형 차트가 선택됩니다.
데이터 추가(+)를 클릭합니다.
사용 가능한 서비스에서 항목을 선택합니다.
범주 속성 선택의 경우 데이터의 기본 차트 항목을 선택합니다.
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
필요한 경우 값 속성 선택을 사용하여 범주 속성의 값 메트릭으로 적용할 숫자 필드를 선택합니다. 선택하면 이 필드의 기본 통계 연산은 합계가 됩니다. 값 속성 선택 선택기의 오른쪽 드롭다운을 사용하여 통계 연산을 변경할 수 있습니다. 값 속성은 최소, 최대, 합계, 평균, 개수를 지원합니다. 개수를 선택하면 값 속성이 선택 취소됩니다(범주 속성을 계산할 추가 필드가 필요하지 않으므로).
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
옵션 메뉴를 클릭하여 다음 설정을 사용하여 차트 표시를 사용자 정의합니다.
- 정렬 옵션을 사용하면 속성 데이터의 표시 방식을 선택할 수 있습니다. 속성을 선택한 다음 해당 속성 옆의 정렬 아이콘을 클릭하여 데이터를 오름차순이나 내림차순으로 표시합니다.
- 높이(px) 텍스트 필드에 차트의 높이 값(픽셀 단위)을 설정합니다.
- 차트 제목 옆의 전환 버튼을 클릭하여 차트의 제목이 표시되도록 선택합니다. 제목을 표시할 경우 제공된 텍스트 필드에 해당 이름을 입력하고 정렬을 선택합니다.
- 색상 코드를 입력하여 기본 차트 색상을 설정하거나 색상 선택기를 클릭하여 색상을 선택합니다.
- 범주 레이블과 값 레이블의 텍스트를 입력합니다.

파이 차트

파이 차트는 선택한 데이터셋에 대한 쿼리를 통해 생성되며 데이터셋이 업데이트되면 자동으로 업데이트됩니다.

차트카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
원형 파이 차트 버튼을 클릭하여 파이 차트를 선택합니다.
데이터 추가(+)를 클릭합니다.
사용 가능한 서비스에서 항목을 선택합니다.
범주 속성 선택의 경우 데이터의 기본 차트 항목을 선택합니다.
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
필요한 경우 값 속성 선택을 사용하여 범주 속성의 값 메트릭으로 적용할 숫자 필드를 선택합니다. 선택하면 해당 필드의 기본 통계 연산은 합계가 됩니다. 값 속성 선택 선택기의 오른쪽 드롭다운 화살표를 클릭하여 통계 연산 설정을 변경할 수 있습니다. 값 속성은 최소, 최대, 합계, 평균, 개수를 지원합니다. 개수를 선택하면 값 속성이 선택 취소됩니다(범주 속성을 계산할 추가 필드가 필요하지 않으므로).
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
옵션 메뉴를 클릭하여 다음 설정을 사용하여 차트 표시를 사용자 정의합니다.
- 정렬 옵션을 사용하면 속성 데이터의 표시 방식을 선택할 수 있습니다. 속성을 선택한 다음 해당 속성 옆의 정렬 아이콘을 클릭하여 데이터를 오름차순이나 내림차순으로 표시합니다.
- 높이(px) 텍스트 필드에 차트의 높이 값(픽셀 단위)을 설정합니다.
- 차트 제목 옆의 전환 버튼을 클릭하여 차트의 제목이 표시되도록 선택합니다. 제목을 표시할 경우 제공된 텍스트 필드에 해당 이름을 입력하고 정렬을 선택합니다.
- 도구 설명의 각 원형 쐐기(Wedge) 레이블에 대한 범주 레이블 텍스트와 도구 설명의 지표 레이블에 대한 값 레이블 텍스트를 설정합니다.

선형 차트

선형 차트는 선택한 데이터셋에 대한 쿼리를 통해 생성되며 데이터셋이 업데이트되면 자동으로 업데이트됩니다.

차트카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
선형 차트 버튼을 클릭하여 선형 차트를 선택합니다.
데이터 추가(+)를 클릭합니다.
사용 가능한 서비스에서 항목을 선택합니다.
범주 속성 선택의 경우 데이터의 기본 차트 항목을 선택합니다.
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
필요한 경우 값 속성 선택을 사용하여 범주 속성의 값 메트릭으로 적용할 숫자 필드를 선택합니다. 선택하면 해당 필드의 기본 통계 연산은 합계가 됩니다. 값 속성 선택 선택기의 오른쪽 드롭다운 화살표를 클릭하여 통계 연산 설정을 변경할 수 있습니다. 값 속성은 최소, 최대, 합계, 평균, 개수를 지원합니다. 개수를 선택하면 값 속성이 선택 취소됩니다(범주 속성을 계산할 추가 필드가 필요하지 않으므로).
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
옵션 메뉴를 클릭하여 다음 설정을 사용하여 차트 표시를 사용자 정의합니다.
- 정렬 옵션을 사용하면 속성 데이터의 표시 방식을 선택할 수 있습니다. 속성을 선택한 다음 해당 속성 옆의 정렬 아이콘을 클릭하여 데이터를 오름차순이나 내림차순으로 표시합니다.
- 높이(px) 텍스트 필드에 차트의 높이 값(픽셀 단위)을 설정합니다.
- 차트 제목 옆의 전환 버튼을 클릭하여 차트의 제목이 표시되도록 선택합니다. 제목을 표시할 경우 제공된 텍스트 필드에 해당 이름을 입력하고 정렬을 선택합니다.
- 색상 코드를 입력하여 기본 차트 색상을 설정하거나 색상 선택기를 클릭하여 색상을 선택합니다.
- 도구 설명의 각 포인트 레이블에 대한 범주 레이블 텍스트와 도구 설명의 지표 레이블에 대한 값 레이블 텍스트를 설정합니다.

산점도

산점도는 선택한 데이터셋에 대한 쿼리를 통해 생성되며 데이터셋이 업데이트되면 자동으로 업데이트됩니다.

차트카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
산점도 버튼을 클릭하여 선형 차트를 선택합니다.
데이터 추가(+)를 클릭합니다.
사용 가능한 서비스에서 항목을 선택합니다.
X축 속성 선택의 경우 데이터의 기본 차트 항목을 선택합니다.
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
Y축 속성 선택 필드의 속성을 선택합니다. 범주 속성의 값 지표로 적용할 숫자 필드를 선택합니다.
차트에서 숫자 및 문자열 필드를 사용할 수 있습니다. 기본 설정에 따라 범주 속성을 선택하면 결과 차트는 해당 속성의 개수가 됩니다.
옵션 메뉴를 클릭하여 다음 설정을 사용하여 차트 표시를 사용자 정의합니다.
- 정렬 옵션을 사용하면 속성 데이터의 표시 방식을 선택할 수 있습니다. 속성을 선택한 다음 해당 속성 옆의 정렬 아이콘을 클릭하여 데이터를 오름차순이나 내림차순으로 표시합니다.
- 높이(px) 텍스트 필드에 차트의 높이 값(픽셀 단위)을 설정합니다.
- 차트 제목 옆의 전환 버튼을 클릭하여 차트의 제목이 표시되도록 선택합니다. 제목을 표시할 경우 제공된 텍스트 필드에 해당 이름을 입력하고 정렬을 선택합니다.
- 색상 코드를 입력하여 기본 차트 색상을 설정하거나 색상 선택기를 클릭하여 색상을 선택합니다.
- 차트에 표시할 X축 레이블과 Y축 레이블을 설정합니다.

JSON 차트

사용자 정의 차트는 특정 차트 사양이 사용된 JSON을 통해 생성됩니다.

차트카드를 기존 행에 드래그합니다.
해당 카드 위에 마우스를 놓고 설정 버튼을 클릭하여 편집 모드로 전환합니다.
JSON 파일을 선택합니다.
JSON 차트 사양 필드에 JSON을 입력합니다.
필요에 따라 옵션 섹션에서 차트 제목과 높이(픽셀 단위) 설정을 활성화/비활성화하고 사용자 정의할 수 있습니다.

JSON 사양

사용자 정의 JSON을 입력하면 Cedar 라이브러리를 활용하는 사용자 정의 차트를 생성할 수 있습니다. 사양은 다음과 같은 요소로 구성됩니다.

데이터셋

데이터셋 배열은 ArcGIS 피처 서비스 URL과 쿼리 매개변수를 지정합니다. 쿼리 매개변수에 대한 자세한 내용은 REST API 설명서를 참조하세요.

{ "datasets": [ { "url": "SampleArcGISFeatureService_URL", "name" : "Number_of_SUM",
"query": { "groupByFieldsForStatistics": "Zip", "outStatistics": [{
"statisticType": "sum", "onStatisticField": "Number_of",
"outStatisticFieldName": "Number_of_SUM" }] } } ]
}

계열

계열 배열을 사용하면 서비스 응답의 필드 간 매핑과 차트의 시각적 요소(산점도 차트의 경우 x, y축, 색상, 크기, 원형 차트의 경우 반경)를 지정할 수 있습니다.

{ "series": [ { "source": "Number_of_SUM", "category": { "field": "Type", "label": "Facility
Use" }, "value": { "field":"Number_of_SUM","label":"Total Students" }} ] }

덮어쓰기

덮어쓰기 등록정보를 사용하면 전체 차트에 대한 시각적 덮어쓰기(예: 색상 또는 위치 지정 등)를 지정할 수 있습니다.

"overrides": {
      "legend": {
          "enabled": true
      },
      "backgroundColor": "#E6E6FA",
      "backgroundAlpha": 1
  }
}

사양

사양 등록정보를 사용하면 사용자 정의 차트에 대한 완전한 시더(Cedar) 사양을 입력할 수 있습니다. 기존 차트 사양에 대해서는 예시를 확인하세요.

예시

막대형 차트:

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Number_of_SUM",
      "query": {
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [
          {
            "statisticType": "sum",
            "onStatisticField": "Number_of",
            "outStatisticFieldName": "Number_of_SUM"
          }
        ]
      }
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": {"field": "Number_of_SUM", "label": "Number of Students"},
      "source": "Number_of_SUM"
    }
  ]
}

수평 막대형 차트:

{
  "type": "bar-horizontal",  "datasets": [    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",      "name": "Number_of_SUM",      "query": {
        "orderByFields": "Number_of_SUM DESC",        "groupByFieldsForStatistics": "Type",        "outStatistics": [          {
            "statisticType": "sum",            "onStatisticField": "Number_of",            "outStatisticFieldName": "Number_of_SUM"
          }
        ]      }
    }
  ],  "series": [    {
      "category": {"field": "Type", "label": "Type"},      "value": {"field": "Number_of_SUM", "label": "Number of Students"},      "source": "Number_of_SUM"
    }
  ],  "overrides": {
    "categoryAxis": {
      "labelRotation": -45    }
  }
}

그룹 막대형 차트:

참고: 각 계열은 그룹과 일치됩니다.

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

산점도 차트:

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

버블 산점도 차트:

{
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

타임라인 차트:

참고: 범주는 날짜와 시간 필드여야 합니다.

 {
  "type": "bar",
  "datasets": [
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Jordan",
      "query": {
        "where": "City='Jordan'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Dewitt",
      "query": {
        "where": "City='Dewitt'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    },
    {
      "url": "https://services.arcgis.com/uDTUpUPbk8X8mXwl/arcgis/rest/services/Public_Schools_in_Onondaga_County/FeatureServer/0",
      "name": "Fayetteville",
      "query": {
        "where": "City='Fayetteville'",
        "orderByFields": "Number_of_SUM DESC",
        "groupByFieldsForStatistics": "Type",
        "outStatistics": [{
          "statisticType": "sum",
          "onStatisticField": "Number_of",
          "outStatisticFieldName": "Number_of_SUM"
        }]
      },
      "join": "Type"
    }
  ],
  "series": [
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Jordan Students"},
      "source": "Jordan"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Dewitt Students"},
      "source": "Dewitt"
    },
    {
      "category": {"field": "Type", "label": "Type"},
      "value": { "field": "Number_of_SUM", "label": "Fayetteville Students"},
      "source": "Fayetteville"
    }
  ]
}

바닥글

사이트 편집기의 기본 설정에는 바닥글이 없습니다. 사이트의 모든 페이지에서 표시될 영구적인 바닥글을 생성하기 위해 사용자 정의 바닥글을 만들어야 합니다.

바닥글 섹션에서 사용자 정의를 선택합니다.
기본 바닥글이 페이지에 나타나며 CSS 상자가 측면 패널에 나타납니다.
바닥글의 우측 하단에 있는 설정 버튼을 클릭하여 HTML을 편집합니다.
설정 버튼을 다시 클릭하여 변경 내용을 확인합니다.
측면 패널의 CSS 상자를 수정한 후 변경 사항 적용을 클릭하여 HTML 결과를 확인합니다.

팁:

바닥글 HTML에는 임베드된 JavaScript가 지원되지 않습니다. 스크립트 태그가 무시됩니다.

이 항목에 대한 피드백을 제공하시겠습니까?