svg>并且<rect>谷歌折线图中的内联样式错误

svg> and <rect> inline style bug in google line charts

本文关键字:gt 错误 样式 谷歌 并且 lt rect svg 折线图      更新时间:2023-09-26

我想在谷歌折线图中将宽度更改为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>

需要帮助。感谢

从div的id来看,我猜您使用的是某种基于选项卡的UI,对吧?如果是这样,那就是问题的根源。当您试图绘制图表时,页面上的第二个和第三个选项卡div将被隐藏,这会打乱API获取第二个图和第三张图的容器div的维度的能力。要解决此问题,您可以做以下两件事之一:在实例化选项卡界面之前绘制图表,或者在选项卡上设置事件处理程序,在首次打开容器选项卡时绘制每个图表。