html根据坐标动态生成图形

假如后台给我的数据把每列的设备的位置用坐标传给我了，有什么办法可以动态生成这样的图形。

用iframe,准备好小图片，跟图数据循环的拼成整张图，根据位置状态，改变颜色或者准备两个其他颜色图形。

不就是个absolute定位的问题，自己依据坐标计算好对应的格子位置就行了

    $('p').append("<img src=''>")
                $("p>img:eq("+j+")").css({"top":y+'px',"left":x+'px',"width":circle,'height':circle,'border-radius':circle})
            //  把X和Y改成鼠标坐标，如果不想乱生成，就限制一个判定范围，参考下棋时选定棋子的范围，和棋子的生成坐标
            //CSS中吧img设置为绝对定位

$("").click(function(e){
 $('').append("<img src=''>")
                $("p>img:eq("+j+")").css({"top":e.pageY+'px',"left":e.pageX+'px'})
})

        如果不想乱生成，就限制一个判定范围，参考下棋时选定棋子的范围，和棋子的生成坐标
       CSS中img设置为绝对定位       

 $().click(function(e){
$().append("<img src=''>")
                    $("p>img:eq("+j+")").css({
                    "top":e.pageY+'px',
                    "left":e.pageX+'px'
                    })                  
})

img要绝对定位， 如果不想乱生成，就限制一个判定范围，参考下棋时选定棋子的范围，和棋子的生成坐标