Вид с вкладками / несколько диаграмм Google возвращают ошибку «e null»

Известно, что диаграммы чертежей внутри скрытых div (которые являются большинством интерфейсов табуляции) вызывают проблемы в API визуализации, хотя это сообщение об ошибке не то, что я ожидаю увидеть как прямой результат использования вкладок. Решение этой проблемы, вероятно, будет итеративным процессом, поэтому я хотел бы начать с нескольких различных подходов, чтобы исключить некоторые возможные причины.

Сначала создайте эту функцию:

function initialize () {
    drawChart();
    drawChart2();
}

и замените google.load и google.setOnLoadCallback следующим образом:

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

Перезагрузите страницу с этими изменениями. Вы все еще видите ошибку?

[Изменить - добавлен общий код, чтобы помочь с проблемами с вкладками]

Во-первых, консолидация вашего кода в одну функцию рисования, вероятно, поможет вам здесь, так как вам необходимо скопировать чертеж двух диаграмм. Этот код является примером инициализации ваших вкладок после рисования диаграмм:

function drawChart () {
    var data1 = google.visualization.arrayToDataTable([
        ['Level', ''],
        ['High Scool', <?php echo $myrows->EduHsch;?>],
        ['Some College', <?php echo $myrows->EduScoll;?>],
        ['Associate Degree', <?php echo $myrows->EduAssoc;?>],
        ['Bachelor Degree', <?php echo $myrows->EduBach;?>],
        ['Graduate Degree', <?php echo $myrows->Mardivor;?>]
    ]);

    var options1 = {
        title: 'Highest Level of Education',
        is3D: true,
    };

    var chart1 = new google.visualization.PieChart(document.getElementById('education'));

    var data2 = google.visualization.arrayToDataTable([
        ['Level', ''],
        ['Never Married', <?php echo $myrows->MarNever;?>],
        ['Married', <?php echo $myrows->MarMarr;?>],
        ['Seperated', <?php echo $myrows->Marsep;?>],
        ['Widowed', <?php echo $myrows->MarWidow;?>],
        ['Divorced', <?php echo $myrows->EduGrad;?>]
    ]);

    var options2 = {
        title: 'Marital Status',
        is3D: true,
    };

    var chart2 = new google.visualization.PieChart(document.getElementById('mar_chart_div'));

    var chartsReady = {
        chart1: false,
        chart2: false
    }

    function initTabs () {
        // initialize tab interface here
    }

    google.visualization.events.addListener(chart1, 'ready', function () {
        chartsReady.chart1 = true;
        if (chartsReady.chart2) {
            initTabs();
        }
    });
    google.visualization.events.addListener(chart2, 'ready', function () {
        chartsReady.chart2 = true;
        if (chartsReady.chart1) {
            initTabs();
        }
    });

    chart1.draw(data1, options1);
    chart2.draw(data2, options2);
}

Если вместо этого вы хотите нарисовать каждый график, когда он сначала откроет вкладку контейнера, тогда вы хотите что-то вроде этого:

function drawChart () {
    var data1 = google.visualization.arrayToDataTable([
        ['Level', ''],
        ['High Scool', <?php echo $myrows->EduHsch;?>],
        ['Some College', <?php echo $myrows->EduScoll;?>],
        ['Associate Degree', <?php echo $myrows->EduAssoc;?>],
        ['Bachelor Degree', <?php echo $myrows->EduBach;?>],
        ['Graduate Degree', <?php echo $myrows->Mardivor;?>]
    ]);

    var options1 = {
        title: 'Highest Level of Education',
        is3D: true,
    };

    var chart1 = new google.visualization.PieChart(document.getElementById('education'));

    function tab1Open () {
        chart1.draw(data1, options1);
    }

    // hook up an event handler on your tabs that calls tab1Open when the education tab is opened

    var data2 = google.visualization.arrayToDataTable([
        ['Level', ''],
        ['Never Married', <?php echo $myrows->MarNever;?>],
        ['Married', <?php echo $myrows->MarMarr;?>],
        ['Seperated', <?php echo $myrows->Marsep;?>],
        ['Widowed', <?php echo $myrows->MarWidow;?>],
        ['Divorced', <?php echo $myrows->EduGrad;?>]
    ]);

    var options2 = {
        title: 'Marital Status',
        is3D: true,
    };

    var chart2 = new google.visualization.PieChart(document.getElementById('mar_chart_div'));

    function tab2Open () {
        chart2.draw(data2, options2);
    }

    // hook up an event handler on your tabs that calls tab2Open when the mar_chart_div tab is opened
}

Обе эти концепции могут быть расширены, чтобы включать произвольное количество графиков и вкладок.