MongoDB Collection 作为 Meteor 应用中 cs.js 的数据源

Question

正如标题所说，我正在使用 c3.js 在 Meteor 应用程序中绘制图表。但是，所有示例都静态设置数据源的变量。

我找不到将 c3 与 Mongo 一起使用的正确方法。假设我有一个像下面这样的简单模板

<template name="model1">
    <div class="chart"></div>
</template>

然后图表代码如下

Template.model1.rendered = function () {
    var chart = c3.generate({
        bindto: this.find('.chart'),
        data: {
            json: [
                {name: 'www.site1.com', upload: 100
                    , download: 200, total: 400}
            ],
            keys: {
                value: ['upload', 'download']
            }
        },
        axis: {
            x: {
                // type: 'category'
            }
        }
    });
};

如何使用查询 Mongo 的结果填充 json 字段，例如 Models.find({"model" : "model1"},{"actual" : 1, "_id": 0})。

运行相当于 Mongo shell db.models.find({"model" : "model1"},{"actual" : 1, "_id": 0}) returns {"actual" : [ 1, 2, 3 ] }

我只是想不出如何解决这个问题

Answer 1

您可以定义 Meteor.methods and Meteor.call 来检索数据并将其填充到 d3。

methods.js

Meteor.methods({

  data: function(){

    check(arguments, [Match.Any]);

    return Models.find({"model" : "model1"},{"actual" : 1, "_id": 0}).fetch();

  }

});

template.html

Template.model1.onRendered(function () {

  var self = this;

  Meteor.call('data', function (error, result) {

    var chart = c3.generate({
      bindto: self.find('.chart'),
      data: {
        json: result,
        keys: {
          value: ['upload', 'download']
        }
      },
      axis: {
        x: {
          // type: 'category'
        }
      }
    });

  });

});

MongoDB Collection 作为 Meteor 应用中 cs.js 的数据源

MongoDB Collection as data source for cs.js in Meteor app

mongodb

d3.js

meteor

c3