将 cal-heatmap 与 Angular 2 + 集成答案

【问题标题】：Intergrating cal-heatmap with Angular2 +将 cal-heatmap 与 Angular 2 + 集成
【发布时间】：2021-05-26 20:24:39
【问题描述】：

我正在尝试将 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
        });
    }

我收到了这个错误：

【问题讨论】：

看到这个网址，他们解决了类似的问题：github.com/wa0x6e/cal-heatmap/issues/207

标签： javascript angular cal-heatmap

【解决方案1】：

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

在 index.html 中导入 css cdn
在顶部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
    });
  }
}

html 文件如下所示

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

【讨论】：

感谢您的回复，我进行了这些更改，但我看不到像以前一样出现的日历！（也许这与将 css 导入 index.html（为什么是 index.html）有关）即：当我检查时，我可以看到添加的 div，但它仍然是空的。 @Nirmalya 罗伊
Index HTML CSS 用于 cal heatmap 的 css.. 因为 angular 只有一个 HTML 文件。对你来说，它没有加载可能是因为 data.json 文件..请在资产文件夹中添加 data.json 文件..并把它当作.. './assets/data.json' 或给我 data.json 以便我可以调试
感谢再次回复！，我使用了您在回复中使用的代码（因此没有 data.json ）我使用了：ngOnInit() { let cal = new CalHeatMap(); cal.init({ itemSelector: "#cal-heatmap", domain: "day", range: 1, displayLegend: false }); @Nirmalya
你是否在component.html中添加了-->
？或者你在 index.html 中添加的.. div 应该添加到组件的相应 HTML 文件中
是的，但我有一个控制台错误：modules-datasets-datasets-module-ngfactory.js:52709 错误类型错误：cal_heatmap__WEBPACK_IMPORTED_MODULE_8__.CalHeatMap 不是 MapviewComponent.ngOnInit 的构造函数（模块-数据集-数据集-模块-ngfactory.js:59786）@Nirmal

【解决方案2】：

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

对于导入模块，它必须是这样的：

import CalHeatMap from 'cal-heatmap'

而不是像这样导入：

import {CalHeatMap} from ‘cal-heatmap’

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

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

关闭

【讨论】：

【解决方案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,
    });
}

【讨论】：