chart.js 샘플 가이드

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

템플릿 파일

• chartjs_basic.xml
• chartjs_basic.js
• 새창으로 실행

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}
				}]
			}
		}
	});
}