Question

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

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

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

这是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);
}

如果可以fiddle ..

，请更新here

Answer 1

我有半个答案给你。我可以看到发生了什么，我可以看到一个解决方法，但我不确定为什么会发生......

当你打电话给.draw时，vis api试图根据被绘制的容器的尺寸来计算“最适合”。

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

更改

#content_2, #content_3 { display:none; }

到

#content_2, #content_3 { display:block; }

看......

解决问题的一种解决方法是通过在使用

绘制图表之前触发click事件来“初始化”选项卡框内的div

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

它在小提琴上看起来很难看，但你可以通过玩显示选项来整理它

这是fiddle作为演示

希望有所帮助

Answer 2

您可以在调用＆＃34; draw＆＃34;之前简单地使DIV可见。然后立即再次隐藏。例如，

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

Answer 3

以下是带有标签的Google图表的完整工作示例

<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>

Answer 4

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

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

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

4 个答案: