기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Highcharts 사용

Highcharts 시각적 객체를 사용하여 Highcharts Core 라이브러리를 사용하는 사용자 지정 차트 유형 및 시각적 객체를 생성합니다. Highcharts 시각적 객체는 QuickSight 작성자에게 Highcharts API에 대한 직접 액세스를 제공합니다.

Highcharts 시각적 객체를 구성하려면 QuickSight 작성자가 QuickSight의 시각적 객체에 Highcharts JSON 스키마를 추가해야 합니다. 작성자는 QuickSight 표현식을 사용하여 QuickSight 필드와 Highcharts 시각적 객체를 생성하는 데 사용하는 JSON 스키마의 형식 지정 옵션을 참조할 수 있습니다. JSON 차트 코드 편집기는 입력 JSON 스키마가 올바르게 구성되었는지 확인하기 위해 자동 완성 및 실시간 검증에 대한 컨텍스트 지원을 제공합니다. 보안을 유지하기 위해 Highcharts 시각적 편집기는 CSS, JavaScript 또는 HTML 코드 입력을 허용하지 않습니다.

Amazon QuickSight의 Highcharts Visuals에 대한 자세한 내용은 DemoCentral의 Highcharts Visual QuickStart 가이드를 참조하세요.

다음 이미지는 QuickSight의 Highcharts 아이콘을 보여줍니다.

다음 이미지는 QuickSight에서 Highcharts 시각적 객체의 차트 코드 JSON 편집기에 구성된 립스틱 차트를 보여줍니다.

QuickSight의 Highcharts 시각적 객체로 생성할 수 있는 시각적 객체의 추가 예는 Highcharts 데모를 참조하세요.

고려 사항

Amazon QuickSight에서 Highcharts 시각적 객체 생성을 시작하기 전에 Highcharts 시각적 객체에 적용되는 다음 제한 사항을 검토하세요.

Highcharts 시각적 객체 생성

다음 절차에 따라 Amazon QuickSight에서 Highcharts 시각적 객체를 생성합니다.

렌더링된 시각적 객체에 만족하면 속성 창을 닫습니다. Highcharts 시각적 객체를 구성하는 데 사용할 수 있는 QuickSight 특정 표현식에 대한 자세한 내용은 섹션을 참조하세요Highcharts 시각적 객체를 위한 Amazon QuickSight JSON 표현식 언어.

대화형 Highchart 기능

Amazon QuickSight의 차트 시각화는 사용자 지정 작업, 강조 표시 및 사용자 지정 필드 색상 일관성을 지원하므로 다른 QuickSight 시각적 객체와 원활하게 통합되는 시각적으로 일관된 대화형 차트를 생성할 수 있습니다.

사용자 지정 작업

사용자 지정 작업을 사용하면 Highchart 시각화의 모든 데이터 포인트에 대한 특정 동작을 정의할 수 있습니다. 이 기능은 QuickSight의 기존 작업 프레임워크와 원활하게 통합되어 사용자 클릭에 응답하는 대화형 차트를 생성할 수 있습니다. 시스템은 현재 단일 데이터 포인트 선택을 지원하므로 사용자 상호 작용을 정확하게 제어할 수 있습니다. 사용자 지정 작업은 선 차트, 막대 차트, 누적 막대 차트 등 다양한 차트 유형에서 구현할 수 있습니다.

사용자 지정 작업을 구현하려면 Highcharts JSON 구성을 수정해야 합니다. 시리즈 구성에 이벤트 블록을 추가하여 클릭 이벤트와 해당 작업을 지정합니다. 예:

{
  "series": [{
    "type": "line",
    "data": ["getColumn", 1],
    "name": "value",
    "events": {
      "click": [
        "triggerClick", { "rowIndex": "point.index" }
      ]
    }
}]

이 구성을 사용하면 차트의 데이터 포인트에서 클릭 이벤트를 활성화하여 QuickSight가 선택한 데이터를 기반으로 사용자 지정 작업을 처리할 수 있습니다.

교차 시각적 강조 표시

교차 시각적 강조 표시는 다양한 차트 간에 시각적 연결을 생성하여 대시보드의 상호 작용을 향상시킵니다. 사용자가 한 차트에서 요소를 선택하면 다른 시각적 객체의 관련 요소가 자동으로 강조 표시되고 관련 없는 요소는 흐리게 표시됩니다. 이 기능은 사용자가 여러 시각화에서 관계와 패턴을 빠르게 식별하여 데이터 이해 및 분석을 개선하는 데 도움이 됩니다.

교차 시각적 강조 표시를 활성화하고 필드 색상 일관성을 유지하려면 Highcharts JSON 구성에서 quicksight 절을 사용합니다. 이 절은 Highcharts 렌더링과 QuickSight의 시각적 상호 작용 시스템 간의 브리지 역할을 합니다. 설정 방법의 예는 다음과 같습니다.

{
  "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"]
    }]
  }
}

이 구성은 QuickSight의 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
      ],
    }]
  }
}

필드 수준 색상 일관성

대시보드에서 시각적 일관성을 유지하는 것은 효과적인 데이터 해석에 매우 중요합니다. 필드 수준 색상 일관성 기능은 특정 차원에 할당된 색상이 대시보드의 모든 시각적 객체에 걸쳐 지속되도록 합니다. 이러한 일관성을 통해 사용자는 다양한 차트 유형 및 보기에서 특정 데이터 범주를 빠르게 인식하고 추적할 수 있으므로 전반적인 사용자 경험과 데이터 이해도가 향상됩니다.