使用数据点创建“热图像” [英] Creating a 'thermal image' using data points

问题描述

我正在寻找一种方法将一些数据点表示为热图（500x500）。

I am looking for a way to represent some data points into a 'thermal map' (500x500).

数据数组：

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

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

This array should be processed into something like this using CSS and Javascript: (Very roughly)

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

推荐答案

• 要绘制具有渐变半透明度的圆圈，请使用径向渐变。


• 要定位它们，请使用 position：absolute 和 left：x ， top：y （确保省略半径）。


• To draw circles with gradient translucency, use radial gradients.
• To position them, use position: absolute and left: x, top: y (make sure to omit the radius).

知道这两个CSS功能，你可以迭代JSON，创建DOM元素（ div 会做）并修改它们的风格属性。

Knowing these two CSS features, you can just iterate over the JSON, creating DOM–elements (div will do) and modifying their style property.

示意性地：

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可以实现同样的目标，但这是一个更长的故事。

The same is achievable with Canvas and SVG, but that's a longer story.

这篇关于使用数据点创建“热图像”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！