Question

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

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

在相关的SO帖子中，我将其缩小到post，我相信这应该对我有用。
- 在变量中存储数组数组失败（请参阅Snippet或Plunker中的rawData）。
我必须做一些语法错误，因为之前提到的错误就像唠叨的偏头痛一样。
- 在发现它之后，除了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)"列等等......

尝试使用Google Visualization API中的addRows（）和一组数组--JavaScript / jQuery

段

1 个答案: