ember-nf-graphEmberJS 图形组件库

ember-nf-graph 是 EmberJS 的可组合图形组件库。ember-nf-graph 是一个基于组件的 DSL，可以在 Ember 应用中创建图形。

基础代码示例：

export default Ember.Route.extend({
  model() {    return {
      myLineData: [
        { x: 0, y: 12 },
        { x: 1, y: 32 },
        { x: 2, y: 42 },        // ...
      ],
      myAreaData: [
        { x: 0, y: 43 },
        { x: 1, y: 54 },
        { x: 2, y: 13 },        // ...
      ]
    };
  }
});

{{#nf-graph width=500 height=300}}
  {{#nf-graph-content}}
    <!-- add a line -->
    {{nf-line data=model.myLineData}}

    <!-- add an area -->
    {{nf-area data=model.myAreaData}}

    <!-- mix in any SVG element you want -->
    <circle cx="40" cy="40" r="10"></circle>  {{/nf-graph-content}}

    <!-- axis ticks are templateable as well -->
  {{#nf-y-axis as |tick|}}
    <text>{{tick.value}}</text>  {{/nf-y-axis}}


  {{#nf-x-axis as |tick|}}
    <text>{{tick.value}}</text>  {{/nf-x-axis}}{{/nf-graph}}