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

Question

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

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

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

我怎样才能使孩子们的画布也能响应呢？

heatmap.js 配置 JSON如下：

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

可变this.image是，它是动态给出的宽度和高度属性一个HTMLDivElement的参考。

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

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

Answer 1

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