ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 기본 세팅
    프론트엔드/Chart.js 2020. 6. 23. 16:28
    반응형
    SMALL

    1. 기본 세팅
    https://www.chartjs.org/docs/latest/getting-started/

    <!doctype html>
    <html lang="ko">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport"
    	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>차트 기본</title>
    </head>
    <body>
    <canvas id="myChart"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script>
    	var ctx = document.getElementById('myChart').getContext('2d');
    	var chart = new Chart(ctx, {
    		// The type of chart we want to create
    		type: 'line',
    
    		// The data for our dataset
    		data: {
    			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    			datasets: [{
    				label: 'My First dataset',
    				backgroundColor: 'rgb(255, 99, 132)',
    				borderColor: 'rgb(255, 99, 132)',
    				data: [0, 10, 5, 2, 20, 30, 45]
    			}]
    		},
    
    		// Configuration options go here
    		options: {}
    	});
    </script>
    </body>
    </html>

     

    LIST

    '프론트엔드 > Chart.js' 카테고리의 다른 글

    Line Chart(라인 차트)  (0) 2020.06.26

    댓글

Designed by Tistory.