4

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

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

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

这是小提琴...

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

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

如果可以在这里更新小提琴..

4

4 回答 4

3

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

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

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

改变

#content_2, #content_3 { display:none; }

至

#content_2, #content_3 { display:block; }

查看...

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

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

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

这是小提琴作为演示

希望有帮助

于 2013-05-09T05:21:06.920 回答
0

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

//make div visible
chart.draw();
//make div hidden
于 2015-02-11T08:13:36.160 回答
0

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

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

于 2017-01-26T15:35:11.083 回答
-1

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

 $("#tabs").tabs({
    beforeActivate: function (event, ui) {
        drawChart();
    }
});
于 2016-10-21T16:55:57.383 回答