javascript实现动态统计图开发实例

本文实例讲述了爪哇岛描述语言实现动态统计图的代码。分享给大家供大家参考。具体如下：运行效果截图如下：

具体代码如下超文本标记语言代码：

div id=' content ' div class=' legend ' h1汽车销量：/h1 div="技能" ul Li="jq "大众/li li class='css '丰田/li li class='html '别克/li li class='php '福特/li li class='sql '长安/Li/ul/div/div id=' diagram '/div/div class=' get ' div class=' arc ' span class=' text '大众/span输入类型=“隐藏”类=“百分比”值=“95 ”/输入类型='隐藏'类='颜色'值=' # 97BE0D '/div class=' arc ' span class=' text '丰田/span输入类型=“隐藏”类=“百分比”值=“90 ”/输入类型=' hidden ' class=' color ' value=' # D84F5F '/div class=' arc ' span class=' text '别克/span输入类型=“隐藏”类=“百分比”值=“80 ”/输入类型='隐藏'类='颜色'值=' # 88b8e 6 '/div class=' arc ' span class=' text '福特/span输入类型="隐藏"类="百分比"值="53 "/输入类型=' hidden ' class=' color ' value=' # bed be 9 '/div div class=' arc ' span class=' text '长安/span输入类型=“隐藏”类=“百分比”值=“45 ”/输入类型=' hidden ' class=' color ' value=' # EDEBEE '/div/div CSS代码：

#内容{位置：绝对；前：50%；左侧：50%;余量：-340像素0-450像素；宽度宽度：900像素高度：600 px}.图例{ float:left宽度宽度：250 pxmargin-顶部：140 px} #内容h1 { font-family : ' carbon Sketch '，arial，serifetxt-shadow :3 px 3px 0 # DDD；color : # 193340 font-size :40 px；边距-底部：40 px向右文本对齐：}.技能{ float:leftclear:both宽度：100%;}.技能ul .技能Li { display : block list-style : none；余量：0划水：0;}.技能Li { float : right clear : both padding :0 15 pxh8 :35 px线高：35 pxcolor: # fff边距-底部：1 pxfont-size :18 px}js代码：

var o={ init : function(){ this。图表()；}，random:函数(l，u){返回数学。floor((数学。random()*(u-l(1))l)；}，diagram : function(){ var r=Raphael(' diagram '，600，600)，rad=73r.circle(300，300，85).attr({ stroke: 'none '，fill : ' # 193340 ' })；var title=r.text(300，300，'正在加载.').attr({ font: '20px Arial '，fill: '#fff' }).toFront()；自定义属性。arc=函数(值、颜色、rad) { var v=3.6 *值，alpha=v==360？359.99 : v，random=o.random(91，240)，a=(random - alpha) * Math .PI/180，b=随机*数学/180，sx=300 rad * Math.cos(b)，sy=300 - rad * Math.sin(b)，x=300 rad * Math.cos(a)，y=300 - rad * Math.sin(a)，path=[['M '，sx，sy]，['A '，rad，rad，0，(alpha 180)，1，x，y]]；返回{ path: path，stroke: color } } $(' .get ').查找('。弧')。每个（函数(i) { var t=$(this)，color=t.find '。颜色')。val()，value=t.find ' ' .百分比')。val()，text=t.find ' .文本')。text()；rad=30var z=r.path().attr({ arc :[值，颜色，rad]，'笔画宽度' : 26 });将鼠标放在(function(){ this。动画({ '笔画宽度： 50，opacity:75 }，1000，‘弹性’)；如果（拉斐尔。打字！=' VML ')//解决工业管理学(Industrial Engineering)问题这个。to front()；标题。animate({ opa city 3360 0 }，500 ' '，function(){ this。attr({ text : text ' \ n ' value ' % ' }).动画({ opa city 3360 1 }，500 ' ')；});}).鼠标移出(函数(){ this。动画({ '笔画宽度： 26，opacity: 1 }，1000，‘elastic’)；});});} } $(function(){ o . init()；});希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。