javascript - Angular2和simpleheat插件

我正在尝试使用我的angular2应用程序来工作此NPM插件（http://mourner.github.io/simpleheat/）。它仍然不起作用，但是我认为一切都正确，但是热图未渲染。

我有问题的完整存储库位于：https://github.com/b4rtt/nebula

heatmap.component.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { simpleheat } from 'simpleheat';

@Component({
  selector: 'app-heatmap',
  templateUrl: './heatmap.component.html',
  styleUrls: ['./heatmap.component.css']
})
export class HeatmapComponent implements OnInit {
  @ViewChild("myCanvas") myCanvas: ElementRef;
  context: CanvasRenderingContext2D;

  constructor() {
  }

  ngOnInit() {
  }

  ngAfterViewInit() {

    let canvas = this.myCanvas.nativeElement;
    var data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];

    this.context = canvas.getContext("2d");

    var ctx = this.context;

    //test draw
    ctx.clearRect(0, 0, 400, 400);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 20, 20);


    //doesn't work ?? Why?
    var heat = simpleheat(ctx);
    heat.data(data);
    heat.draw(100);
  }
}

heatmap.component.html

<canvas #myCanvas id="canvas" width="500" height="500"></canvas>

任何人都可以帮助我，那里出了什么问题？

谢谢

最佳答案

您的代码中有几个错误；


您无法导入没有类型定义的库，因此您需要做的是将库添加到.angular-cli.json文件中，并在组件内部（或全局）声明变量。
您正在使用ngAfterViewInit，但未实现
Simpleheat需要canvas元素的id或对其的引用
默认路由未解析为任何内容，显示空白页


修复所有上述问题后，将显示堆映射。