막대를 비례 적으로 그리지 않는 Google Material Bar Chart
Aug 20 2020
저는 e 스포츠 팀의 시즌 기록을 표시하기 위해 매우 기본적인 테이블 / 차트 생성기를 작업 중입니다. 테이블과 차트는 모두 데이터로 생성되지만 그려지는 차트에는 막대가 비례 적으로 그려지지 않는 것 같습니다.
IE 값이 3 인 막대는 값이 7 인 막대보다 작지만 링크 된 이미지에서 볼 수 있듯이 값이 14 인 막대보다 큽니다 (아직 게시하기에 충분하지 않음).
https://media.discordapp.net/attachments/172054778652786690/745815655764459570/unknown.png
hAxis에 대한 최소값, 최대 값 및 그리기 방향을 설정하고 격자 선 기준선과 개수를 설정하려고 시도했지만 모두 소용이 없습니다.
독립형 함수는 다음과 같습니다.
function drawChart(){
jQuery.getJSON("https://spreadsheets.google.com/feeds/list/17PBCZMmVsSBiXV1-9f3KAfrpa_znstFRYM7GGvR_ps0/2/public/full?alt=json", function (data) {
const chartData = data.feed.entry;
const selectedSeason = document.getElementById('selectSeason').value;
let array = [];
let i;
for (i = 0; i < chartData.length; i++) {
let season = data.feed.entry[i]['gsx$season']['$t'];
let type = data.feed.entry[i]['gsx$type']['$t'];
let count = data.feed.entry[i]['gsx$count']['$t'];
if(selectedSeason === season){
array.push({type: type, count: count})
}
}
console.log(array);
let calArray = function(){
let rArray = [['Statistic', 'Count']];
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,array[h].count]);
}
return rArray
}
let chartArray = new google.visualization.arrayToDataTable(
calArray()
);
let chartOptions = {
animation: {
duration: 2.5,
startup: true,
},
bars: 'horizontal',
colors: ['#8040bf', '#8040bf', '#8040bf'],
chart: {
title: 'Phoenix Rising Amethyst',
subtitle: 'Season '+selectedSeason+' Record'
},
hAxis: {
direction: 1,
maxValue: 30,
minValue: 0,
},
};
let barChart = new google.charts.Bar(document.getElementById('chart_div'));
barChart.draw(chartArray, chartOptions);
});
};
다음은 참조 용 전체 HTML 문서입니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="RosterTable.css">
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart', 'bar']});
</script>
</head>
<body onload="generateTable(); drawChart()">
<H2 align="center">Season Records</H2>
<hr align="center">
<br>
<div>
<p align="center">Select Season</p>
<select id="selectSeason" align="center" onchange="clearTable(); generateTable(); drawChart()">
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</div>
<br>
<script type="text/javascript">
function generateTable() {
jQuery.getJSON("https://spreadsheets.google.com/feeds/list/17PBCZMmVsSBiXV1-9f3KAfrpa_znstFRYM7GGvR_ps0/2/public/full?alt=json", function (data) {
const sheetData = data.feed.entry;
const selectedSeason = document.getElementById('selectSeason').value;
let i;
for (i = 0; i < sheetData.length; i++) {
let season = data.feed.entry[i]['gsx$season']['$t'];
let type = data.feed.entry[i]['gsx$type']['$t'];
let count = data.feed.entry[i]['gsx$count']['$t'];
if(selectedSeason === season){
document.getElementById("autoTableBody").innerHTML += ("<tr>"+"<td class='roster_td_odd_all'>"+type+"</td>"+"<td class='roster_td_odd_all'>"+count+"</td>"+"</tr>");
}
}
});
};
function clearTable(){
document.getElementById("autoTableBody").innerHTML = "";
};
function drawChart(){
jQuery.getJSON("https://spreadsheets.google.com/feeds/list/17PBCZMmVsSBiXV1-9f3KAfrpa_znstFRYM7GGvR_ps0/2/public/full?alt=json", function (data) {
const chartData = data.feed.entry;
const selectedSeason = document.getElementById('selectSeason').value;
let array = [];
let i;
for (i = 0; i < chartData.length; i++) {
let season = data.feed.entry[i]['gsx$season']['$t'];
let type = data.feed.entry[i]['gsx$type']['$t'];
let count = data.feed.entry[i]['gsx$count']['$t'];
if(selectedSeason === season){
array.push({type: type, count: count})
}
}
console.log(array);
let calArray = function(){
let rArray = [['Statistic', 'Count']];
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,array[h].count]);
}
return rArray
}
let chartArray = new google.visualization.arrayToDataTable(
calArray()
);
let chartOptions = {
animation: {
duration: 2.5,
startup: true,
},
bars: 'horizontal',
colors: ['#8040bf', '#8040bf', '#8040bf'],
chart: {
title: 'Phoenix Rising Amethyst',
subtitle: 'Season '+selectedSeason+' Record'
},
hAxis: {
direction: 1,
maxValue: 30,
minValue: 0,
},
};
let barChart = new google.charts.Bar(document.getElementById('chart_div'));
barChart.draw(chartArray, chartOptions);
});
};
</script>
<div id="tableDiv" class='table.div'>
<table>
<thead>
<tr>
<th class='roster_th_all_pra'>Statistic</th>
<th class='roster_th_all_pra'>Count</th>
</tr>
</thead>
<tbody id="autoTableBody"/>
</table>
</div>
<div id='chart_div'/>
</body>
</html>
답변
1 WhiteHat Aug 20 2020 at 18:04
이것은 y 축 값이 숫자가 아닌 문자열로로드 될 때 발생합니다.
당신이 사용하여 숫자를 넣는 확인 parseFloat또는 parseInt여기에, ...
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,parseFloat(array[h].count)]);
}