本文实例讲述了Java脚本语言实现的数字正射影像图绘制柱状图效果。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；字符集=utf-8 '/titlewww.jb51.net绘制柱状图/title style # chart-wrap { width :910 px；高度：240 pxborder:solid 1px # B3B3DC位置：相对；top :40 pxleft 336020 px }/style/head body div id=' chart-wrap '/div脚本函数renderChart(数据){ var CW=文档。getelementbyid(' chart-wrap ')；CW . InnerHTML=var max=0；for(var index in data){ if(data[index]max)max=data[index]；} var百分比=180 /最大值；var I=0；用于(数据中的定义变量索引){ var bar=document。创建元素(' div ')；酒吧。id=index ' _ ' data[index]；bar.style.height=Math.round(百分比*数据[索引])" px "；酒吧。风格。宽度=' 40px酒吧。风格。左=(I * 40)165 ' px '；酒吧。风格。左边距=(I * 20)“px”；bar.style.position='绝对；bar.style.background="无重复滚动0 0粉红色";酒吧。风格。溢出='隐藏'；bar.setAttribute('title '，index ':' data[index])；酒吧。风格。display=' blockbar.style.top=200 - Math.round(百分比*数据[索引])" px "；CW。append child(bar)；var axis=文档。创建元素(' div ')；轴。id=' axis _ I轴。风格。宽度=' 40px轴。风格。左=(I * 40)165 ' px '；轴。风格。左边距=(I * 20)' px '；轴。风格。textalign=“居中”；axis.style.position='绝对；轴。风格。top=' 205 px轴。innerHTMl=' span style=' font-size :12 px；颜色：灰色；“我”/span；cw.appendChild(轴);我；} for(var I=0；i5；I){ var ayis=document。创建元素(' div ')；艾伊斯。风格。宽度=' 30px艾伊斯。风格。位置='绝对'；艾伊斯。风格。top=(36 * I)(20-6)‘px’；艾伊斯。风格。左侧=' 140 px艾伊斯。innerHTMl=' span style=' font-size :12 px；颜色：灰色；“数学。圆形(最大值-(最大值/5)* I "/span；CW。append child(ayis)；var line=文档。创建元素(' div ')；line.setAttribute('style '，' width :580 pxleft :165 pxborder-top :1 px点灰色；高度：1px线高：1 px显示：块；飞越：隐藏；position : absolute’)；排队。风格。top=(36 * I)20 ' px '；cw.appendChild(第行);} } var数据=[10,60,50,30,40,80,20,70,100,90];renderChart(数据);/脚本/正文/html运行效果如下：

更多关于Java脚本语言相关内容感兴趣的读者可查看本站专题： 《JavaScript操作DOM技巧总结》 、 《JavaScript错误与调试技巧总结》 、 《JavaScript数据结构与算法技巧总结》 、 《JavaScript遍历算法与技巧总结》 及《JavaScript数学运算用法总结》

希望本文所述对大家Java脚本语言程序设计有所帮助。