Question

我们正试图在Ember应用程序中使用（pubnub）EON图表。

虽然我们看到this谈到在Ember中使用pubnub API，但这并没有谈论EON图表。

是否有＆＃34; Ember包裹＆＃34; EON图变种？无论哪种方式，一些示例代码都会有所帮助。

Answer 1

您可以像使用任何其他库一样使用EON和Ember。查看结合this example和EON real time spline chart example的<{3}}。

您的HTML：

<script type="text/javascript" src="//pubnub.github.io/eon/v/eon/0.0.9/eon.js"></script>
<link type="text/css" rel="stylesheet" href="//pubnub.github.io/eon/v/eon/0.0.9/eon.css"/>
<div id="chart"></div>

<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2>

  {{outlet}}
</script>

<script type="text/x-handlebars" id="index">
  <ul>
  {{#each item in model}}
    <li>{{item}}</li>
  {{/each}}
  </ul>
</script>

然后在你的JS中：

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

var pubnub = PUBNUB.init({
  publish_key: 'demo',
  subscribe_key: 'demo'
});
var channel = "c3-spline" + Math.random();
eon.chart({
  channel: channel,
  history: true,
  flow: true,
  pubnub: pubnub,
  generate: {
    bindto: '#chart',
    data: {
      labels: false
    }
  }
});

var pubnub = PUBNUB.init({
  publish_key: 'demo',
  subscribe_key: 'demo'
});
setInterval(function(){

  pubnub.publish({
    channel: channel,
    message: {
      eon: {
        'Austin': Math.floor(Math.random() * 99),
        'New York': Math.floor(Math.random() * 99),
        'San Francisco': Math.floor(Math.random() * 99),
        'Portland': Math.floor(Math.random() * 99)
      }
    }
  });

}, 1000);

在Ember页面中使用EON图表

1 个答案: