Angular2 +与热图的集成

Question

我正试图将cal-heatmap集成到我的角9项目中，这个JS库的当然文档是on：热图官。

我通过：npm heatmap进行了安装，但是在我的项目中没有任何模块可以导入。

在我的主component.html中，我安装了如下代码：(但结果没有得到任何日历)

请任何一个人帮助我集成最初的日历-热图为项目和感谢！

​

<div id="cal-heatmap">
<script type="text/javascript">
    let cal = new CalHeatMap();
    cal.init({
        data: "data/datas.json",
        domain: "day",                 
        subDomain: "hour",             
        range: 10,                     
        browsing: true,
        cellSize: 15
    });
</script>
</div>

​

当我在ngOnInit(){ ..}类似于：

​

ngOnInit() {
        let cal = new CalHeatMap();
        cal.init({
            itemSelector: "#calheatmap",
            domain: "month",
            subDomain: "day",
            cellSize: 20,
            subDomainTextFormat: "%d",
            range: 1,
            displayLegend: false
        });
    }

​

我发现了一个错误：

​

​

Answer 1

最后，我发现主要问题是何时导入CalHeatMap模块；(感谢@Nirmalya指南)

对于导入模块，应该如下所示：

import CalHeatMap from 'cal-heatmap'

而不是像：

import {CalHeatMap} from ‘cal-heatmap’

因此，主要的问题是花括号‘{}’(它们必须是完整的)

其他提示:对于任何使用CalHeatmap v3.x.x的人，d3库应该有3.5.17版本

将关闭

Answer 2

安装npm后，您需要做以下工作：

1. 在index.html中导入css
2. 导入component.ts顶部的calheatmap，如下面所示。下面会是这样的。

import { Component, OnInit, VERSION } from "@angular/core";
import CalHeatMap from "cal-heatmap";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;
  ngOnInit() {
    let cal = new CalHeatMap();
    cal.init({
      itemSelector: "#cal-heatmap",
      domain: "day",
      range: 1,
      displayLegend: false
    });
  }
}

1. html文件如下所示

<div id="cal-heatmap"></div>

欲知更多详情，请按以下连结查询：

https://angular-ivy-tmknxh.stackblitz.io

Answer 3

我花了半天多时间解决这个问题。什么都没用。我密切关注着https://stackblitz.com/edit/angular-ivy-tmknxh

最后，我设法解决了以下问题：

"cal-heatmap": "^3.6.2",
"d3": "5.16.0"

和

import * as CalHeatMap from 'cal-heatmap';

...

ngOnInit() {
    const cal = new CalHeatMap();
    cal.init({
        itemSelector: '#cal-heatmap',
        domain: 'day',
        range: 1,
        displayLegend: false,
    });
}