Question

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

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

<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})运行等效项返回{"actual" : [ 1, 2, 3 ] }

我无法弄清楚如何处理这个

Answer 1

您可以定义Meteor.methods和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 app中cs.js的数据源

1 个答案: