调整大小事件处理程序上的自适应heatmap.js

Question

首先，我正在使用ReactJS和heatmap.js库。

用作heatmap.js入口点的HTMLDivElement应该具有响应性。每次调整窗口大小时，它都会根据当前窗口大小进行调整。

但是，heatmap.js库对象创建的画布采用div的初始尺寸，因此其大小保持不变。

如何使子级画布也具有响应性？

heatmap.js config JSON如下：

this.heatmap = Heatmap.create({
  container: this.image
});

变量this.image是对 HTMLDivElement 的引用，该变量会动态地获得width和height属性。

<div  style={{ width: `${width}px`, height:`${height}px`}} />

*如果您不熟悉JSX语法，可以将其转换为纯HTML / CSS / JS。

Answer 1

一种解决方案是将画布设置为高度和宽度的100％，但包含在响应式<div>中。