레이더차트 적용 질문 채택완료
https://apexcharts.com/javascript-chart-demos/radar-charts/basic/
이 부분을 여분필드 5~10번을 사용해서 적용시키려고 하는데요.
이글을 참고해서 적용해봤는데 View에서 불러오질 못하더라구요. 해결 방법이 있으면 답변 부탁드립니다
Basic Radar
#chart {
max-width: 450px;
margin: 35px auto;
}
window.Promise ||
document.write(
''
)
window.Promise ||
document.write(
''
)
window.Promise ||
document.write(
''
)
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
<div id="chart">
<ReactApexChart options={this.state.options} series={this.state.series} type="radar" height={350} />
</div>
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: 'Series 1',
data: [, , , , , ],
}],
options: {
chart: {
height: 350,
type: 'radar',
},
title: {
text: 'Basic Radar Chart'
},
xaxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June']
}
},
};
}
render() {
return (
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
답변 4개
디버깅 해서 확인해보니
data: [, , , , , ],
의 값이 셋팅이 안되서 발생하는 문제였습니다.
아래 수정된사항은 정상적으로 잘되오니 비교 참고 해보시면 도움이 되실듯합니다.
Basic Radar
#chart {
max-width: 450px;
margin: 35px auto;
}
window.Promise ||
document.write(
''
)
window.Promise ||
document.write(
''
)
window.Promise ||
document.write(
''
)
// Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
// Based on https://gist.github.com/blixt/f17b47c62508be59987b
var _seed = 42;
Math.random = function() {
_seed = _seed * 16807 % 2147483647;
return (_seed - 1) / 2147483646;
};
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']
}
};
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 (
);
}
}
const domContainer = document.querySelector('#app');
ReactDOM.render(React.createElement(ApexChart), domContainer);
위에서 select 하여 fatch한 부분을 확인해보시면 될꺼 같습니다.
답변에 대한 댓글 3개
여기 참고 소스 보시면 상단에 select해오는 부분이 있습니다. 참고 하시고 응용하시면 될꺼 같습니다.
해보시다 안되시면 쪽지 주세요.
댓글을 작성하려면 로그인이 필요합니다.
여분필드 값을 추출해오는 쿼리가 질문의 화일에는 없는데 이 화일을 호출하는 주소나 링크가 어떻게 되는지 알아야 진단 가능합니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
우선 wr_5~wr_10 까지 최상단에 값을 제대로 불러오는지 여부 파악하시고..
조건으로 값이 없을 경우 0으로 향하게 해버리신 뒤에 자바스크립트를 확인하시면 될것같은데요...
답변에 대한 댓글 3개
[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]
이렇게 하면 값을 못불러옵니다..ㅠ 저기에 어떤 걸 입력해야 여분필드를 불러오는지 알고싶습니다..ㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 3개
$wr_5 -> $view['wr_5']
<?php echo $wr_5 ?> -> <?php echo $view['wr_5'] ?>
[/code]
세크티님이 말씀하신데로 다 수정했는데도 뷰에서 불러오질 못하네요..ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다 정상적으로 불러와지는데 위 부분에 여분필드에 입력된 숫자 값으로 세팅하려면 어떻게 해야할까요?