将 cal-heatmap 与 Angular2 + 集成

Question

我正在尝试将 cal-heatmap 集成到我的 Angular 9 项目中，此 JS 库的官方文档在：cal-heatmap official

我通过 npm i cal-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

安装 npm 后，您需要执行以下操作：

在index.html
像下面顶部的那样导入 calheatmap component.ts。它将像下面这样。

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
    });
  }
}

html 文件如下所示

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

更多详情请关注link:

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

Answer 2

最后我发现主要问题是导入 CalHeatMap 模块时；（感谢@Nirmalya Roy 指南）

对于导入模块，它必须像：

import CalHeatMap from 'cal-heatmap'

而不是像这样导入：

import {CalHeatMap} from ‘cal-heatmap’

所以主要问题是大括号“{}”（必须省略）

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

即将关闭

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,
    });
}

将 cal-heatmap 与 Angular2 + 集成

Intergrating cal-heatmap with Angular2 +

javascript

cal-heatmap

angular