foreach문을 이용한 차트 구현 질문입니다 채택완료
유성규
6년 전
조회 2,056
그누보드에 차트를 적용하려고 노력중입니다.
그런데 foreach문에서 막혔습니다
적용하려면 foreach문을 사용해야하는데 말이죠..ㅜ
밑에 질문에 잘 대답해주셔서 원인을 찾았습니다
</p>
<pre>
<script src="<a href="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script></a>
<?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개
채택된 답변
+20 포인트
6년 전
원하는 값의 출력형태만 보자면
</p>
<pre>
<script src="<a href="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>" target="_blank" rel="noopener noreferrer">https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script></a>
<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>
</pre>
<p>
로 해보세요
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
유성규
6년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
복 많이받으세요!!