30

我已经解决了我的问题，但我自己无法回答，因为我对这个网站太陌生了：

原来我需要使用以下内容：

chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));

我正在使用 JQuery 来访问元素， $('#pie_today_div'). 到目前为止，证据表明 PieChart 构造函数必须具有标准的 JS 代码，document.getElementById('pie_today_div')

也许发生了其他事情，但改变我访问容器元素的方式修复了我的代码

参考我的解决方案的原始问题

我在尝试实例化 Google PieChart 对象时收到“未定义容器”错误。

我在http://validator.w3.org/验证了我的页面，我得到一个漂亮的绿色横幅，说它验证。

页面加载时我没有收到任何 js 错误。我的 Ajax 调用正在使用我想要从数据库中获取的数据进行完整的往返。

这是我的 HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link href="/css/note.css?10022012" rel="stylesheet" type="text/css" media="screen">
        <script type="text/javascript" language="javascript" src="/call/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">google.load('visualization', '1.0', {'packages':['corechart']});</script>
        <script type="text/javascript" language="javascript" src="/call/js/init.js?10042012-2"></script>
        <title>Call Stats</title>
    </head>
    <body>
        <a href="#" id="pie_today_link">Today Stats</a>
        <div id="pie_today_div"></div>
    </body>
</html>

这是js：

function drawPieChartToday() {

    $.post('/call/ajax.php5',{
        action:'pieToday'
    }, function(ticketData) {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Count');
        data.addColumn('number', 'Topic');
        for (var key in ticketData){
            data.addRow([key, ticketData[key]]);
        }
        options = {
            title: 'Issue Topics'
        };
        alert($('#pie_today_div').attr('id'));
        chart = new google.visualization.PieChart($('#pie_today_div'));
        chart.draw(data, options);
    },'json');     
}

这是我的调试代码，以确保找到该元素： alert($('#pie_today_div').attr('id')); <-- alerts "pie_today_div"

4

5 回答 5

35

我不是 jquery 粉丝，但我认为 $('#pie_today_div') 返回一组匹配的元素。属性计算之所以有效，是因为（来自 jquery文档）它“获取匹配元素集中第一个元素的属性值”。

所以试试

chart = new google.visualization.PieChart($('#pie_today_div')[0]);

或直接

chart = new google.visualization.PieChart(document.getElementById('pie_today_div'));
于 2012-10-04T15:29:15.097 回答
15

容器错误正是如此，它正在寻找ID示例：

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

如果您缺少该 ID，您将在 Google Charts 中收到此错误“未定义容器”因此具有该 chart_div id 的 Div 将解决此问题

于 2014-10-07T01:14:47.833 回答
1

必须有一行可以加载您希望在网页中拥有的可视化类型。看起来像这样 

google.load("visualization", "1", {packages: ["corechart"]});

我在这里加载包corechart。将此行作为第一行<script>放在 HTML 页面内的标签（如 index.html）之后。那应该可以解决他的问题。

于 2014-08-01T13:33:18.907 回答
0

在 init 之前使用 $timeout ，它工作得很好，否则你需要销毁实例

于 2019-10-02T11:07:01.593 回答
-1

只是想提一下，这是在一个简单的错误之后发生在我身上的。我变了

var data = new google.visualization.DataTable(huh);

为了更改图表类型，请执行以下操作：

var data = new google.visualization.BarChart(huh);

但这都是错误的，您更改了提及容器的图表：

var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
于 2013-02-19T23:44:44.460 回答