차트로 표시하기

• 설정 방법
  • 쿼리(query) 블록 안에 chartOptions를 추가
  • type : 차트 종류
    • bar, line, doughnut, polarArea
  • x : x축 (가로 축)
  • y : y축 (세로 축)
• type: query , sql: 등과 같은 위치
• showButtonWithResult: true
  • chartOptions 와 같은 위치
  • ‘조회' 버튼을 띄우는 설정
  • 새로고침 없이, 버튼으로 데이터를 다시 조회할 수 있음

type: query
name: 상품 카테고리 비율
resource: mysql.qa
sqlType: select
sql: >
  select `type`, count(id) AS count
  from products
  where `type` IS NOT NULL
  group by `type`
chartOptions:
  type: bar # line, doughnut, polarArea
  x: type
  y: count
showButtonWithResult: true

바(bar) 차트

chartOptions:
  type: bar
  x: type
  y: count
showButtonWithResult: true

선(line) 차트

chartOptions:
  type: line
  x: type
  y: count
showButtonWithResult: true

도넛(doughnut), 원형 차트

chartOptions:
  type: doughnut
  x: type
  y: count
showButtonWithResult: true

폴라에어리어(polarArea) 차트

chartOptions:
  type: polarArea
  x: type
  y: count
showButtonWithResult: true

너비(가로), 높이(세로 길이) 조절

• chartOptions 안에 width 와 height 로 조절 가능
  • width 는 너비 (가로 길이)
  • height 는 높이 (세로 길이)

chartOptions:
  type: bar
  x: 날짜
  y: count
  width: 500px
  height: 300px