Angular2和simpleheat插件

Question

我正在尝试使用我的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>

任何人都可以帮我解决那里的错误吗？

谢谢

Answer 1

您的代码中存在一些错误;

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

完成上述所有操作后，将显示堆映射。