【问题标题】:Meteor and google charts流星和谷歌图表
【发布时间】:2012-06-16 18:52:00
【问题描述】:

我正在尝试使用流星来使用谷歌图表系统获取图表更新。所以我要做的是创建一个集合,然后将其提供给谷歌图表的“数据”(例如饼图)。 问题是 google 图表的 javascript 代码只在标签中工作,因此我不能使用 Meteor 的简单诱惑,它只在 . 所以我所做的就是将以下代码放入我的 html 的 head 部分:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});
    </script>
and then in Meteor.startup in Meteor.is_client i call :
google.setOnLoadCallback(drawChart);
 in drawChart the data is defined as follow:

var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

我用从我的集合中获得的数据提供数据的 addRows。但是当我尝试使用客户端 mongo 向它添加数据时,它不会自动更新。它只是在我刷新页面时出现。 你知道我如何知道我的收藏中的变化,然后根据我的 Mongo 收藏中的变化实时重新渲染我的图表吗? 谢谢。

【问题讨论】:

    标签: google-visualization meteor


    【解决方案1】:

    我建议您手动订阅该集合并在更改时将数据提供给谷歌图表。

    请参阅:Meteor.subscribe()。然后我认为您可以通过第三个参数检测更改,即您自己定义的 onComplete 回调函数。我相信在服务器上更改数据时传递给此函数的数据表明数据是否已添加、删除、移动或更改。在这个 onComplete 函数中,您将更新谷歌图表。

    祝你好运。

    【讨论】:

    【解决方案2】:

    好的。我找到了解决方案。 Spilaris,您所说的仅在订阅完成时调用一次。我需要观察数据库的变化。

    【讨论】:

    • 啊。我懂了。也许您可以将最终得到的代码作为示例提供给其他苦苦挣扎的人?
    猜你喜欢
    • 1970-01-01
    • 2017-05-06
    • 2015-07-15
    • 1970-01-01
    • 2017-08-15
    • 1970-01-01
    • 1970-01-01
    • 2018-08-17
    • 2020-08-19
    相关资源
    最近更新 更多