[ChatJS] ChartJS 다운받고 설정하기.

jQuery/ChartJS 2016. 10. 5. 10:27

■ ChartJS 다운받고 설정하기.




01. 가장먼저 http://www.chartjs.org/ 사이트 에접속하여 Documentation 버튼을 클릭한다.




02. 그럼 참고자료 페이지에서 Chart.js 파일을 바로 다운 받을 수 있는 페이지로 이동할 수 있다.

 ① 글 왼쪽 카테고리에서 Downlopad Chart.js 메뉴를 클릭한다.

 ② 이후 사이트의 메인 부분에서 Chart.js On GitHub 부분을 클릭한다.





03. 그렇게 넘어온 GitHub 하단으로 스크롤을 내리면 다운로드 페이지가 존재한다.

 ① 다운로드 목록중에 Chart.js.zip을 클릭한다.

 ② 해당 파일을 다운로드 받는다.








설정이 끝났으면 아래와같은 파일을 만들어서 그냥 실행시켜 보자.

 chartjs_test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>chartJS</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/Chart.js"></script>
</head>
<!-- Body 넓이를 98%를 준 이유는 위와같은 설정을 주지 않으면 브라우저 창의 크기에 맞추어 출력이 좀처럼 이루어지지 않기 때문이다. -->
<body style="width:98%;">
    <canvas id="myChart"></canvas>
</body>
<script type="text/javascript">
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type : "bar",
    data : {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
        , datasets : [{
              label: "#BarChart"
            , data: [12, 19, 3, 5, 2, 3]
            , backgroundColor : [
                  "rgba(255, 99, 132, 0.2)"
                , "rgba(54, 162, 235, 0.2)"
                , "rgba(255, 206, 86, 0.2)"
                , "rgba(75, 192, 192, 0.2)"
                , "rgba(153, 102, 255, 0.2)"
                , "rgba(255, 159, 64, 0.2)"
            ]
            , borderColor: [
                  "rgba(255, 99, 132, 1)"
                , "rgba(54, 162, 235, 1)"
                , "rgba(255, 206, 86, 1)"
                , "rgba(75, 192, 192, 1)"
                , "rgba(153, 102, 255, 1)"
                , "rgba(255, 159, 64, 1)"
            ]
            , borderWidth : 1
        }]
    }
    , options : {
        scales : {
            yAxes : [{
                ticks : { beginAtZero : true }
            }]
        }
    }
});
</script>
</html>



정상적으로 설정이 완료되었다면. 아래와같이 그래프가 출력되는 화면을 만나볼 수 있다.


'jQuery > ChartJS' 카테고리의 다른 글

[ChatJS] ChartJS 다운받고 설정하기.  (0) 2016.10.05