chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2答案

【问题标题】：chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2chart.js:4 Uncaught ReferenceError: require is not defined in ionic 2
【发布时间】：2017-02-23 14:04:42
【问题描述】：

我正在尝试使用 NG2-Charts (http://valor-software.com/ng2-charts/) 的基本示例

在其 github repo (https://github.com/valor-software/ng2-charts) 中提到：

重要提示：必须在应用程序中嵌入 Chart.js！

<script src="node_modules/chart.js/src/chart.js"></script>

但是当我嵌入这个脚本时它显示一个错误

chart.js:4 Uncaught ReferenceError: require is not defined

有没有人知道如何解决这个问题？谢谢

【问题讨论】：

可能是因为浏览器无法解析需要的原因。你可以阅读browserify.org 来解决这个问题。
@Feeda 我用过browserify，还是没有解决我的问题
您能解释一下您在哪里嵌入脚本

标签： javascript angular ionic2 chart.js ng2-charts

【解决方案1】：

好的！而不是使用 NPM 模块。

bower install chart.js --save

这会将其下载到 bower_components 指令。然后从那里将其包含在您的脚本中

【讨论】：

即使在 index.html 文件中包含 lib 之后。我收到一个错误 error_handler.js:47 EXCEPTION: ng2-charts configuration issue: Embedding Chart.js lib is required
您使用的是github.com/chartjs/Chart.js 对吗？ chartjs.org/docs

【解决方案2】：

要在 Ionic 2 RC0 中使用 chart.js，只需安装库和类型：

$ npm install chart.js --save
$ typings install chart.js --save

在组件的标题中包含库

import 'chart.js/src/chart';
declare var Chart;

并使用它，例如对于带有

的折线图

let ctx = this.canvas.nativeElement
new Chart(ctx, {
  type: 'line',
  data: { your data },
  options:{ your options }
});

其中canvas 是组件模板中图表的 HTML 元素：

<canvas class="line-chart" #canvas></canvas>

【讨论】：