2017-05-03 91 views
1

我试图写一个自定义条形图指令使用ES6角JS。我已经使用bower install c3 --save安装了c3库。当我运行gulp服务时,我得到错误“c3”未定义no-undef。以下是我的代码 -得到错误“C3”没有定义没有民主基金

export class MyDirective {  
constructor($interval) { 
    'ngInject'; 
    this.template = '<div id=chart></div>'; 
    this.restrict = 'E'; 
    this.scope = {} 
    this.$interval = $interval; 
} 

compile(tElement) { 
    tElement.css('position', 'absolute'); 
} 

link(scope, element) { 
    this.$interval(() => this.chart(), 1000); 
} 

chart() { 
    c3.generate({ 
     bindto: '#chart', 
     data:{ 
      columns: [ 
       ['data1', 30, 200, 100, 400, 150, 250], 
       ['data2', 130, 100, 140, 200, 150, 50] 
      ], 
      type: 'bar' 
     }, 
     bar: { 
      width: { 
       ratio: 0.5 // this makes bar width 50% of length between ticks 
      } 
      // or 
      //width: 100 // this makes bar width 100px 
     }  
    });   
} 
} 
+0

凉亭安装只会相应的文件下载到您的项目文件夹视图解释定义图表,但你STI必须将脚本和css文件包含在index.html中。根据您的项目环境,您可能会帮助完成此任务的吞噬任务... – simonberry

+0

吞噬任务包括c3.js及其依赖的d3.js文件。 – Sai

回答

0

如果您直接安装c3,它将不会“角度友好”。我在项目中使用的C3与ES2015(和巴贝尔蒸腾),我选择使用c3-angular

进行安装:

bower install c3-angular --save 

以及导入它作为一个依赖:

import 'c3-angular'; 
let barChartModule = angular.module('barChart', ['gridshore.c3js.chart']); 

如果你这样做,你可以在你这一点,在examples here

+0

通过在.eslintrc文件中的“globals”:{“c3”:true}中添加“c3”:true来修正错误。 – Sai