−목차

chart.js 샘플 가이드

예시

템플릿 위치: /HTML5/OSS/chartjs_basic

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
function screen_on_load()
{
}
 
// 차트 라이브러리 로드 버튼 처리
function btn_loadjs_on_mouseup(objInst)
{
    var chart_js_url;
 
    // 주의: chart_js_url 변수에 대한 값은 프로젝트 상황에 맞추어 변경해야 한다.
 
    // chart 라이브러리 경로를 Full URL로 지정
    // chart_js_url = "http://127.0.0.1:80/project/terminal/ext/chartjs/Chart.bundle.min.js";
 
    // xframe5.html 파일 위치 기준 상대 경로 지정
    chart_js_url = "./ext/lib/chartjs/Chart.bundle.min.js";
 
    // 차트 라이브러리 로드 처리
    screen.loadjs(chart_js_url);
}
 
// 차트 표시 대상이 되는 CANVAS DOM 생성
function btn_createcanvas_on_mouseup(objInst)
{
    var jdomDiv, domDiv, domCanvas;
 
    // DIV 컴포넌트의 jQuery DOM 오브젝트 및 DOM 오브젝트를 구함
    jdomDiv = this.divChart.getjdom();
    domDiv = this.divChart.getdom();
 
    // 차트 표시용 CANVAS 오브젝트 생성 및 크기 지정 (크기는 DIV 크기를 기준으로 적용해야 함)
    domCanvas = document.createElement("canvas");
 
    // 차트 표시용 CANVAS 오브젝트 ID 및 크기 지정 (크기는 DIV 크기를 기준으로 적용해야 함)
    domCanvas.id     = "myChart";
 
    domCanvas.width  = this.divChart.getwidth() - 2;     // -2는 좌/우 경계선
    domCanvas.height = this.divChart.getheight() - 2;   // -2는 위/아래 경계선
    domCanvas.style.display = "block";
 
    //canvas.style.zIndex   = 8;
    //canvas.style.position = "absolute";
    //canvas.style.border   = "1px solid";
 
    // 차트 표시용 CANVAS 오브젝트를 DIV DOM 오브젝트에 추가
    domDiv.appendChild(domCanvas);
}
 
// 캔버스에 차트 표시 버튼 처리
function btn_drawchart_on_mouseup(objInst)
{
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets:[{
                label: '# of Votes',
                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
            }]
 
        },
        option: {
            scales:{
                yAxes:[{
                    ticks:{beginAtZero:true}
                }]
            }
        }
    });
}