"Контейнер не определен" Google chart

Я решил свою проблему, но не могу ответить сам, так как я слишком новичок на этом сайте:

Мне нужно было использовать следующее:

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')); < - warning "pie_today_div"

Ответы

Ответ 1

Я не поклонник 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'));

Ответ 2

Ошибка контейнера именно так, он ищет идентификатор Пример:

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

Вы получите эту ошибку "Контейнер не определен" для графиков Google, если вы отсутствуете этот идентификатор Таким образом, Div с этим идентификатором chart_div исправит этот

Ответ 3

Должна быть строка, в которой вы загружаете типы визуализации, которые хотите иметь на своей веб-странице. Похоже на это

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

Здесь я загружаю пакет corechart. Поместите эту строку как первую строку после тега <script> внутри вашей HTML-страницы, например index.html. Это должно решить проблему.

Ответ 4

используйте $ timeout перед init, он работает хорошо, иначе вам нужно уничтожить экземпляр

Ответ 5

Просто хотел упомянуть, это произошло для меня после простой ошибки. Я изменил

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

чтобы изменить тип диаграммы:

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

но это все неправильно, вы меняете диаграмму, где вы указываете контейнер:

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