레이더차트 적용 질문 채택완료
015B
2년 전
조회 2,530
https://apexcharts.com/javascript-chart-demos/radar-charts/basic/
이 부분을 여분필드 5~10번을 사용해서 적용시키려고 하는데요.
이글을 참고해서 적용해봤는데 View에서 불러오질 못하더라구요. 해결 방법이 있으면 답변 부탁드립니다
</p>
<p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basic Radar</title></p>
<p> <link href="../../assets/styles.css" rel="stylesheet" /></p>
<p> <style>
#chart {
max-width: 450px;
margin: 35px auto;
}
</style></p>
<p> <script>
window.Promise ||
document.write(
'<script src="<a href="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'</a>
)
window.Promise ||
document.write(
'<script src="<a href="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'</a>
)
window.Promise ||
document.write(
'<script src="<a href="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'</a>
)
</script></p>
<p>
<script src="<a href="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/apexcharts"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/apexcharts"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script></a>
</p>
<p> <script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on <a href="https://gist.github.com/blixt/f17b47c62508be59987b" target="_blank" rel="noopener noreferrer">https://gist.github.com/blixt/f17b47c62508be59987b</a>
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
</script></p>
<p>
</head></p>
<p> <body>
<div id="app"></div></p>
<p> <div id="html">
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={350} />
</div>
</div></p>
<p> <script type="text/babel">
class ApexChart extends React.Component {
constructor(props) {
super(props);</p>
<p> this.state = {
series: [{
name: 'Series 1',
data: [<?php echo $wr_5 ?>, <?php echo $wr_6 ?>, <?php echo $wr_7 ?>, <?php echo $wr_8 ?>, <?php echo $wr_9 ?>, <?php echo $wr_10 ?>],
}],
options: {
chart: {
height: 350,
type: 'radar',
},
title: {
text: 'Basic Radar Chart'
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
}
},
};
}</p>
<p> </p>
<p> render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
}</p>
<p> const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
</script></p>
<p>
</body>
</html></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
채택된 답변
+20 포인트
2년 전
디버깅 해서 확인해보니
</p>
<p>data: [<?php echo $wr_5 ?>, <?php echo $wr_6 ?>, <?php echo $wr_7 ?>, <?php echo $wr_8 ?>, <?php echo $wr_9 ?>, <?php echo $wr_10 ?>],</p>
<p>의 값이 셋팅이 안되서 발생하는 문제였습니다.
아래 수정된사항은 정상적으로 잘되오니 비교 참고 해보시면 도움이 되실듯합니다.
</p>
<p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Basic Radar</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 450px;
margin: 35px auto;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="<a href="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'</a>
)
window.Promise ||
document.write(
'<script src="<a href="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'</a>
)
window.Promise ||
document.write(
'<script src="<a href="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'</a>
)
</script>
<script src="<a href="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/apexcharts"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/apexcharts"></script></a>
<script src="<a href="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script></a>
<script>
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on <a href="https://gist.github.com/blixt/f17b47c62508be59987b" target="_blank" rel="noopener noreferrer">https://gist.github.com/blixt/f17b47c62508be59987b</a>
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
</script>
</head>
<body>
<div id="app"></div>
<div id="html">
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={350} />
</div>
</div>
<script type="text/babel"></p>
<p> var options = {
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}],
chart: {
height: 350,
type: 'radar',
},
title: {
text: 'Basic Radar Chart'
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
}
};</p>
<p> var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: 'Series 1',
data: [80, 50, 30, 40, 100, 20],
}],
options: {
chart: {
height: 350,
type: 'radar',
},
title: {
text: 'Basic Radar Chart'
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
}
},
};
}
render() {
return (
<div>
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
</script>
</body>
</html></p>
<p>
위에서 select 하여 fatch한 부분을 확인해보시면 될꺼 같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
0
015B
2년 전
�
복스리
2년 전
https://apexcharts.com/javascript-chart-demos/radar-charts/basic/
여기 참고 소스 보시면 상단에 select해오는 부분이 있습니다. 참고 하시고 응용하시면 될꺼 같습니다.
해보시다 안되시면 쪽지 주세요.
여기 참고 소스 보시면 상단에 select해오는 부분이 있습니다. 참고 하시고 응용하시면 될꺼 같습니다.
해보시다 안되시면 쪽지 주세요.
0
015B
2년 전
선생님 쪽지 보냈습니다..ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
0
015B
2년 전
감사합니다 해결했습니다 좋은하루되세요
댓글을 작성하려면 로그인이 필요합니다.
2년 전
우선 wr_5~wr_10 까지 최상단에 값을 제대로 불러오는지 여부 파악하시고..
조건으로 값이 없을 경우 0으로 향하게 해버리신 뒤에 자바스크립트를 확인하시면 될것같은데요...
로그인 후 평가할 수 있습니다
답변에 대한 댓글 3개
0
015B
2년 전
여분필드 값은 제대로 불러와집니다.ㅠ
[code]
data: [80, 50, 30, 40, 100, 20],
[/code]
여기에 80, 50, 30, 40, 100, 20 을 wr_5~10번 을 불러와야하는데
[code]
data: [<?php echo $view['wr_5'] ?>, <?php echo $view['wr_6'] ?>, <?php echo $view['wr_7'] ?>, <?php echo $view['wr_8'] ?>, <?php echo $view['wr_9'] ?>, <?php echo $view['wr_10'] ?>],
[/code]
이렇게 하면 값을 못불러옵니다..ㅠ 저기에 어떤 걸 입력해야 여분필드를 불러오는지 알고싶습니다..ㅠ
[code]
data: [80, 50, 30, 40, 100, 20],
[/code]
여기에 80, 50, 30, 40, 100, 20 을 wr_5~10번 을 불러와야하는데
[code]
data: [<?php echo $view['wr_5'] ?>, <?php echo $view['wr_6'] ?>, <?php echo $view['wr_7'] ?>, <?php echo $view['wr_8'] ?>, <?php echo $view['wr_9'] ?>, <?php echo $view['wr_10'] ?>],
[/code]
이렇게 하면 값을 못불러옵니다..ㅠ 저기에 어떤 걸 입력해야 여분필드를 불러오는지 알고싶습니다..ㅠ
t
toqurk
2년 전
연휴라 이제 봤네요..혹시 해결되셨나요?
0
015B
2년 전
감사합니다 해결했습니다^^
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
0
015B
2년 전
[code]
$wr_5 -> $view['wr_5']
<?php echo $wr_5 ?> -> <?php echo $view['wr_5'] ?>
[/code]
세크티님이 말씀하신데로 다 수정했는데도 뷰에서 불러오질 못하네요..ㅠㅠ
$wr_5 -> $view['wr_5']
<?php echo $wr_5 ?> -> <?php echo $view['wr_5'] ?>
[/code]
세크티님이 말씀하신데로 다 수정했는데도 뷰에서 불러오질 못하네요..ㅠㅠ
�
세크티
2년 전
작업하신 URL을 알수있으면 문제점을 바로 파악할 수 있을텐데요.
0
015B
2년 전
취미로 로컬환경에서 작업하다보니.. 주소가 없네요..ㅎㅎ 여분필드값 추출을 안해서 생겼던 문제였습니다 지금은 해결했습니다. 답글 주셔서 감사합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다 정상적으로 불러와지는데 위 부분에 여분필드에 입력된 숫자 값으로 세팅하려면 어떻게 해야할까요?