出现错误“c3”未定义 no-undef答案

【问题标题】：getting error "c3" is not defined no-undef出现错误“c3”未定义 no-undef
【发布时间】：2017-05-03 10:52:55
【问题描述】：

我正在尝试使用 ES6 在 Angular js 中编写自定义条形图指令。我已经使用 bower install c3 --save 安装了 c3 库。当我运行 gulp serve 时，我收到错误“c3”未定义 no-undef。下面是我的代码-

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

【问题讨论】：

bower install 只会将适当的文件下载到您的项目文件夹中，但您仍然必须在 index.html 中包含脚本和 css 文件。根据您的项目环境，您可能会帮助执行此操作的 gulp 任务...
gulp 任务包括 c3.js 及其依赖的 d3.js 文件。

标签： javascript angularjs ecmascript-6 c3.js

【解决方案1】：

如果你直接安装 c3，它不会是“角度友好的”。我在我的项目中使用 c3 和 es2015（和 babel transpire），我选择使用 c3-angular

安装它：

bower install c3-angular --save

并将其作为依赖项导入：

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

如果你这样做，你可以在你的视图中定义图表，这在examples here中有解释

【讨论】：

通过在 .eslintrc 文件中添加 "c3":true in "globals": { "c3":true} 修复了错误。