带标签的 Google 图表 - 图表区域不正确答案

【问题标题】：Google Charts With Tabs - Chart Area Incorrect带标签的 Google 图表 - 图表区域不正确
【发布时间】：2017-01-26 23:35:11
【问题描述】：

虽然这似乎是一个常见问题，但我无法找到解决这个特定问题的方法..

我正在尝试使用 GOOGLE CHARTING API 创建 2 个饼图。

第一个选项卡中的第一个饼图（默认选中）显示准确的宽度和高度，但隐藏选项卡中的第二个饼图未显示适当的宽度..

这里是fiddle...

在 Fiddle 中，我们可以看到隐藏选项卡中的图表区域小于活动选项卡中的图表区域，尽管两个图表的代码相同...

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() 

{

var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

 var options = {
      title: 'My Daily Activities',
  backgroundColor: '#ddd',
  chartArea: {width:500,height:200}
    };

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


chart.draw(data, options);

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


chart1.draw(data, options);
}

如果可以here，请更新fiddle..

【问题讨论】：

+1 用于设置良好且易于遵循的示例

标签： jquery google-visualization jquery-tabs

【解决方案1】：

我有一半的答案给你。我可以看到正在发生的事情，我可以看到一个解决方法，但我还不确定它为什么会发生......

当您调用 .draw 时，vis api 会尝试根据正在绘制的容器的尺寸计算“最佳拟合”。

您的问题是您的容器 div 以不同的大小开始

改变

#content_2, #content_3 { display:none; }

到

#content_2, #content_3 { display:block; }

去看看……

解决此问题的一种解决方法是在使用 a 绘制图表之前触发 click 事件来“初始化”选项卡框内的 div

$(".tabs a[title='content_2']").click()
$(".tabs a[title='content_1']").click()

它看起来很难看，但你可以通过使用显示选项来整理它

这是fiddle 的演示

希望有帮助

【讨论】：

【解决方案2】：

您可以简单地在调用“绘图”之前使 DIV 可见，然后在再次隐藏后立即将其隐藏。例如

//make div visible
chart.draw();
//make div hidden

【讨论】：

【解决方案3】：

这是带有标签的谷歌图表的完整工作示例

<script type="text/javascript" src="https://www.google.com/jsapi?ext.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {


    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
    ]);

    var data1 = google.visualization.arrayToDataTable([
        ['Tasks', 'Hours per Day'],
        ['Works',     12],
        ['Eats',      20],
        ['Commutes',  21],
        ['Watch TVs', 12],
        ['Sleeps',    17]
    ]);
    var options = {'title':'Score Chart',
        'width':600,
        'height':300};



    $(".tabs a[title='content_2']").click()
    $(".tabs a[title='content_1']").click()

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


    chart.draw(data, options);


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


    chart1.draw(data1, options);

}





// When the document loads do everything inside here ...
$(document).ready(function(){

    // When a link is clicked
    $("a.tab").click(function () {


        // switch all tabs off
        $(".active").removeClass("active");

        // switch this tab on
        $(this).addClass("active");

        // slide all content up
        $(".content").slideUp();

        // slide this content up
        var content_show = $(this).attr("title");
        $("#"+content_show).slideDown();

    });

});
</script>

<body>

 <div id="tabbed_box_1" class="tabbed_box">
     <br />
   <div class="tabbed_area">
    <ul class="tabs">
        <li><a href="#" title="content_1" class="tab active">Tab1</a></li>
        <li><a href="#" title="content_2" class="tab">Tab2</a></li>
        <li><a href="#" title="content_3" class="tab">Tab3</a></li>
    </ul>
    <div id="content_1" class="content">
        <div id="chart"></div>
    </div>
    <div id="content_2" class="content">
        <div id="chart1"></div>
    </div>
    <div id="content_3" class="content">
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
        </ul>
    </div>
</div>

【讨论】：

【解决方案4】：

如果有人还在看这个。我建议在激活标签之前重新绘制图表

 $("#tabs").tabs({
    beforeActivate: function (event, ui) {
        drawChart();
    }
});

【讨论】：