차트 구성 편집기를 사용하여 시각화 맞춤설정

차트 구성 편집기를 사용하여 HighCharts API를 사용하는 Looker 시각화의 형식 지정 옵션을 맞춤설정할 수 있습니다. 여기에는 열 차트, 막대 그래프, 선 차트 등 대부분의 카티전 차트가 포함됩니다.

기본 요건

차트 구성 편집기에 액세스하려면 can_override_vis_config 권한이 있어야 합니다.

시각화 맞춤설정

차트 구성 편집기로 시각화를 맞춤설정하려면 다음 단계를 따르세요.

1. Explore에서 시각화를 보거나 Look 또는 대시보드에서 시각화를 수정합니다.
2. 시각화에서 수정 메뉴를 엽니다.

3. 플롯 탭에서 차트 구성 수정 버튼을 클릭합니다. Looker에 차트 구성 수정 대화상자가 표시됩니다.

   • 차트 구성(소스) 창에는 시각화의 원래 JSON이 포함되며 수정할 수 없습니다.

   • 차트 구성(재정의) 창에는 소스 JSON을 재정의해야 하는 JSON이 포함됩니다. 차트 구성 수정 대화상자를 처음 열면 Looker에서 창에 기본 JSON을 채웁니다. 이 JSON으로 시작하거나 이 JSON을 삭제하고 유효한 HighCharts JSON을 입력할 수 있습니다.

4. 차트 구성(재정의) 섹션을 선택하고 유효한 HighCharts JSON을 입력합니다. 새 값이 차트 구성(소스) 섹션의 모든 값을 재정의합니다.

   • 유효한 HighCharts JSON 예시는 이 도움말의 예시 섹션을 참조하세요.
   • Looker는 유효한 JSON 값을 허용합니다. Looker는 함수, 날짜 또는 정의되지 않은 값을 허용하지 않습니다.

5. <>(형식 코드)를 클릭하여 Looker가 JSON 형식을 올바르게 지정하도록 허용합니다.

6. 미리보기를 클릭하여 변경사항을 테스트합니다.

7. 적용을 클릭하여 변경사항을 적용합니다. 커스텀 JSON 값을 사용하여 시각화가 표시됩니다.

시각화를 맞춤설정한 후 저장할 수 있습니다. Explore에서 시각화를 확인한 경우 탐색 분석을 저장합니다. Look 또는 대시보드를 수정한 경우 저장을 클릭합니다.

잘못된 JSON이 포함된 코드를 미리 보려고 하면 Looker에 Invalid JSON detected 오류 메시지가 표시됩니다. 차트 구성(재정의) 창 하단의 코드 자동 수정 옵션을 사용하여 잘못된 JSON을 정리할 수 있습니다.

주의: 차트 구성 편집기에서 변경한 후에는 기본 시각화 옵션을 수정하지 마세요. 기본 시각화 옵션을 수정하면 빈 시각화를 포함하여 예기치 않은 동작이 발생할 수 있습니다.

기본 시각화 옵션을 수정하려면 먼저 차트 구성 편집기에서 변경한 내용을 삭제한 다음 나중에 다시 적용하세요. 구체적으로 다음 단계를 따르세요.

1. 플롯 탭에서 차트 구성 수정 버튼을 클릭합니다. Looker에 차트 구성 수정 대화상자가 표시됩니다.
2. 차트 구성(재정의) 창의 텍스트를 복사합니다.
3. 차트 재정의 삭제 버튼을 클릭하여 모든 변경사항을 삭제합니다.
4. 적용을 클릭합니다.
5. 기본 시각화 옵션을 사용하여 시각화를 수정합니다.
6. 플롯 탭에서 차트 구성 수정 버튼을 클릭합니다. Looker에 차트 구성 수정 대화상자가 표시됩니다.
7. 차트 구성(재정의) 창에 유효한 HighCharts JSON을 입력합니다. 2단계에서 복사한 텍스트를 템플릿으로 사용할 수 있지만 미리보기 버튼을 사용하여 변경사항을 테스트하여 충돌이 없는지 확인해야 합니다.
8. 적용을 클릭합니다.

series formatters를 사용한 조건부 서식

