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

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

• 要绘制具有渐变半透明度的圆圈，请使用径向渐变。
• 要定位它们，请使用position: absoluteand 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 也可以实现相同的目标，但这是一个较长的故事。