====== chart.js 샘플 가이드 ======
===== 예시 =====
템플릿 위치: /HTML5/OSS/chartjs_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/OSS/chartjs_basic.xml|chartjs_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/OSS/chartjs_basic.js|chartjs_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/OSS/chartjs_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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}
}]
}
}
});
}