[초보주의] 방사형/레이더 차트(그래프) 적용
본문
안녕하세요,^^;
항상 여러 도움받고 있어 감사합니다...
질문내용 : >> 방사형/레이더 차트(그래프)를 그누보드5에 적용하고 싶다 <<
지금까지 찾아본 소스들 중 생각한 디자인에 가까운 것들
https://apexcharts.com/javascript-chart-demos/radar-charts/basic/
과
기존의 구글 차트를 이용한 스킨을 이용해서
write, view 파일을 여차저차 수정했는데, write쪽에서 버튼이 나타나지만 view쪽에선 전혀 출력이 안됩니다...음 코드는 여기저기서 갖다붙여넣기한 식이라 쓰기 민망하지만;;ㅠㅠㅠ뭐라도 했다는 의미에서...
write.php
<table cellpadding=0 cellspacing=0 border=0>
<Tr>
<td style="padding:10px 0px">
<input type="text" name="stat_1" value="<?php echo $stat_1 ?>" id="stat_1" required class="frm_input input" size="20" maxlength="255" placeholder="체력">
<input type="text" name="stat_2" value="<?php echo $stat_2 ?>" id="stat_2" required class="frm_input input" size="20" maxlength="255" placeholder="힘">
<input type="text" name="stat_3" value="<?php echo $stat_3 ?>" id="stat_3" required class="frm_input input" size="20" maxlength="255" placeholder="지혜">
<input type="text" name="stat_4" value="<?php echo $stat_4 ?>" id="stat_4" required class="frm_input input" size="20" maxlength="255" placeholder="민첩">
<input type="text" name="stat_5" value="<?php echo $stat_5 ?>" id="stat_5" required class="frm_input input" size="20" maxlength="255" placeholder="운">
<input type="text" name="stat_6" value="<?php echo $stat_6 ?>" id="stat_6" required class="frm_input input" size="20" maxlength="255" placeholder="말빨">
</td>
view.php
$wr_id = $_GET['wr_id'];
$sql = "select * from g5_write_{$bo_table} where wr_id='" . $wr_id . "'";
$row = sql_fetch($sql);
$step1 = $row['stat_1'];
$step2 = $row['stat_2'];
$step3 = $row['stat_3'];
$step4 = $row['stat_4'];
$step5 = $row['stat_5'];
$step6 = $row['stat_6'];
?>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<div id="app">
<div id="chart">
<apexchart type="radar" height="350" :options="chartOptions" :series="series"></apexchart>
</div>
</div>
<script>
new Vue({
el: '#app',
components: {
apexchart: VueApexCharts,
},
data: {
series: [{
name: 'Series 1',
data: [<?php echo $stat_1 ?>, <?php echo $stat_2 ?>, <?php echo $stat_3 ?>, <?php echo $stat_4 ?>, <?php echo $stat_5 ?>, <?php echo $stat_6 ?>],
}],
chartOptions: {
chart: {
height: 350,
type: 'radar',
},
title: {
text: 'Basic Radar Chart'
},
xaxis: {
categories: ['체력', '힘', '지혜', '민첩', '운', '말빨']
}
},
},
})
</script>
이렇게 수정했는데...걍 붙여넣고 수정만 했으니 안되는 게 당연한 거겠지만...ㅠㅠ어렵네요
따로 기존 정보랑 mysql랑 연결 필요 없이
그저 스킨에 함수? 입력하면 시스템이 알아서 그래프 만들어주는 정도면 만족하고 싶어요...(이걸 하려면 여기보단 제작의뢰에 찾아가야 할 것 같고...
여러 가지 해보다가 며칠동안 시간만 낭비하여 글 올려봅니다...도움 부탁드려요~~
답변 1
글쓸때 DB에 값이 들어갔고 뷰호출시에도 정상출력된다면 이상없어보이네요
제가 실행했을 때는 글 쓸 때만 뭔가 보이고, 글 보는 화면에서는 전혀 출력이 안됩니다..ㅠㅠ; 뭔가 잘못됐나봐요
답변을 작성하시기 전에 로그인 해주세요.
