Столбиковая диаграмма материалов Google не отображает полосы пропорционально
Aug 20 2020
Я работаю над довольно простым генератором таблиц / диаграмм, чтобы отображать сезонные рекорды киберспортивной команды. Таблица и диаграмма генерируются на основе данных, однако на рисуемой диаграмме полосы не отображаются пропорционально.
То есть полоса со значением 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)]);
}