谷歌图表错误：无法读取未定义的属性“长度”；谷歌图表中的调试错误答案

【问题标题】：Google charts error:Cannot read property 'length' of undefined; Debugging error in Google Charts谷歌图表错误：无法读取未定义的属性“长度”；谷歌图表中的调试错误
【发布时间】：2011-12-07 05:41:26
【问题描述】：

以下代码可以作为一个独立页面正常工作。但是如果合并到我的 PHP Web 应用程序中，它会引发错误。如果错误发生在谷歌图表JS中，如何调试？任何建议都会有所帮助

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
  </head>

  <body style="font-family: Arial;border: 0 none;">
   <div id="myGraphLabel" onclick="drawColumnChart();">
        My Column Chart
    </div>
    <div id="myColumnChart" style="width: 600px; height: 400px;"></div>
  </body>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>

  <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});

      function drawColumnChart() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(2);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);

        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('myColumnChart')).
            draw(data, {title:"So, how was your day?"});
      }   
    </script>
</html>

Chrome 中的错误：它显示“无法读取未定义的属性'长度'”，容器中有红色背景

Firefox 中的错误： 在 Firebug 控制台中引发错误： b[c] 未定义 http://www.google.com/uds/api/visualization/1.0/97e6275dc5c50efe5944ddda289e59d2/format+en,default,corechart.I.js 785号线

【问题讨论】：

您提供的代码运行良好 - 融入 PHP 是什么意思？
我的意思是在我的 .ctp 文件中。抱歉，不清楚。我确实发现，由于包含prototype-1.6.0.2.js，它不起作用。 :)

标签： javascript google-visualization

【解决方案1】：

我遇到了类似的问题，即 Google 图表工具和原型库发生冲突。我将 Prototype 从 1.6.1 升级到 1.7.1，问题就消失了。

【讨论】：

【解决方案2】：

如果您使用的是 Prototype JS 框架，此答案将适用。（我在这里看不到它，但它可能已被排除在外）。

在 Google 可视化 API here 上有针对此问题的票证。

一个潜在的问题是原型版本或包含的其他库可能存在冲突。

另外，reduce 函数可能需要重新定义：

<script type="text/javascript">
  Array.prototype.reduce = undefined;
</script>

[注意：我过去遇到过这个问题，这导致了解决方案。我第二次遇到这个问题，但原来的解决方案不适用于这个新问题。您的里程可能会有所不同。]

【讨论】：

结合 Prototype JS 框架（或其他类似系统）可能在 2011 年应用于 Google Visualization API 的问题现在可能会有所不同。无论如何，强制 Array.prototype.reduce 为 undefined 的解决方法必然会导致问题，而且实际上，您的代码现在很可能会失败。
突然我得到了这个错误。这是过去 1 年的工作。我已经尝试过了，但它不起作用。

【解决方案3】：

在我的网络应用程序中，我包含了“prototype-1.6.0.2.js”，这导致了这个错误！如果我排除 'prototype-1.6.0.2.js'，一切运行良好！

【讨论】：