차트 구성 편집기는 대부분의 유효한 HighCharts JSON을 허용합니다. Looker에만 있는 series formatters 속성도 허용합니다. 각 계열에는 서로 다른 스타일 규칙을 조합하기 위해 여러 형식 지정 도구가 있을 수 있습니다.

series formatters 속성은 select 및 style의 두 가지 속성을 허용합니다.

• select 속성에 논리 표현식을 입력하여 서식을 지정할 데이터 값을 나타냅니다.
• style 속성에 JSON을 입력하여 데이터 값의 형식을 지정하는 방법을 나타냅니다.

예를 들어 다음 JSON은 380보다 크거나 같으면 각 데이터 값을 주황색으로 지정합니다.

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

다음 섹션에서는 select 및 style 속성의 가능한 값을 자세히 설명합니다.

select 속성

select 표현식에 다음 값을 사용할 수 있습니다.

• value: 이 변수는 계열 값을 반환합니다. 예를 들어 select: value > 0를 사용하여 모든 양수 값을 타겟팅하거나 value = 100를 사용하여 값이 100인 계열만 일치시킬 수 있습니다.
• max: select: max를 사용하여 최댓값을 가진 계열 값을 타겟팅합니다.
• min: select: min을 사용하여 최솟값을 가진 계열 값을 타겟팅합니다.
• percent_rank: 이 변수는 지정된 백분위수로 계열 값을 타겟팅합니다. 예를 들어 select: percent_rank >= 0.9를 사용하여 90번째 백분위수의 계열 값을 타겟팅할 수 있습니다.
• name: 이 변수는 계열의 차원 값을 반환합니다. 예를 들어 판매됨, 취소됨, 반품됨 주문을 보여주는 차트가 있는 경우 select: name = Sold를 사용하여 측정기준 값이 '판매됨'인 계열을 타겟팅할 수 있습니다.
• AND/OR, AND, OR를 사용하여 여러 논리 표현식을 결합합니다.

차트 구성 편집기에서 구현된 이러한 표현식을 보려면 최댓값, 최솟값, 백분위수 값 색상 지정 예시를 참조하세요.

style 속성

style 속성을 사용하여 HighCharts가 지원하는 스타일을 적용할 수 있습니다. 예를 들어 style.color를 사용하여 계열 값 색상을 지정하고 style.borderColor를 사용하여 계열 테두리의 색상을 지정하고 style.borderWidth를 사용하여 계열 테두리 너비를 설정할 수 있습니다. 스타일 옵션의 전체 목록을 보려면 series.column.data의 하이차트 옵션을 참조하세요.

선 시각화의 경우 style.color 대신 style.marker.fillColor 및 style.marker.lineColor를 사용합니다. 선 스타일 옵션의 전체 목록을 보려면 series.line.data.marker의 하이차트 옵션을 참조하세요.

차트 구성 편집기에서 구현된 색상 서식을 보려면 최댓값, 최솟값, 백분위수 값 색상 지정 예시를 참조하세요.

예시

다음 섹션에서는 차트 구성 편집기의 일반적인 사용 사례의 예시를 제공합니다. 수정할 수 있는 속성의 전체 목록은 HighCharts API 문서를 참조하세요.

• 배경 색상 및 축 텍스트 색상 변경
• 도움말 색상 맞춤설정
• 차트 주석 및 설명 추가
• 수직 참조 범위 추가
• 최댓값, 최솟값, 백분위수 값 색상 지정

배경 색상 및 축 텍스트 색상 변경

시각화의 배경 색상을 변경하려면 chart.backgroundColor 속성을 사용합니다.

마찬가지로 시각화에서 축의 텍스트 색상을 변경하려면 다음 속성을 사용하세요.

• xAxis.labels.style.color
• xAxis.title.style.color
• yAxis.labels.style.color
• yAxis.title.style.color

다음 HighCharts JSON은 시각화의 배경 색상을 보라색으로, 축 제목과 라벨의 텍스트를 흰색으로 변경합니다.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

도움말 색상 맞춤설정

도움말 색상을 맞춤설정하려면 다음 속성을 사용합니다.

• tooltip.backgroundColor
• tooltip.style.color

다음 HighCharts JSON은 도움말의 배경 색상을 녹청색으로 변경하고 도움말 텍스트 색상을 검은색으로 변경합니다.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

도움말 콘텐츠 및 스타일 맞춤설정

도움말 콘텐츠를 맞춤설정하려면 다음 속성을 사용합니다.

• tooltip.format
• tooltip.shared

다음 HighCharts JSON은 x축 값이 도움말 상단에 더 큰 글꼴로 표시되고 해당 시점의 모든 계열 값 목록이 표시되도록 도움말 형식을 변경합니다.

이 예시에서는 다음과 같은 HighCharts 함수 및 변수를 사용합니다.

• {key}는 선택한 지점의 X축 값을 반환하는 변수입니다. (이 예시에서는 연도와 월)
• {#each points}{/each}는 차트의 각 계열에 포함된 코드를 반복하는 함수입니다.
• {series.name}은 계열 이름을 반환하는 변수입니다.
• {y:.2f}는 소수점 두 자리에서 반올림한 선택한 지점의 Y축 값을 반환하는 변수입니다.
  • {y}는 선택한 지점의 Y축 값을 반환하는 변수입니다.
  • {variable:.2f}는 variable을 소수점 두 자리로 반올림합니다. 값 서식 지정에 대한 더 많은 예시는 하이차트 템플릿 문서를 참조하세요.

{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

차트 주석 및 설명 추가

주석을 추가하려면 annotations 속성을 사용합니다. 차트에 자막을 추가하려면 caption 속성을 사용합니다.

지점의 좌표를 가져오려면 차트 구성 수정 대화상자 상단의 지점 메타데이터 검사를 클릭합니다. 그런 다음 주석을 추가할 데이터 포인트 위에 마우스 포인터를 가져갑니다. Looker에는 annotations.labels.point 속성에 사용할 수 있는 지점 ID가 표시됩니다.

다음 HighCharts JSON은 차트에 두 가지 주석을 추가하여 특정 기간 후 인벤토리 항목의 감소를 설명합니다. 또한 차트 하단에 주석을 더 자세히 설명하는 캡션을 추가합니다.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

수직 참조 범위 추가

수직 참조 범위를 추가하려면 xAxis.plotBands 속성을 사용합니다.

다음 HighCharts JSON에서는 2022년 11월 24일부터 2022년 11월 29일 사이에 수직 참조 범위를 추가하여 판매 기간을 나타냅니다. 또한 차트 하단에 범위의 의미를 설명하는 캡션을 추가합니다.

xAxis.plotBands의 to 및 from 속성은 차트의 데이터 값과 일치해야 합니다. 이 예시에서 데이터는 시간을 기반으로 하므로 속성이 Unix 타임스탬프 값(2022년 11월 29일의 경우 1669680000000, 2022년 11월 24일의 경우 1669248000000)을 허용합니다. MM/DD/YYYY 및 DD-MM-YY와 같은 문자열 기반 날짜 형식은 to 및 from HighCharts 속성에서 지원되지 않습니다.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

점선 및 파선 추가

실선을 점선 또는 파선으로 변경하려면 series.dashStyle 속성을 사용합니다.

다음 HighCharts JSON은 Customers 계열의 dashStyle 속성을 파선으로, Sales 계열의 dashStyle 속성을 점선으로 변경합니다.

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

최댓값, 최솟값, 백분위수 값 색상 지정

카티전 시각화의 최댓값, 최솟값, 백분위수 값 색상에 대한 자세한 예시는 Looker 시각화 설명서 활용하기: 카티전 차트의 조건부 서식 맞춤설정 페이지를 참조하세요.

새 시각화 유형 만들기

차트 구성 편집기를 사용하여 Looker의 기본 시각화 유형에 포함되지 않은 시각화 유형을 만들 수 있습니다. 다음 도움말에서는 차트 구성 편집기로 디자인할 수 있는 시각화의 몇 가지 예시를 제공합니다.

• 차트 구성 편집기로 불릿 차트 만들기
• 차트 구성 편집기로 실선 게이지 차트 만들기
• 차트 구성 편집기로 스트림 그래프 차트 만들기
• 차트 구성 편집기로 트리맵 차트 만들기
• 차트 구성 편집기로 Sankey 차트 만들기
• 차트 구성 편집기로 벤 다이어그램 만들기
• 차트 구성 편집기로 선버스트 차트 만들기