foreach문을 이용한 차트 구현 질문입니다
본문
그누보드에 차트를 적용하려고 노력중입니다.
그런데 foreach문에서 막혔습니다
적용하려면 foreach문을 사용해야하는데 말이죠..ㅜ
밑에 질문에 잘 대답해주셔서 원인을 찾았습니다
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<?php
$a = array(1,2,3,17, 30, 20); // 차트에 나타날 값
foreach ($a as $v) {
$i_v = $v;
?>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data:[<?php echo "$i_v,"?>], // [1,2,3,17,30,20]?
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
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
<?php echo "$i_v,"?>
<?php }?>
17번째 data 부분에 값이 [1,2,3,17,30,20] 이렇게 되야하는데
이렇게 돌리면 [1,][2,][3,][17,][30,][20,] 값으로 나와서 차트가 제대로 출력이 안되네요 ㅜ
foreach문을 유지하면서 data 값에 [1,2,3,17,30,20] 을 넣고싶은데 조언을 여쭙고싶습니다
답변 1
원하는 값의 출력형태만 보자면
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data:[
<?php $a = array(1,2,3,17, 30, 20); // 차트에 나타날 값
$chk = 0;
foreach ($a as $v) {
$i_v = $v;
echo $i_v;
if ($chk > 0)
echo ",";
$chk++;
}
?>
], // [1,2,3,17,30,20]?
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
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
로 해보세요
너무 너무 감사합니다 ㅜㅜ 정말 제가 딱 원하는데로 다되요!!
복 많이받으세요!!
답변을 작성하시기 전에 로그인 해주세요.
