尝试将 Google Visualization API 中的 addRows() 与数组数组一起使用 - JavaScript / jQuery

Question

我已尝试addRows() 并收到以下错误：

Uncaught Error: Row given with size different than 20 (the number of columns in the table).

1. 在相关的 SO 帖子中，我将其范围缩小到 post，我认为它应该适合我。
   • 在变量中存储数组数组失败（请参阅 Snippet 或 Plunker 中的 rawData）。
2. 我一定是在语法上做错了，因为前面提到的错误就像一个烦人的偏头痛一样持续存在。
   • 在 linting 之后，除了 google 未定义和 use strict 和制表符/空格警告的警告之外，它是干净的。

这是一个PLUNKER，下面是一个片段。 Plunker 已将标记注释掉，而 Snippet 则尽可能减少。我很少问问题，因为当我完成程序时，我最终会自己解决。不幸的是，这个问题是一个例外。感谢您的宝贵时间。

片段

    /*
    SO References                https://stackoverflow.com/questions/20840251/google-charts-row-given-with-size-different-than-when-data-addrows-from-var
                    */
    /* https://stackoverflow.com/questions/31264149/google-charts-not-accepting-correctly-formatted-array-as-row-data/31266253?noredirect=1#comment50571790_31266253 
     */
    /* Source begins here ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    var rawData = [


      ["2001", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016"],
      [0.21, 0.17, 0.18, 0.23, 0.2, 0.24, 0.24, 0.23, 0.29, 0.32, 0.33, 0.35, 0.35, 0.39, 0.38],
      [0.32, 0.33, 0.3, 0.36, 0.34, 0.34, 0.36, 0.32, 0.38, 0.4, 0.41, 0.41, 0.46, 0.45, 0.46],
      [0.49, 0.4, 0.4, 0.44, 0.42, 0.42, 0.44, 0.41, 0.48, 0.48, 0.51, 0.52, 0.53, 0.59, 0.56],
      [0.0, 0.51, 0.44, 0.49, 0.51, 0.53, 0.54, 0.51, 0.53, 0.61, 0.64, 0.66, 0.67, 0.7, 0.71],
      [0.13, 0.12, 0.11, 0.14, 0.12, 0.14, 0.16, 0.15, 0.2, 0.16, 0.19, 0.23, 0.21, 0.24, 0.27],
      [0.38, 0.35, 0.34, 0.39, 0.41, 0.43, 0.44, 0.36, 0.48, 0.54, 0.52, 0.55, 0.6, 0.62, 0.64],
      [0.3, 0.25, 0.19, 0.25, 0.21, 0.24, 0.24, 0.28, 0.29, 0.31, 0.35, 0.32, 0.41, 0.34, 0.39],
      [0.4, 0.38, 0.36, 0.39, 0.39, 0.4, 0.43, 0.42, 0.46, 0.53, 0.54, 0.54, 0.57, 0.57, 0.58],
      [0.61, 0.59, 0.61, 0.6, 0.63, 0.6, 0.62, 0.63, 0.62, 0.69, 0.73, 0.74, 0.77, 0.82, 0.8],
      [0.21, 0.22, 0.17, 0.19, 0.17, 0.18, 0.19, 0.19, 0.24, 0.27, 0.25, 0.29, 0.3, 0.32, 0.33],
      [0.43, 0.43, 0.4, 0.45, 0.43, 0.48, 0.5, 0.5, 0.53, 0.56, 0.62, 0.59, 0.64, 0.66, 0.7],
      [0.43, 0.4, 0.37, 0.46, 0.44, 0.4, 0.44, 0.39, 0.46, 0.51, 0.52, 0.57, 0.58, 0.61, 0.61],
      [0.18, 0.18, 0.15, 0.14, 0.16, 0.18, 0.2, 0.18, 0.23, 0.28, 0.26, 0.3, 0.29, 0.3, 0.29],
      [0.56, 0.57, 0.6, 0.69, 0.63, 0.65, 0.68, 0.63, 0.67, 0.67, 0.72, 0.73, 0.75, 0.79, 0.78],
      [0.41, 0.36, 0.34, 0.39, 0.39, 0.42, 0.45, 0.45, 0.49, 0.53, 0.57, 0.58, 0.62, 0.64, 0.66],
      [0.34, 0.32, 0.31, 0.37, 0.35, 0.38, 0.41, 0.37, 0.44, 0.49, 0.49, 0.5, 0.53, 0.58, 0.57],
      [0.32, 0.28, 0.21, 0.27, 0.25, 0.26, 0.26, 0.29, 0.3, 0.36, 0.4, 0.38, 0.42, 0.39, 0.42],
      [0.32, 0.28, 0.28, 0.34, 0.31, 0.32, 0.34, 0.32, 0.38, 0.41, 0.44, 0.46, 0.49, 0.53, 0.52],
      [0.38, 0.36, 0.34, 0.39, 0.39, 0.41, 0.43, 0.41, 0.46, 0.51, 0.52, 0.53, 0.55, 0.58, 0.58]

    ];


    google.charts.load('current', {
      'packages': ['line', 'corechart']
    });


    function initGAPI() {
      makeDataTable();
      setOptions();
      drawChart();
    }

    google.charts.setOnLoadCallback(initGAPI);

    function makeDataTable() {
      var data = new google.visualization.DataTable();
      data.addColumn("string", "Year");
      data.addColumn("number", "Silent Generation (1928-45)");
      data.addColumn("number", "Baby Boomers (1946-64)");
      data.addColumn("number", "Generation X (1965-80)");
      data.addColumn("number", "Millennials (1981 or later)");
      data.addColumn("number", "White evangelical Protestants");
      data.addColumn("number", "White mainline Protestants");
      data.addColumn("number", "Black Protestants");
      data.addColumn("number", "Catholics");
      data.addColumn("number", "Unaffiliated");
      data.addColumn("number", "Republican");
      data.addColumn("number", "Democrat");
      data.addColumn("number", "Independent");
      data.addColumn("number", "Conservative");
      data.addColumn("number", "Liberal");
      data.addColumn("number", "Moderate");
      data.addColumn("number", "White, non-Hispanic");
      data.addColumn("number", "Black, non-Hispanic");
      data.addColumn("number", "Men");
      data.addColumn("number", "Women");


      data.addRows(rawData)
    }

    function setOptions() {
      options = {

        curveType: 'function'

      };
    }

    function drawChart() {

      var chart = new google.visualization.LineChart(document.getElementById('chartBox'));
      chart.draw(data, options);
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>00A00</title>

</head>

<body>

  <section id="ii">
    <div id="chartBox"></div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>

  <!--<script block is here normally>-->
</body>

</html>

Answer 1

不确定如何表达，但您的数据数组不正确
行和列是倒置的

这是您的列定义...

data.addColumn("string", "Year");
data.addColumn("number", "Silent Generation (1928-45)");
data.addColumn("number", "Baby Boomers (1946-64)");
...

在一个数组中，它们看起来像这样......

["Year", "Silent Generation (1928-45)", "Baby Boomers (1946-64)", ...]

因此，这些列的数据应如下所示...

["2001", 0.21, 0.32, 0.49, ...],
["2003", 0.17, 0.33, 0.3, ...],
["2004", 0.18, 0.32, 0.49, ...],

而不是……

["2001", "2003", "2004", ...],
[0.21, 0.17, 0.18, ...],

事实上，"2003" 被分配给"Silent Generation (1928-45)" 列

"2004" 到"Baby Boomers (1946-64)" 列等...