Canvas 차트 그리기 2 - Bar

막대 차트 그리기

1. html 문서에 Canvas Element 추가.
(https://damlady.tistory.com/entry/켄버스-차트-그리기-1-라인-차트 동일)

 

2. 차트 정보 정의 

  // 차트 정보 정의.
  const gridCount = 5;
  const gridArea = {x:50, y:50, h:250, w:400};
  const chartArea = {x:70, y:70, h:230, w:360};

3. Grid 그리기 
(https://damlady.tistory.com/entry/켄버스-차트-그리기-1-라인-차트 동일)

 

4. 최대값, perPixel 값 구하기

  const max = data.reduce((prev,curr) => Math.max(prev,curr));
  const perPixel = chartArea.h / max;

 

5. 차트 그리기

// Bar 스타일 정의.
  ctx.fillStyle = '#00c50d';

  // 차트 그리기.
  const gapX = chartArea.w / (data.length*2-1);
  const bottom = chartArea.y + chartArea.h;
  for(let i= 0 ; i<data.length ; i++) {
    const h = Math.round(data[i] * perPixel);
    const x = Math.round(chartArea.x + (gapX *i*2));
    ctx.fillRect(x, bottom, gapX, -h);
  }