Graph 그리기

D A S H B O A R D
D E V E L O P
S E C U R I T Y

ECharts

Echarts Impot
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
JavaScript
복사

Circle

<div id="circle" style="min-height: 205px;"></div>
HTML
복사
var myCircle = echarts.init(document.getElementById('circle')); // echarts init 메소드로 id=chart인 DIV에 차트 초기화 option = { tooltip: { trigger: 'item' }, legend : { top : 5, type : 'scroll' }, series: [ { name: 'Test 유형', type: 'pie', radius: ['40%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 0 }, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '15', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ { value: svc['service_unit'], name: '서비스 단위테스트' }, { value: svc['service_inte'], name: '서비스 통합테스트' }, { value: svc['server_unit'], name: '서버 단위테스트' }, { value: svc['server_inte'], name: '서버 통합테스트' }, ] } ] }; myCircle.setOption(option); // 차트 디스플레이 $(function(){ $(window).on('resize',function(){ myCircle.resize(); }) })
JavaScript
복사

Line Chart

<div id="canvas" style="min-height: 205px;"></div>
HTML
복사
var date = {}; for(var i = 0; i < svc.length; i++){ if(!(svc[i].timestamp.substr(5,5) in date)){ date[svc[i].timestamp.substr(5,5)] = 1; } else{ date[svc[i].timestamp.substr(5,5)]++; } } var myChart = echarts.init(document.getElementById('canvas'),null,{ height : "205px", }); // echarts init 메소드로 id=chart인 DIV에 차트 초기화 option = { xAxis: { type: 'category', boundaryGap: false, data: Object.keys(date) }, yAxis: { type: 'value' }, emphasis: { label: { show: true, fontSize: '15', fontWeight: 'bold' } }, series: [ { data: Object.values(date), type: 'line', smooth:true, areaStyle: {} areaStyle: { color : '#E0EBFF', fontWeight : 1000, fontsize : 1000, }, } ] }; myChart.setOption(option); // 차트 디스플레이 $(function(){ $(window).on('resize',function(){ myChart.resize(); }) })
JavaScript
복사

JQuery를 이용해 직접 원형 그래프 그리기