web-dev-qa-db-ja.com

「コンテナが定義されていません」Googleチャート

私は自分の問題を解決しましたが、このサイトにはあまりにも新しいので自分で答えることができません：

私は次を使用する必要がありました：

_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呼び出しは、DBから必要なデータを使用して完全なラウンドトリップを行っています。

こちらが私の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"

apichartscontainers
26
Mike

私はjqueryファンではありませんが、$（ '＃pie_today_div'）は一致した要素のセットを返すと思います。 （jquery documentation から）「一致した要素のセットの最初の要素の属性の値を取得する」ため、属性の計算は機能します。

だから試して

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

または直接

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

コンテナエラーはまさにそれです。IDの例を探しています：

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

そのIDがない場合、Google Chartの「コンテナが定義されていません」というエラーが発生します。したがって、chart_div IDのDivでこれが修正されます

9
Tom Stickel

Webページに含める視覚化の種類を読み込む行が必要です。こんな感じ

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

ここでは、パッケージcorechartをロードしています。この行を、index.htmlのようなHTMLページ内の<script>タグの最初の行として配置します。それは彼の問題を解決するはずです。

1
Akbar