如何解决Google物料条形图未按比例绘制条形图
我正在使用一个非常基本的表格/图表生成器来显示电子竞技团队的赛季记录。 表格和图表都使用数据生成,但是所绘制的图表似乎没有按比例绘制条形图。
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",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>
解决方法
当y轴值作为字符串而不是数字加载时会发生这种情况。
确保您在此处使用parseFloat
或parseInt
加载号码...
for (let h = 0; h < array.length; h++){
rArray.push([array[h].type,parseFloat(array[h].count)]);
}
,
我认为
hAxis = {
title: 'time',titleTextStyle: { color: '#FFF',fontSize:16 },textStyle:{color: '#FFF'}
//,slantedText:true,slantedTextAngle:45,gridlines: {
count: 5,color: '#FFF'
}
};
使用的网格线
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。