Google Material Bar Chart tidak menggambar batang secara proporsional
Aug 20 2020
Saya sedang mengerjakan generator tabel / bagan yang cukup mendasar untuk menampilkan catatan musim tim olahraga elektronik. Tabel dan bagan sama-sama menghasilkan data, namun bagan yang digambar sepertinya tidak memiliki batang yang digambar secara proporsional.
YAITU bar dengan nilai 3 lebih kecil dari bar dengan nilai 7, tetapi lebih besar dari satu dengan nilai 14, seperti yang ditunjukkan pada gambar yang ditautkan (belum cukup keren untuk memposting)
https://media.discordapp.net/attachments/172054778652786690/745815655764459570/unknown.png
Saya telah menetapkan nilai min, nilai maks, dan arah gambar untuk hAxis, dan juga telah mencoba untuk mengatur garis dasar garis kisi dan menghitung, tetapi semuanya tidak berhasil.
berikut adalah Fungsi mandiri:
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);
});
};
Berikut ini seluruh dokumen HTML untuk referensi.
<!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>
Jawaban
1 WhiteHat Aug 20 2020 at 18:04
ini terjadi ketika nilai sumbu y dimuat sebagai string dan bukan angka.
pastikan Anda memuat nomor dengan menggunakan parseFloatatau parseInt, di sini ...
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,parseFloat(array[h].count)]);
}
Jana Duggar: Semua yang Dia Katakan Tentang Cinta dan Jendela 5 Tahunnya untuk Menemukan 'Yang Satu'