기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # Highcharts 사용 Highcharts 시각적 객체를 사용하여 [Highcharts Core 라이브러리](https://www.highcharts.com/blog/products/highcharts/)를 사용하는 사용자 지정 차트 유형 및 시각적 객체를 생성합니다. Highcharts 시각적 객체는 빠른 작성자가 [Highcharts API](https://api.highcharts.com/highcharts/)에 직접 액세스할 수 있도록 합니다. Highcharts 시각적 객체를 구성하려면 Quick 작성자가 Quick의 시각적 객체에 Highcharts JSON 스키마를 추가해야 합니다. 작성자는 빠른 표현식을 사용하여 빠른 필드를 참조하고 하이차트 시각적 객체를 생성하는 데 사용하는 JSON 스키마의 형식 지정 옵션을 참조할 수 있습니다. JSON **차트 코드** 편집기는 입력 JSON 스키마가 올바르게 구성되었는지 확인하기 위해 자동 완성 및 실시간 검증에 대한 컨텍스트 지원을 제공합니다. 보안을 유지하기 위해 Highcharts 시각적 객체 편집기는 CSS, JavaScript 또는 HTML 코드 입력을 허용하지 않습니다. Amazon Quick의 Highcharts Visuals에 대한 자세한 내용은 [DemoCentral](https://democentral.learnquicksight.online/#)의 [Highcharts Visual QuickStart 가이드를](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) 참조하세요. 다음 이미지는 Quick에서 Highcharts 시각적 객체의 **차트 코드** JSON 편집기에 구성된 립스틱 차트를 보여줍니다. ![\[alt text not found\]](http://docs.aws.amazon.com/ko_kr/quick/latest/userguide/images/highcharts-example1.png) Quick의 Highcharts 시각적 객체로 생성할 수 있는 시각적 객체의 자세한 예는 [Highcharts 데모를 참조하세요](https://www.highcharts.com/demo). ## 고려 사항 Amazon Quick에서 Highcharts 시각적 객체 생성을 시작하기 전에 Highcharts 시각적 객체에 적용되는 다음 제한 사항을 검토하세요. + 다음 JSON 값은 Highcharts **차트 코드** JSON 편집기에서 지원되지 않습니다. + 함수 + 날짜 + 정의되지 않은 값 + GeoJSON 파일 또는 기타 이미지에 대한 링크는 Highcharts 시각적 객체에서 지원되지 않습니다. + 필드 색상은 Highcharts 시각적 객체에서 사용할 수 없습니다. 기본 테마 색상은 모든 Highcharts 시각적 객체에 적용됩니다. ## Highcharts 시각적 객체 생성 다음 절차에 따라 Amazon Quick에서 Highcharts 시각적 객체를 생성합니다. 1. [Quick 콘솔](https://quicksight.aws.amazon.com/)을 엽니다. 1. Highcharts 시각적 객체를 추가하려는 빠른 분석을 엽니다. 1. 애플리케이션 표시줄에서 **추가**를 선택한 다음 **시각화 추가**를 선택합니다. 1. **시각적 객체 유형** 창에서 Highcharts 시각적 객체 아이콘을 선택하세요. 분석 시트에 빈 시각적 객체가 나타나고 왼쪽에서 **속성** 창이 열립니다. 1. **속성** 창에서 **표시 설정** 섹션을 확장하고 다음 작업을 수행하세요. 1. **제목 편집**에서 페인트 브러시 아이콘을 선택하고 시각적 객체의 제목을 입력한 다음 **저장**을 선택하세요. 또는 눈 아이콘을 선택하여 제목을 숨기세요. 1. (선택 사항) **자막 편집**에서 페인트 브러시 아이콘을 선택하고 시각적 객체의 부제목을 입력한 다음 **저장**을 선택하세요. 또는 눈 아이콘을 선택하여 부제목을 숨기세요. 1. (선택 사항) **대체 텍스트**에 시각적 객체의 대체 텍스트를 추가하세요. 1. **데이터 포인트 제한** 섹션을 확장하세요. **표시할 데이터 포인트 수**에는 시각적 객체에서 표시할 데이터 포인트 수를 입력하세요. Highcharts 시각적 객체는 최대 10,000개의 데이터 포인트를 표시할 수 있습니다. 1. **차트 코드** 섹션을 확장합니다. 1. **차트 코드** JSON 편집기에 JSON 스키마를 입력하세요. 편집기는 입력 JSON이 올바르게 구성되었는지 확인하기 위해 컨텍스트 지원 및 실시간 검증을 제공합니다. Quick이 식별하는 모든 오류는 **오류** 드롭다운에서 볼 수 있습니다. 아래 예제에서는 업계별 올해 매출을 표시하는 립스틱 차트를 생성하는 JSON 스키마를 보여줍니다. ``` { "xAxis": { "categories": ["getColumn", 0] }, "yAxis": { "min": 0, "title": { "text": "Amount ($)" } }, "tooltip": { "headerFormat": "{point.key}", "pointFormat": "", "footerFormat": "
{series.name}: ${point.y:,.0f}
", "shared": true, "useHTML": true }, "plotOptions": { "column": { "borderWidth": 0, "grouping": false, "shadow": false } }, "series": [ { "type": "column", "name": "Current Year Sales", "color": "rgba(124,181,236,1)", "data": ["getColumn", 1], "pointPadding": 0.3, "pointPlacement": 0.0 } ] } ``` 1. **코드 적용**을 선택하세요. 빠른는 JSON 스키마를 분석에 표시되는 시각적 객체로 변환합니다. 렌더링된 시각적 객체를 변경하려면 JSON 스키마에서 적절한 속성을 업데이트하고 **코드 적용**을 선택하세요. 1. (선택 사항) **참조** 드롭다운을 열어 유용한 Highctarts 참조 자료 링크에 액세스하세요. 렌더링된 시각적 객체에 만족하면 속성 창을 닫으세요. Highcharts 시각적 객체를 구성하는 데 사용할 수 있는 Quick Sight 특정 표현식에 대한 자세한 내용은 섹션을 참조하세요[Highcharts 시각적 객체를 위한 Amazon Quick JSON 표현식 언어](highchart-expressions.md). ## 대화형 Highchart 기능 Amazon Quick Sight의 차트 시각화는 사용자 지정 작업, 강조 표시 및 사용자 지정 필드 색상 일관성을 지원하므로 다른 Quick Sight 시각적 객체와 원활하게 통합되는 시각적으로 일관된 대화형 차트를 생성할 수 있습니다. ### 사용자 지정 작업 사용자 지정 작업을 사용하면 Highchart 시각화에서 모든 데이터 포인트에 대한 특정 동작을 정의할 수 있습니다. 이 기능은 Quick Sight의 기존 작업 프레임워크와 원활하게 통합되어 사용자 클릭에 응답하는 대화형 차트를 생성할 수 있습니다. 시스템은 현재 단일 데이터 포인트 선택을 지원하므로 사용자 상호 작용을 정확하게 제어할 수 있습니다. 사용자 지정 작업은 선형 차트, 막대 차트, 누적 막대 차트 등 다양한 차트 유형에서 구현할 수 있습니다. 사용자 지정 작업을 구현하려면 Highcharts JSON 구성을 수정해야 합니다. 시리즈 구성에 이벤트 블록을 추가하여 클릭 이벤트 및 이에 대응하는 작업을 지정합니다. 예제: ``` { "series": [{ "type": "line", "data": ["getColumn", 1], "name": "value", "events": { "click": [ "triggerClick", { "rowIndex": "point.index" } ] } }] ``` 이 구성을 사용하면 차트의 데이터 포인트에서 클릭 이벤트를 활성화하여 Quick Sight가 선택한 데이터를 기반으로 사용자 지정 작업을 처리할 수 있습니다. ### 교차 시각적 객체 강조 표시 교차 시각적 객체 강조 표시는 다양한 차트 사이에서 시각적 객체 연결을 생성하여 대시보드의 상호 작용을 개선합니다. 사용자가 한 차트에서 요소를 선택하면 다른 시각적 객체에서 관련 요소가 자동으로 강조 표시되고 관련 없는 요소는 흐리게 표시됩니다. 이 기능은 사용자가 여러 시각화에서 관계와 패턴을 빠르게 식별하여 데이터 이해 및 분석을 개선하는 데 도움이 됩니다. 교차 시각적 객체 강조 표시를 활성화하고 필드 색상 일관성을 유지하려면 Highcharts JSON 구성에서 `quicksight` 절을 사용합니다. 이 절은 Highcharts 렌더링과 Quick의 시각적 상호 작용 시스템 간의 브리지 역할을 합니다. 다음은 설정 방법에 대한 예제입니다. ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["dataMarkMatch", ["getColumnName", 0], "series.name"], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], "color": ["getColumnColorOverrides", ["getColumnName", 0], "series.name"] }] } } ``` 이 구성은 Quick Sight의 JSON 표현식 언어를 사용하여 사용자 상호 작용 및 사전 정의된 색상 체계를 기반으로 불투명도 및 색상과 같은 시각적 속성을 동적으로 수정합니다. 더 복잡한 시나리오의 경우 여러 조건을 기반으로 강조 표시를 설정할 수 있습니다. 이를 통해 시각화에서 보다 세심한 상호 작용이 가능합니다. 다음 예제에서는 분기 또는 요일을 기반으로 요소를 강조 표시합니다. ``` { "quicksight": { "pointRender": ["updatePointAttributes", { "opacity": ["case", ["||", ["dataMarkMatch", "quarter", "series.name"], ["dataMarkMatch", "day_of_week", "point.name"] ], 1, // Full opacity for matching elements 0.1 // Dim non-matching elements ], }] } } ``` ### 필드 수준 색상 일관성 효과적인 데이터 해석을 위해서는 대시보드에서 시각적 객체의 일관성을 유지하는 것이 매우 중요합니다. 필드 수준 색상 일관성 기능은 특정 차원에 할당된 색상이 대시보드의 모든 시각적 객체에서 유지되도록 보장합니다. 이러한 일관성을 통해 사용자는 여러 차트 유형 및 보기에서 특정 데이터 범주를 빠르게 인식하고 추적할 수 있으므로 전반적인 사용자 경험과 데이터 이해도가 향상됩니다. # Highcharts 시각적 객체를 위한 Amazon Quick JSON 표현식 언어 Highcharts 시각적 객체는 대부분의 [유효한 JSON 값](https://www.w3schools.com/js/js_json_datatypes.asp), 표준 산술 연산자, 문자열 연산자 및 조건부 연산자를 허용합니다. 다음 JSON 값은 Highcharts 시각적 객체에서 지원되지 않습니다. + 함수 + 날짜 + 정의되지 않은 값 빠른 작성자는 JSON 표현식 언어를 사용하여 고차 시각적 객체에 JSON 스키마를 생성할 수 있습니다. JSON 표현식 언어는 JSON을 API 또는 데이터세트에 바인딩하여 JSON 구조의 동적 입력 및 수정을 허용하는 데 사용됩니다. 또한 개발자는 JSON 표현식 언어를 사용하여 간결하고 직관적인 표현식으로 JSON 데이터를 팽창하고 변환할 수 있습니다. JSON 표현식 언어를 사용하면 표현식이 배열로 표현되며, 여기서 첫 번째 요소는 작업을 지정하고 후속 요소는 인수에 해당합니다. 예를 들어 `["unique", [1, 2, 2]]`는 `[1, 2, 2]` 배열에 `unique` 작업을 적용하여 `[1, 2]`를 생성합니다. 이 배열 기반 구문에서는 유연한 표현식을 사용할 수 있으며 JSON 데이터에 대한 복잡한 변환을 허용합니다. JSON 표현식 언어는 *중첩 표현식*을 지원합니다. 중첩 표현식은 다른 표현식을 인수로 포함하는 표현식입니다. 예를 들어 `["split", ["toUpper", "hello world"], " "]`는 먼저 `hello world` 문자열을 대문자로 변환한 다음 이를 단어 배열로 분할하여 `["HELLO", "WORLD"]`를 생성합니다. Amazon Quick에서 Highcharts 시각적 객체의 JSON 표현식 언어에 대해 자세히 알아보려면 다음 섹션을 사용하세요. **Topics** + [산술](jle-arithmetics.md) + [배열 연산자](jle-arrays.md) + [Amazon Quick 표현식](jle-qs-expressions.md) # 산술 다음 테이블에는 JSON 표현식 언어와 함께 사용할 수 있는 산술 표현식이 나와 있습니다. | 연산 | 표현식 | 입력 | 출력 | | --- | --- | --- | --- | | 덧셈 | ["\$1", operand1, operand2] | \$1 sum: ["\$1", 2, 4] \$1 | \$1 sum: 6 \$1 | | 뺄셈 | ["-", operand1, operand2] | \$1 difference: ["-", 10, 3] \$1 | \$1 difference: 7 \$1 | | 곱셈 | ["\$1", operand1, operand2] | \$1 product: ["\$1", 5, 6] \$1 | \$1 product: 30 \$1 | | 나눗셈 | ["/", operand1, operand2] | \$1 quotient: ["/", 20, 4] \$1 | \$1 quotient: 5 \$1 | | 모듈로 | ["%", operand1, operand2] | \$1 remainder: ["%", 15, 4] \$1 | \$1 remainder: 3 \$1 | | 거듭제곱 | ["\$1\$1", base, exponent] | \$1 power: ["\$1\$1", 2, 3] \$1 | \$1 power: 8 \$1 | | 절댓값 | ["abs", operand] | \$1 absolute: ["abs", -5] \$1 | \$1 absolute: 5 \$1 | | Square Root(제곱 근) | ["sqrt", operand] | \$1 sqroot: ["sqrt", 16] \$1 | \$1 sqroot: 4 \$1 | | 로그(밑 10) | ["log10", operand] | \$1 log: ["log10", 100] \$1 | \$1 log: 2 \$1 | | 자연 로그 | ["ln", operand] | \$1 ln: ["ln", Math.E] \$1 | \$1 ln: 1 \$1 | | 반올림 | ["round", operand] | \$1 rounded: ["round", 3.7] \$1 | \$1 rounded: 4 \$1 | | 내림 | ["floor", operand] | \$1 floor: ["floor", 3.7] \$1 | \$1 floor: 3 \$1 | | 올림 | ["ceil", operand] | \$1 ceiling: ["ceil", 3.2] \$1 | \$1 ceiling: 4 \$1 | | 사인 | ["sin", operand] | \$1 sine: ["sin", 0] \$1 | \$1 sine: 0 \$1 | | 코사인 | ["cos", operand] | \$1 cosine: ["cos", 0] \$1 | \$1 cosine: 1 \$1 | | 탄젠트 | ["tan", operand] | \$1 tangent: ["tan", Math.PI] \$1 | \$1 tangent: 0 \$1 | # 배열 연산자 JSON 표현식 언어를 사용하면 다음 함수에 대한 일반 배열 조작을 수행할 수 있습니다. + `map` - 배열의 각 요소에 매핑 함수를 적용하고 변환된 값이 포함된 새 배열을 반환합니다. 예를 들어 `["map", [1, 2, 3], ["*", ["item"], 2]]`는 `[1, 2, 3]` 배열의 각 요소에 2를 곱하여 해당 요소를 매핑합니다. + `filter` - 지정된 조건을 기준으로 배열을 필터링하고 조건을 충족하는 요소만 포함된 새 배열을 반환합니다. 예를 들어 `["filter", [1, 2, 3, 4, 5], ["==", ["%", ["item"], 2], 0]]`은 `[1, 2, 3, 4, 5]` 배열을 필터링하여 짝수만 포함합니다. + `reduce` - 각 요소에 reducer 함수를 적용하고 결과를 누적하여 배열을 한의 값으로 줄입니다. 예를 들어 `["reduce", [1, 2, 3, 4, 5], ["+", ["acc"], ["item"]], 0]`은 `[1, 2, 3, 4, 5]` 배열을 해당 요소의 합계로 줄입니다. + `get` - 키 또는 인덱스를 지정하여 객체 또는 배열에서 값을 검색합니다. 예를 들어 `["get", ["item"], "name"]`은 현재 항목에서 `"name"` 속성 값을 검색합니다. + `unique` - 이 배열의 경우 이 배열 내 고유한 항목만 반환합니다. 예를 들어, `["unique", [1, 2, 2]]`은 `[1, 2]`을 반환합니다. # Amazon Quick 표현식 Amazon Quick은 Highcharts 시각적 객체의 기능을 개선하기 위해 추가 표현식을 제공합니다. 다음 섹션을 사용하여 차트가 많은 시각적 객체의 일반적인 빠른 표현식에 대해 자세히 알아보세요. Amazon Quick의 JSON 표현식 언어에 대한 자세한 내용은 [DemoCentral](https://democentral.learnquicksight.online/#)의 [Highcharts Visual QuickStart 가이드를](https://democentral.learnquicksight.online/#Dashboard-FeatureDemo-Highcharts-Visual) 참조하세요. **Topics** + [`getColumn`](#highcharts-expressions-getcolumn) + [`formatValue`](#highcharts-expressions-formatvalue) ## `getColumn` `getColumn` 표현식을 사용하여 지정된 열 인덱스의 값을 반환합니다. 예를 들어 다음 테이블에서는 범주 및 가격과 함께 제품 목록을 보여줍니다. | 제품 이름 | 카테고리 | 가격 | | --- | --- | --- | | 제품 A | 기술 | 100 | | 제품 B | 소매업 | 50 | | 제품 C | 소매업 | 75 | 다음 `getColumn` 쿼리는 가격과 함께 모든 제품 이름을 표시하는 배열을 생성합니다. ``` { product name: ["getColumn", 0], price: ["getColumn", 2] } ``` 다음 JSON이 반환됩니다. ``` { product name: ["Product A", "Product B", "Product C"], price: [100, 50, 75] } ``` 다음 예제와 같이 한 번에 여러 열을 전달하여 배열의 배열을 생성할 수도 있습니다. **입력** ``` { values: ["getColumn", 0, 2] } ``` **출력** ``` { values: [["Product A", 100], ["Product B", 50], ["Product C", 75]] } ``` `getColumn`과 마찬가지로 다음 표현식을 사용하여 필드 웰 또는 테마에서 열 값을 반환할 수 있습니다. + `getColumnFromGroupBy`는 그룹화 기준 필드에서 열을 반환합니다. 두 번째 인수는 반환할 열의 인덱스입니다. 예를 들어 `["getColumnFromGroupBy", 0]`은 첫 번째 필드의 값을 배열로 반환합니다. 여러 인덱스를 전달하여 각 요소가 그룹화 기준 필드 웰의 필드에 해당하는 배열의 배열을 가져올 수 있습니다. + `getColumnFromValue`는 값 필드 웰에서 열을 반환합니다. 여러 인덱스를 전달하여 각 요소가 값 필드 웰의 필드에 해당하는 배열의 배열을 가져올 수 있습니다. + `getColorTheme`는 다음 예제와 같이 빠른 테마의 현재 색상 팔레트를 반환합니다. ``` { "color": ["getColorTheme"] } ``` ``` { "color": ["getPaletteColor", "secondaryBackground"] } ``` **예제** ![\[alt text not found\]](http://docs.aws.amazon.com/ko_kr/quick/latest/userguide/images/get-column-example.png) `getColumn`은 테이블의 모든 열에 액세스할 수 있습니다. + `["getColumn", 0]` - `[1, 2, 3, 4, 5, ...]` 배열을 반환함 + `["getColumn", 1]` - `[1, 1, 1, 1, 1, ...]` 배열을 반환함 + `["getColumn", 2]` - `[1674, 7425, 4371, ...]` 배열을 반환함 `getColumnFromGroupBy`도 비슷하게 작동하지만 해당 인덱스는 그룹화 기준 필드 웰의 열로 제한됩니다. + `["getColumnFromGroupBy", 0]` - `[1, 2, 3, 4, 5, ...]` 배열을 반환함 + `["getColumnFromGroupBy", 1]` - `[1, 1, 1, 1, 1, ...]` 배열을 반환함 + `["getColumnFromGroupBy", 2]` - 그룹화 기준 필드 웰에 열이 두 개뿐이므로 작동하지 않음 `getColumnFromValue`도 비슷하게 작동하지만 해당 인덱스는 값 필드 웰의 열로 제한됩니다. + `["getColumnFromValue", 0]` - `[1, 2, 3, 4, 5, ...]` 배열을 반환함 + `["getColumnFromValue", 1]` - 값 필드 웰에 열이 하나만 있으므로 작동하지 않음 + `["getColumnFromValue", 2]` - 값 필드 웰에 열이 하나만 있으므로 작동하지 않음 ## `formatValue` `formatValue` 표현식을 사용하여 값에 빠른 형식을 적용합니다. 예를 들어 다음 표현식은 빠른 필드 모음의 첫 번째 필드에 지정된 형식 값으로 x축 레이블의 형식을 지정합니다. ``` "xAxis": { "categories": ["getColumn", 0], "labels": { "formatter": ["formatValue", "value", 0] } } ```