Question

我正在使用VS2017和Angular 2 spa模板

我已按照以下步骤进行操作

npm install chart.js --save

然后我按如下方式配置了我的组件

import { ViewChild, Component, ElementRef, OnInit } from '@angular/core';
import { Chart } from 'chart.js';

@Component({
    selector: 'home',
    templateUrl: './home.component.html'
})

export class HomeComponent implements OnInit {

    @ViewChild('chart1') chart1: ElementRef;

    constructor(
    ) { }

    ngOnInit() {

        let chart1Ctx = this.chart1.nativeElement.getContext('2d');

        var myChart = new Chart(chart1Ctx, {
            type: 'line',
            data: {
                labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
                datasets: [{
                    label: 'apples',
                    data: [12, 19, 3, 17, 6, 3, 7],
                    backgroundColor: "rgba(153,255,51,0.4)"
                }, {
                    label: 'oranges',
                    data: [2, 29, 5, 5, 2, 3, 10],
                    backgroundColor: "rgba(255,153,0,0.4)"
                }]
            }
        });        
    }
}

当我尝试运行组件时，我得到了

异常：调用节点模块失败，错误：错误：未捕获（在 promise）：TypeError：this.chart1.nativeElement.getContext不是功能

从我可以看到它无法引用chart.js函数...不确定我需要引用js文件的位置，而不是我尝试过的。

package.json有一个条目

  "dependencies": {
    ...,
    "chart.js": "^2.6.0",

我在webpack.config.vendor.js

中添加了一个条目

entry: {
            vendor: [
                ...
                'chart.js',

最后，我尝试添加对

的引用

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>

在索引页面上。

无法使用chart.js与Angular2一起工作

0 个答案: