将 .hide() 和 .show() 与 Google Visualization 结合使用

发布于 2024-12-22 06:33:45 字数 1894 浏览 3 评论 0原文

我用谷歌可视化创建了一个折线图。我已经测试过它并且它按预期工作。问题是，当我在可视化上使用 .hide() 启动页面，然后单击按钮显示它时，它不会显示可视化。这是我所拥有的内容的精简版本。

<script language="JavaScript">
    $(document).ready(function(){
        $('#visualization').hide();
        $('#show').click(function() {
            $('#visualization').show();
        });
        $('#hide').click(function() {
            $('#visualization').hide();
        });

    });
// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']});
// Begin Annoted Time Line Chart - 1
      function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Number of Users');
          //data.addColumn('string', 'title1');
          data.addRows(10);
data.setValue(0, 0, new Date(2011, 11 ,1));
          data.setValue(0, 1, 21);
          data.setValue(1, 0, new Date(2011, 11 ,2));
          data.setValue(1, 1, 24);
// Do this for the rest of the chart

...
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
              document.getElementById('visualization'));
          annotatedtimeline.draw(data, {'displayAnnotations': true});
        }

      google.setOnLoadCallback(drawVisualization);

</script>
<body>
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a>
    <div style="border:solid">
                <div id="visualization" style="width: 100%; height: 400px;"></div>
        </div>
</body>

如果我在开头注释掉 .hide() ，则显示和隐藏的 2 个按钮工作正常，但当其最初隐藏时，它不起作用。我尝试将可视化代码放置在查询部分上方，但它仍然不起作用。

有人知道如何解决这个问题吗？

谢谢，

克雷格

编辑

我能够使用这个设置超时（函数（）{ $('#tabs').tabs(); // 或隐藏() }, 50); });

原文

I have created a line graph with google visualization. I have tested it and it works as expected. The problem is when I start the page with .hide() on the visualization and then click the button to show it, it will not display the visualization. Here is a cut down version of what I have.

<script language="JavaScript">
    $(document).ready(function(){
        $('#visualization').hide();
        $('#show').click(function() {
            $('#visualization').show();
        });
        $('#hide').click(function() {
            $('#visualization').hide();
        });

    });
// Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart','annotatedtimeline']});
// Begin Annoted Time Line Chart - 1
      function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('date', 'Date');
          data.addColumn('number', 'Number of Users');
          //data.addColumn('string', 'title1');
          data.addRows(10);
data.setValue(0, 0, new Date(2011, 11 ,1));
          data.setValue(0, 1, 21);
          data.setValue(1, 0, new Date(2011, 11 ,2));
          data.setValue(1, 1, 24);
// Do this for the rest of the chart

...
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
              document.getElementById('visualization'));
          annotatedtimeline.draw(data, {'displayAnnotations': true});
        }

      google.setOnLoadCallback(drawVisualization);

</script>
<body>
<a href="#" id="show">show</a> <a href="#" id="hide">hide</a>
    <div style="border:solid">
                <div id="visualization" style="width: 100%; height: 400px;"></div>
        </div>
</body>

If I comment out the .hide() at the beginning the 2 buttons to show and hide work fine, but when its initially hidden it does not work. I have tried placing the code for the visualization above the query part but it still will not work.

Anyone know how to fix this?

Thanks,

Craig

EDIT

I was able to use this
setTimeout(function(){
$('#tabs').tabs(); // or hide()
}, 50);
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酒绊 2024-12-29 06:33:45

如果在隐藏元素中渲染，Gviz 图形将无法正确渲染（通常非常小/接近不可见）。使元素可见后，您需要重新绘制图形。

根据您的代码，执行此操作的一个简单示例是将绘制函数添加到显示处理程序的回调中：

$('#visualization').show(function() {
    drawVisualization();
});

一旦显示完成，回调将被执行。

Gviz graphs will render incorrectly (often extremely small/close to invisible) if rendered in a hidden element. You need to redraw the graph after making the element visible.

A simple example of doing this, based on your code, would be something along the lines of adding your draw function to the callback of the show handler:

$('#visualization').show(function() {
    drawVisualization();
});

The callback will be executed once the show is complete.

回复收藏 0 原文

说不完的你爱 2024-12-29 06:33:45

我已经尝试了上面 Oli 提供的建议，但是在 Chrome 上重新绘制对我来说不起作用。

对我来说更好的方法是用固定数字定义图表中的高度和宽度。
https://developers.google.com/chart/interactive/docs/gallery/bubblechart 描述选项。

我只是使用了这个并且它有效：

   var options = {
      title: '<%= t("views.participants.ranking.s23") %>',
      colors:['#3f3f3f', '#199EDA'],
      chartArea: {top: 30, left: 80, width: 490, height: 300},
      height: 500,
      width: 710,
      legend: {position: 'right', alignment: 'start'},
      sizeAxis: {maxSize: 20}
      }

I've tried the advice provided by Oli above, but the re-drawing did not work out for me on Chrome.

A better approach for me was to define the height and width in the chart with fixed numbers.
https://developers.google.com/chart/interactive/docs/gallery/bubblechart describes the options.

I simply used this and it works:

   var options = {
      title: '<%= t("views.participants.ranking.s23") %>',
      colors:['#3f3f3f', '#199EDA'],
      chartArea: {top: 30, left: 80, width: 490, height: 300},
      height: 500,
      width: 710,
      legend: {position: 'right', alignment: 'start'},
      sizeAxis: {maxSize: 20}
      }

回复收藏 0 原文

~没有更多了~