html - 选项卡式 View /多个谷歌图表返回错误 "e null"

Question

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

代码:

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

    function drawChart() {
    var data = 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 options = {
      title: 'Highest Level of Education',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('education'));
    chart.draw(data, options);
  }

    function drawChart2() {
    var data = 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 options = {
      title: 'Marital Status',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('mar_chart_div'));
    chart.draw(data, options);
  }

HTML:

     <div class="su-tabs su-tabs-style-default" data-active="1">
    <div class="su-tabs-nav" ><span class="" >Education</span><span class="" >Marital  Status</span><span class="" id="hh">Households</span><span class="">Commute</span></div>
    <div class="su-tabs-panes">
    <div class="su-tabs-pane su-clearfix" style="width: 500px; height: 500px;display:block;" id="education">Education</div>
    <div class="su-tabs-pane su-clearfix" style="width: 500px; height: 500px;display:block;"  id="mar_chart_div">Marital Status</div>
    <div class="su-tabs-pane su-clearfix" style="width: 500px; height: 500px;display:block;"  id="house_chart_div">Households</div>
    <div class="su-tabs-pane su-clearfix"style="width: 500px; height: 500px;display:block;"  id="commute_chart_div">Commute</div>
    </div>

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

Answer 1

众所周知，在隐藏的 div 内绘制图表(大多数选项卡界面都是这样)会导致 Visualization 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
}

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