chartOptions Y축 2개 그래프 그리기

[hbkim]

셀렉트어드민에서는 Chartjs 기반의 차트 옵션 기능을 제공하고 있습니다.

• 축(grid, axis, tick) 스타일링 참고자료: Styling | Chart.js

좌우 Y 축 2개의 그래프를 그리고 싶을 때는 아래와 같이 설정해보세요.

감사합니다.

- path: pages/x1cHp9
  title: Y축 2개 차트
  blocks:
  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT 
        DATE_FORMAT(DATE(created_at), '%Y-%m-%d') as date, 
        COUNT(id1) AS c1, 
        COUNT(id2) AS c2
      FROM test_table
      GROUP BY 1
      LIMIT 10
    chartOptions:
      type: bar
      x: date
      y: 
        - c1
        - c2
      data:
        datasets:
        - 
          yAxisID: A
          backgroundColor: olive
        - 
          yAxisID: B
          backgroundColor: salmon
      borderWidth: 
        - 0
        - 0
      options:
        scales:
          A:
            type: linear
            position: left
            # border:
            #   display: false
            grid:
              display: true
              drawOnChartArea: false
              drawTicks: true
              color: olive
              lineWidth: 3
            ticks:
              beginAtZero: true
              # max: 1000
              # min: 0
              # precision: 10
          B:
            type: linear
            position: right
            border:
              display: false
              borderColor: tomato
            grid:
              display: true
              drawOnChartArea: false
              drawTicks: true
              color: tomato
              lineWidth: 3
            ticks:
              beginAtZero: true