chart.js를 사용해 막대 그래프 그리는 법 (예제 多)

Chart.js로 막대 그래프 그리기

간단하게 표를 그리기 쉬운 플러그인인 chart.js의 막대 그래프(bar chart) 그리는 방법과 옵션에 대해 알려드리겠습니다.

chart.js 는 간단한 차트를 그리기에는 용이하지만, chart.js 기본 옵션에 있는 스타일 외의 커스터마이징이 까다롭거나 한정적이라는 단점이 있습니다 :)

저도 사용하면서 몇번 머리가 아팠는데요..

사용해보고, 홈페이지 찾아 본 여러 막대그래프 예제 올려드립니다.

혹시 다른 필요한 예제가 있다면 댓글남겨주세요 :)

 

우선, chart.js의 사용법을 모르신다면 아래의 포스팅을 참고해주세요 :)

chart.js 시작하기

[차트플러그인]chart.js 시작하기 사용법, 옵션

---

기본형 막대 그래프

html

<canvas id="myChart"></canvas>

JS

  var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // type : 'bar' = 막대차트를 의미합니다.
            type: 'bar', // 
            data: {
                labels: ['감','오렌지','사과'],
                datasets: [{
                    label: '과일 판매량',
                    backgroundColor: 'rgb(255, 99, 132)',
                    borderColor: 'rgb(255, 99, 132)',
                    data: [2 ,10, 5,]
                }]
            },
        });

결과화면

See the Pen wvgmdbR by aldo814 (@aldo814) on CodePen.

 

 

 

 

 

 

---

막대(thick)별 여러 색상 바꾸기

html

<canvas id="myChart"></canvas>

JS

  var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // type : 'bar' = 막대차트를 의미합니다.
            type: 'bar', // 
            data: {
                labels: ['빨간색','파란색','초록색'],
                datasets: [{
                    label: '색상',
                    backgroundColor: [
                      'red',
                      'blue',
                      'green'
                    ],
                    borderColor: 'rgb(255, 99, 132)',
                    data: [2 ,10, 5,]
                }]
            },
        });

See the Pen bGgvRGJ by aldo814 (@aldo814) on CodePen.

 

 

 

 

---

가로형 막대그래프(Horizontal Bar Chart)

html

<canvas id="myChart"></canvas>

JS

  var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // type : 'bar' = 막대차트를 의미합니다.
            type: 'bar', // 
            data: {
                labels: ['빨간색','파란색','초록색'],
                datasets: [{
                    axis: 'y', // ***가로형 막대로 바꾸는 옵션***
                    label: '색상',
                    backgroundColor: [
                      'red',
                      'blue',
                      'green'
                    ],
                    borderColor: 'rgb(255, 99, 132)',
                    data: [2 ,10, 5,]
                }]
            },
          options: {
           indexAxis: 'y', //***가로형 막대로 바꾸는 옵션***
           }
        });

See the Pen wvgmeWb by aldo814 (@aldo814) on CodePen.

 

 

 

 

---

막대 차트 그룹화 시키기

html

<canvas id="myChart"></canvas>

JS

  var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // type : 'bar' = 막대차트를 의미합니다.
            type: 'bar', // 
            data: {
          labels: ['빨간색','파란색','초록색'], // 큰 분류(하단 데이터 이름)
                datasets: [
                  {
                    label: '첫번째 분류', //작은 분류
                    backgroundColor: [
                      'red',
                    ],
                    borderColor: 'rgb(255, 99, 132)',
                    data: [2 ,10, 5,]
                },
                  {
                    label: '두번째 분류', //작은 분류
                    backgroundColor: [
                      'blue',
                    ],
                    borderColor: 'rgb(255, 99, 132)',
                    data: [2 ,10, 5,]
                },
                  {
                    label: '세번째 분류', //작은 분류
                    backgroundColor: [
                      'green',
                    ],
                    borderColor: 'rgb(255, 99, 132)',
                    data: [2 ,10, 5,]
                },
                  
                
                ]
            },
        });

 

See the Pen rNjdwzy by aldo814 (@aldo814) on CodePen.

 

 

 

 

차트 x축, y축 선 모두 지우기

html

<canvas id="myChart"></canvas>

JS

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
    options: {
      legend: {
        display: false,
      },
      scales: {
        xAxes: [{
          gridLines: { //A축 gridLines 지우는 옵션
            display: false,
            drawBorder: false,
          },
          ticks: {
            fontSize: 15,
            fontColor: 'black'
          }
        }],
        yAxes: [{
          gridLines: { //Y축 gridLines 지우는 옵션
            drawBorder: false,
            display: false,
          },
          ticks: {
            beginAtZero: true,
            fontSize: 15,
            fontColor: 'lightgrey',
            maxTicksLimit: 5,
            padding: 25,
          }
        }]
      },
      tooltips: {
        backgroundColor: '#1e90ff'
      }
    },
    data: {
      labels: ['M', 'Tu', 'W', 'Th', 'F', 'Sa', 'Su'],
    datasets: [{
      data: [0, 0, 0, 11, 9, 17, 13],
      tension: 0.0,
      borderColor: 'rgb(255,190,70)',
      backgroundColor: 'rgba(0,0,0,0.0)',
      pointBackgroundColor: ['white', 'white', 'white', 'white', 'white', 'white', 'rgb(255,190,70)'],
      pointRadius: 4,
      borderWidth: 2
    }]
  }
});

See the Pen gOgeRvy by aldo814 (@aldo814) on CodePen.