Ember js與D3集成

我想包含一個圖表，其中包含2-y軸和我的餘燼項目中的相關2個數據集。Ember js與D3集成

因爲我是新手，D3 JS和JS的餘燼我做了一些google搜索，並拿出NPM包做，像這樣的ember-d3，ember-charts，ember-d3-helpers。等等。

但是他們都認爲我有一點學習曲線。我的問題是，從使用這些軟件包我可以整合和繪製我的圖表？

或者我可以直接使用D3而不需要任何npm跳入？

是否有任何合適的方式將D3集成到了燼寶項目中？

2017-02-25 Prageeth

我目前使用的simplested解決方案是使用ember-cli-build.js導入你的第三個零件庫（見下面的代碼）

/*jshint node:true*/ 
/* global require, module */ 
var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 

module.exports = function(defaults) { 
    var app = new EmberApp(defaults, { 
    // Add options here 
    }); 

    app.import('./bower_components/d3/d3.js'); 
    app.import('./bower_components/c3-0.4.11/c3.js');   
    app.import('./bower_components/c3-0.4.11/c3.css'); 

    return app.toTree(); 
};

上面的代碼讓你不得不D3和C3（這意味着它的lib可全球訪問可以直接在你的窗口對象中訪問）。

C3是一個非常簡單而強大的可重複使用的d3圖表庫，我向每位新的d3用戶推薦。

http://c3js.org/

之後，你有你的庫準備好了，把你的圖表生成組件的didInsertElement鉤內部代碼（只是一個樣本的下方，你可以把它肯定更好）

didInsertElement() { 
    this._super(...arguments); 

    const chart = c3.generate({ 
     data: { 
      columns: [] 
     }, 
     axis: { 
      x: { 
       type: 'category', 
       categories: [ 

       ] 
      } 
     }, 
     zoom: { 
      enabled: true 
     }, 
     legend: { 
      show: false 
     }, 
     grid: { 
      y: {show: true} 
     } 
    }); 

    this.set('globalChart.lineChart', chart); 
},

你可以閱讀更多關於Ember依賴管理處，

https://guides.emberjs.com/v2.11.0/addons-and-dependencies/managing-dependencies/

來源

2017-02-25 09:11:20

Ember js與D3集成

回答

相關問題