使用数据点创建“热图像”

Question

我正在寻找一种将一些数据点表示为“热图”(500x500) 的方法。

数据数组：

"data": [
    {
       "x": 120,
       "y": 350,
       "temperature": 90
    },
    {
       "x": 300,
       "y": 210,
       "temperature": 35
    },
    {
       "x": 450,
       "y": 50,
       "temperature": 68
    },
]

这个数组应该使用 CSS 和 Javascript 处理成这样的东西：（非常粗略）

使用 Javascript 和 CSS 解决此问题的最佳方法是什么？

Answer 1

• 要绘制具有渐变半透明效果的圆圈，请使用radial gradients。
• 要定位它们，请使用position: absolute 和left: x、top: y（确保省略半径）。

了解这两个 CSS 特性后，您只需遍历 JSON，创建 DOM 元素（div 即可）并修改它们的 style 属性。

示意图：

data.forEach(function (point) {
    var div = document.createElement('div');
    div.style.background = generateGradient(point.temperature);
    div.style.left = point.x - radius;
    div.style.top = point.y - radius;
    container.appendChild(div);
});

Canvas 和 SVG 也可以实现相同的目标，但这是一个更长的故事。