Google Material 条形图未按比例绘制条形图

Question

我正在开发一个非常基本的 table/chart 生成器来显示电子竞技队的赛季记录。 table 和图表都在生成数据，但是正在绘制的图表似乎没有按比例绘制条形图。

IE 值为 3 的条小于值为 7 的条，但大于值为 14 的条，如链接图像所示（不够酷 post一个）

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>

Answer 1

我觉得

hAxis = {
                title: 'time', titleTextStyle: { color: '#FFF', fontSize:16 } , textStyle:{color: '#FFF'}
                //, slantedText:true, slantedTextAngle:45
                , gridlines: {
                    count: 5
                    , color: '#FFF'
                }
            };

使用网格线

Answer 2

当 y-axis 值作为字符串而不是数字加载时会发生这种情况。

确保您使用 parseFloat 或 parseInt 加载号码，此处...

for (let h = 0; h < array.length; h++){
  rArray.push([array[h].type,parseFloat(array[h].count)]);
}

Google Material 条形图未按比例绘制条形图

Google Material Bar Chart not drawing bars proportionally

javascript

charts

google-visualization