首页 > 解决方案 > JavaScript Google Chart 无效行 #1

问题描述

我正在尝试创建一个谷歌图表,其中列出了某一周的所有固定装置以及每个固定装置有多少帖子。这是我正在运行的代码:

<script type="text/javascript">
  google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
      var stringArray = [];
      <c:forEach items="${posts}" var="post" varStatus="count">

        stringArray.push("<c:out value='${post.fixture.home.teamName}v${post.fixture.away.teamName}'/>", 1);
    </c:forEach>
    var newArray = [["Games", "Amount of Posts"]];
    var postArray = [1,2,3,4,5,6,7,8];
    var x = 1;
    while(x <= stringArray.length){
        var games = stringArray[x];
        var numbers = postArray[x];
        console.log("Game " + games);
        newArray.push([games, numbers]);
        x++;
    }
    console.log(newArray[1]);
    var data = google.visualization.arrayToDataTable(newArray);

    var options = {
      chart: {
        title: 'Referee Performance',
        subtitle: 'Season 20-21',
      },
      bars: 'horizontal'
    };

    var chart = new google.charts.Bar(document.getElementById('barchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
  }
  </script>

让我们仔细看看这个部分

        var newArray = [["Games", "Amount of Posts"]];
    var postArray = [1,2,3,4,5,6,7,8];
    var x = 1;
    while(x <= stringArray.length){
        var games = stringArray[x];
        var numbers = postArray[x];
        console.log("Game " + games);
        newArray.push([games, numbers]);
        x++;
    }

所以 newArray 将用于绘制表格,因为它有标题,然后我有一个数组,其中包含所有固定装置(stringArray)和另一个数组,每个数组有多少帖子(postArray)。我正在尝试将字符串数组和 postArray 的第一个索引添加到 newArray 中的下一个索引。这不起作用,并且正在做一些奇怪的事情。我添加了 console.log,这是我得到的输出。

Game 1
2:50 Game Crystal PalacevSouthampton
2:50 Game 1
2:50 Game Crystal PalacevSouthampton
2:50 Game 1
2:50 Game undefined
2:54 (2) [1, 2]

所以这有两个问题。出于某种原因,x 没有增加,也没有保存团队名称,出于某种原因,它保存了 1。我不确定我是否在做一些愚蠢的事情?那么如何解决上面的错误呢?感谢您的时间

标签: javascriptarraysgoogle-visualization

解决方案


推荐阅读