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