El gráfico de barras de material de Google no dibuja barras proporcionalmente
Aug 20 2020
Estoy trabajando en un generador de tablas/gráficos bastante básico para mostrar el récord de temporada de un equipo de deportes electrónicos. Tanto la tabla como el gráfico se generan con datos, sin embargo, el gráfico que se está dibujando no parece tener las barras dibujadas proporcionalmente.
Es decir, una barra con un valor de 3 es más pequeña que una barra con un valor de 7, pero más grande que una con un valor de 14, como se muestra en la imagen vinculada (todavía no es lo suficientemente interesante como para publicar una)
https://media.discordapp.net/attachments/172054778652786690/745815655764459570/unknown.png
Establecí el valor mínimo, el valor máximo y la dirección de dibujo para el hAxis, y también intenté establecer la línea de base y el conteo de la línea de cuadrícula, pero todo fue en vano.
aquí está la función independiente:
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);
});
};
Aquí está todo el documento HTML como referencia.
<!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>
Respuestas
1 WhiteHat Aug 20 2020 at 18:04
esto ocurre cuando el valor del eje y se carga como una cadena y no como un número.
asegúrese de que está cargando números usando parseFloato parseInt, aquí...
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,parseFloat(array[h].count)]);
}