本文介绍了使用数据点创建“热图像”的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在寻找一种方法将一些数据点表示为热图(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
andleft: 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.
这篇关于使用数据点创建“热图像”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!