0

我想在我的谷歌折线图中将宽度更改为 100%。容器已设置为 100% 宽度。我的网页上有三个图表，其中一个图表实际上显示了我设置为 100% 的完美宽度，但其余图表没有显示指定的大小，即 100%。可能是什么问题呢？

当我使用谷歌浏览器检查它们时，我检查了它们设置为 400 的代码，但第一个图形的宽度不同。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
    var follower1 = parseInt(<?php echo json_encode($followersvalue2); ?>);
    var follower2 = parseInt(<?php echo json_encode($followersvalue3); ?>);
    var follower3 = parseInt(<?php echo json_encode($followersvalue4); ?>);
    var follower4 = parseInt(<?php echo json_encode($followersvalue5); ?>);

    var tweets1 = parseInt(<?php echo json_encode($tweetsvalue2); ?>);
    var tweets2 = parseInt(<?php echo json_encode($tweetsvalue3); ?>);
    var tweets3 = parseInt(<?php echo json_encode($tweetsvalue4); ?>);
    var tweets4 = parseInt(<?php echo json_encode($tweetsvalue5); ?>);

    var kscore1 = parseInt(<?php echo json_encode($kscorevalue2); ?>);
    var kscore2 = parseInt(<?php echo json_encode($kscorevalue3); ?>);
    var kscore3 = parseInt(<?php echo json_encode($kscorevalue4); ?>);
    var kscore4 = parseInt(<?php echo json_encode($kscorevalue5); ?>);

    var date1 = "<?php echo $previousDate2; ?>";
    var date2 = "<?php echo $previousDate3; ?>";
    var date3 = "<?php echo $previousDate4; ?>";
    var date4 = "<?php echo $previousDate5; ?>";

  function drawVisualization() {

    var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date');
  data.addColumn('number', 'Followers');
  data.addRows([
      [date4,  follower4],
      [date3,  follower3],
      [date2,  follower2],
      [date1,  follower1]

  ]);

    new google.visualization.LineChart(document.getElementById('visualization')).
        draw(data, {curveType: "function",
                    width: 100+'%', height: 400,
                    vAxis: {maxValue: 10}}
            );
  }

    /* Function for Tweets Graph
    * To be displayed in Tweets Tab
    * :)
    */

    function drawVisualizationTweets(){
        var data = new google.visualization.DataTable();
  data.addColumn('string', 'Date'); 
  data.addColumn('number', 'Tweets'); 
  data.addRows([
    [date4,  tweets4],
    [date3,  tweets3],
    [date2,  tweets2],
    [date1,  tweets1] 

  ]);


    new google.visualization.LineChart(document.getElementById('visualization2')).
        draw(data, {curveType: "function",
                    width: 100+'%', height: 400,
                    vAxis: {maxValue: 10}}
            );
  }

    /* Function for Kloutscore Graph
    * To be displayed in KloutScore Tab
    * :)
    */
    function drawVisualizationKscore(){
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'KloutScore');
        data.addRows([
            [date4, kscore4],
            [date3, kscore3],
            [date2, kscore2],
            [date1, kscore1]
        ]);

        new google.visualization.LineChart(document.getElementById('visualization3')).
            draw(data, {curveType: "function",
                       width: 100+'%', height: 400,
                       vAxis: {maxValue: 10}}
                );            
    }

    google.setOnLoadCallback(drawVisualization);
    google.setOnLoadCallback(drawVisualizationTweets);
    google.setOnLoadCallback(drawVisualizationKscore);

   </script>

在我有

     <div id="tab-1" aria-labelledby="ui-id-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;">
        <div id="visualization" style="width: 100%; height: 400px;"></div>
    </div>

    <div id="tab-2" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
        <div id="visualization2" style="width: 100%; height: 400px;"></div>
    </div>

    <div id="tab-3" aria-labelledby="ui-id-4" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
        <div id="visualization3" style="width: 100%; height: 400px;"></div>
     </div>
</body>

需要帮助。谢谢

4

1 回答 1

1

从您的 div 的 id 来看，我猜您正在使用某种基于选项卡的 UI，对吗？如果是这样，那就是你问题的根源。当您尝试绘制图表时，页面上的第二个和第三个选项卡 div 将被隐藏，这会破坏 API 获取第二个和第三个图表的容器 div 尺寸的能力。要解决此问题，您可以执行以下两项操作之一：在实例化选项卡界面之前绘制图表，或者在选项卡上设置事件处理程序，以便在首次打开容器选项卡时绘制每个图表。

于 2013-08-27T05:31:07.217 回答