Chartjs > options > plugins > formatterFn 문의

묻고 답하기
1

안녕하세요. chartjs 설정 중 문의사항이 있습니다.

  1. chartjs > options > plugins > formatter에서 지정 가능한 값이 무엇무엇이 있을까요?
  2. chartjs > options > plugins > formatterFn에서 스크립트를 직접 추가할 수 있는 방법이 있을까요?

formatterFn과 같이 사용했을 때, 오류는 발생하지 않지만 작동하지 않는 것으로 확인되어 문의드립니다.

미리 감사합니다.

2
  • 추가 정보

다음의 예제에서 stacked bar의 상단에 UPB, BIT을 합산한 숫자를 표기하고 싶은 용도입니다.

3

@null37 안녕하세요!

stacked bar 상단에 합산 숫자를 표기하고 싶을때, displayFn을 통해 아래와 같이 적용 가능합니다.

해당 방법이 도움이 되실까요? 기대하신 방향과 다르거나 추가로 도움이 필요하시면 말씀해주세요!

감사합니다.

image
image2310×1050 212 KB

menus:
- path: displayfn-chartjs-stacked-bar-sum-label

pages:
- path: displayfn-chartjs-stacked-bar-sum-label
  blocks:
    - type: query
      style:
        width: 100%
        height: 400px
      resource: mysql.qa
      sqlType: select
      sql: >
        SELECT DATE(created_at) as date, 
        SUM(CASE WHEN type = 'UPB' THEN amount ELSE 0 END) as UPB, 
        SUM(CASE WHEN type = 'BIT' THEN amount ELSE 0 END) as BIT 
        FROM transactions
        WHERE created_at >= '2024-05-01'
        GROUP BY date
        ORDER BY date
      display: chartjs
      displayFn: |
        // 데이터 준비
        const labels = rows.map(row => row.date);
        const upbData = rows.map(row => parseFloat(row.UPB));
        const bitData = rows.map(row => parseFloat(row.BIT));
        
        const data = {
          labels: labels,
          datasets: [
            {
              label: 'UPB',
              data: upbData,
              backgroundColor: 'RoyalBlue',
              borderWidth: 0
            },
            {
              label: 'BIT',
              data: bitData,
              backgroundColor: 'Tomato',
              borderWidth: 0
            }
          ]
        };
        
        const config = {
          type: 'bar',
          data: data,
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              x: {
                stacked: true,
                display: true
              },
              y: {
                stacked: true,
                title: {
                  display: true,
                  text: '거래량'
                }
              }
            },
            plugins: {
              legend: {
                position: 'left'
              }
            }
          },
          plugins: [
            {
              id: 'stackedSum',
              afterDatasetsDraw: function(chart) {
                const ctx = chart.ctx;
                
                // 각 스택 바의 합계 계산 및 표시
                chart.data.labels.forEach((label, index) => {
                  // UPB와 BIT 값 가져오기
                  const upbValue = chart.data.datasets[0].data[index] || 0;
                  const bitValue = chart.data.datasets[1].data[index] || 0;
                  
                  // 합계 계산
                  const sum = upbValue + bitValue;
                  
                  // 스택의 상단 위치 계산
                  const y = chart.scales.y.getPixelForValue(sum);
                  const x = chart.scales.x.getPixelForValue(index);
                  
                  // 합계 텍스트 표시
                  ctx.save();
                  ctx.fillStyle = 'black';
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'bottom';
                  ctx.font = 'bold 12px Arial';
                  ctx.fillText(sum.toFixed(2), x, y - 5);
                  ctx.restore();
                });
              }
            }
          ]
        };
        
        const myStackedChart = new Chart(ctx, config);
4

@hbkim 답변 감사드립니다!! 제가 원했던 형태가 맞습니다! 잘 활용하겠습니다 : )

1개의 좋아요
5

잘 맞으셨다니 다행입니다. 확인 감사합니다 :smiley:

1개의 좋아요