EmberJS 图形组件库 ember-nf-graph

Apache
JavaScript
跨平台
Netflix
2015-05-15
叶秀兰

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}}


加载中

评论(0)

暂无评论

暂无资讯

暂无问答

[转]Popular open source JavaScript frameworks for data visualisation

原文链接:https://sonalake.com/latest/popular-open-source-javascript-frameworks-for-data-visualisation/...

01/11 15:03
10
0
升级Ember到2.2.0版本

目前(_2015-11-24_)使用[Ember CLI](http://www.ember-cli.com/user-guide/)命令安装的`ember`项目默认使用的`ember`版本是1.13.x。如果你想升级到2.0或更高的版本只能手动升级。 下面讲为大...

2015/11/24 23:37
163
0
数据可视化(三)基于 Graphviz 实现程序化绘图

前言 我之前在几篇文章新一代Ntopng网络流量监控—可视化和架构分析、 数据可视化(一)思维利器 OmniGraffle 绘图指南 |201601,都曾提到了力导图,在关于 OmniGraffle 的文章结尾还吐槽了一...

2017/09/21 18:08
2.3K
6
Ember.js入门教程、博文汇总

文章来源:http://xcoding.tech/tags/Emberjs/ 网友@如影随形提意见说整个教程的目录,细想也是,整个网站的管理有点乱,很多东西都不知道放哪里找起来也不方便*(太懒了,连个搜索都没有!)...

2016/05/25 23:12
571
3
一起参与Ember.js讨论、问答社区。

为了大家能更深入学习Ember.js,我没天都会发一个API出来供大家学习,每天3个。量少而慢慢积累,希望这是一种更好的学习API的方式。 另外,每隔几天我会提出一个小问题,让家伙参与进来,根据...

2016/09/25 18:14
96
0
模型高级特性,引入模型关联关系

继续接着前面5篇讲述如何构建一个稍微复杂的Ember.js应用。本篇继续讲述组件的使用、模型特性,引入构建测试数据的开发库faker.js。

2016/04/27 18:08
33
1
如何在Ember.js项目中使用在线文本编辑器

如何在Ember.js项目中使用在线文本编辑器??网上有很多开发者想在[Ember.js](https://guides.emberjs.com)项目中使用[ueditor](https://ueditor.baidu.com)但是遗憾的是ueditor并不支持Emb...

2016/05/10 02:06
79
2
从服务器获取数据,引入组件

接着前面四篇博文,继续为你介绍如何搭建一个复杂的Ember项目。本文主要介绍组件,组件是Ember框架中一个非常非常重要的东东,想学好Ember.js必须要理解组件(component)。...

2016/04/26 23:22
53
1
Ember版本小小结

不得不说Ember更新实在是太快了!!现在(_2015-11-23_)已经更新到2.2.0版本了。随着版本的升级很多旧版的特性会被声明为过是,甚至是弃用, 这对开发者来说是在是痛苦!版本的兼容性问题成...

2016/01/25 22:13
88
1
使用ember-simple-auth实现Ember.js应用的权限控制

很多网站都有登录功能,对于Ember的应用我们怎么实现权限的控制呢?本篇将为你演示一个最常用的权限控制例子:用户登录。 要实现登录最常用的方式是通过判断session值,如果session中存在你所...

2015/11/20 02:14
609
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部