Html 选项卡式视图/多个谷歌图表返回错误“；e空“；

我在wordpress页面上有一个选项卡式显示。每个选项卡都需要显示不同的饼图

代码：

google.load（“可视化”，“1”，“{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
setOnLoadCallback（drawChart2）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘级别’，'']，
[High Scool'，]，
[‘某所大学’，]，
[‘副学士’，]，
[‘学士学位’，]，
[‘研究生学位’，]
]);
变量选项={
标题：“最高教育水平”，
is3D：是的，
};
var chart=new google.visualization.PieChart（document.getElementById（'education'）；
图表绘制（数据、选项）；
}
函数drawChart2（）{
var data=google.visualization.arrayToDataTable([
[‘级别’，'']，
[‘从未结婚’，]，
[‘已婚’，]，
[‘分离’，]，
[‘丧偶’，]，
[‘离婚’，]
]);
变量选项={
标题：“婚姻状况”，
is3D：是的，
};
var chart=new google.visualization.PieChart（document.getElementById（'mar_chart_div'））；
图表绘制（数据、选项）；
}

HTML:

受教育程度婚姻状况家庭户主人数
教育类
婚姻状况
家庭
通勤

---

在页面加载时，它会正确显示用于教育的图表，但只要我选择任何其他选项卡，它就会显示“e为空”

在隐藏的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);
}

函数绘图图（）{
var data1=google.visualization.arrayToDataTable([
[‘级别’，'']，
[High Scool'，]，
[‘某所大学’，]，
[‘副学士’，]，
[‘学士学位’，]，
[‘研究生学位’，]
]);
变量选项1={
标题：“最高教育水平”，
is3D：是的，
};
var chart1=新的google.visualization.PieChart（document.getElementById（'education'）；
var data2=google.visualization.arrayToDataTable([
[‘级别’，'']，
[‘从未结婚’，]，
[‘已婚’，]，
[‘分离’，]，
[‘丧偶’，]，
[‘离婚’，]
]);
var选项2={
标题：“婚姻状况”，
is3D：是的，
};
var chart2=新的google.visualization.PieChart（document.getElementById（'mar_chart_div'））；
var chartsReady={
图1：错误，
图2：错误
}
函数initTabs（）{
//在此初始化选项卡界面
}
google.visualization.events.addListener（图表1，'ready'，函数（）{
chartsrady.chart1=真；
如果（图表READY.chart2）{
initTabs（）；
}
});
google.visualization.events.addListener（图表2，'ready'，函数（）{
chartsrady.chart2=真；
如果（图表附件1）{
initTabs（）；
}
});
图表1.绘图（数据1，选项1）；
图表2.绘图（数据2，选项2）；
}

如果要在第一次打开每个图表的“容器”选项卡时绘制该图表，则需要如下所示：

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
}

函数绘图图（）{
var data1=google.visualization.arrayToDataTable([
[‘级别’，'']，
[High Scool'，]，
[‘某所大学’，]，
[‘副学士’，]，
[‘学士学位’，]，
[‘研究生学位’，]
]);
变量选项1={
标题：“最高教育水平”，
is3D：是的，
};
var chart1=新的google.visualization.PieChart（document.getElementById（'education'）；
功能选项卡1打开（）{
图表1.绘图（数据1，选项1）；
}
//在选项卡上连接一个事件处理程序，在打开“教育”选项卡时调用tab1Open
var data2=google.visualization.arrayToDataTable([
[‘级别’，'']，
[‘从未结婚’，]，
[‘已婚’，]，
[‘分离’，]，
[‘丧偶’，]，
[‘离婚’，]
]);
var选项2={
标题：“婚姻状况”，
is3D：是的，
};
var chart2=新的google.visualization.PieChart（document.getElementById（'mar_chart_div'））；
函数tab2Open（）{
图表2.绘图（数据2，选项2）；
}
//在选项卡上连接一个事件处理程序，在打开“mar\u chart\u div”选项卡时调用tab2Open
}

---

这两个概念都可以扩展到包括任意数量的图表和选项卡。

我尝试了您的建议，昨天似乎做到了这一点，但现在它说-无法读取null的属性'length'，您可以演示如何使用它吗。div是否不需要处于“显示：无”状态？如果我不这样做，那么它显示的是图表在一起，但我不想。它应该仅在单击特定选项卡时显示图表。下一部分是处理图形。您有两个基本选项：在初始化选项卡之前绘制所有图表，或者在第一次打开每个图表的容器选项卡时绘制每个图表。代码取决于用于选项卡的库。我将添加一些通用代码，您可以将其用作指南。

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
}