javascript

2d 차트 그리기 (with javascript)

다양성 2021. 7. 25. 16:53

2D 차트를 javascript를 이용하여 그려보자.

HTML , js 파일에 다음 내용을 기재하면 맨 아래 결과물을 얻을수 있다.

 

<HTML 파일 내용 >

  <div id='chart-container'>

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

    </div>

 

<javascript 내용>

var ctx = document.getElementById('myChart').getContext('2d');

var chart = new Chart(ctx, {

    //차트설정

    type: 'line',

    //차트데이터

    data: {

        labels: ['January''February''March''April''May''June''July'],

        datasets: [{

            label: '주간 판매량',

            backgroundColor: 'rgb(255, 99, 132)',

            borderColor: 'rgb(255, 99, 132)',

            data: [51052203045]

        }]

    },

    options: {}

});

최종결과물)