用Javaｓｃｒｉｐｔ开发动态统计图的一个实例

本文描述了Javaｓｃｒｉｐｔ实现动态统计的代码：

运行效果的截图如下：
具体代码如下

HTML代码：

汽车销售：
公共
丰田
别克
福特
长安

公共

丰田

别克

福特

长安

CSS代码：

{ #内容
位置：绝对；
顶部：50%；
左：50%；
保证金：- 00 - 450px 340px；
宽度：900px；
身高：600px；
}
{。传说
浮点数：左；
宽度：250px；
边距：140px；
}
#内容h1 {
字体家庭：'cabin素描，Arial，衬线；
文字阴影：3px 3px 0 # DDD；
颜色：# 193340；
字体大小：40px；
边距：40px；
文本对齐：正确；
}
{。技能
浮点数：左；
清楚：两者；
宽度：100%；
}
技能，UL，
技能{李{
显示块；
列表样式：无；
保证金：0；
填充：0；
}
技能{李{
浮子：右边；
清楚：两者；
填充物：0 15px；
身高：35px；
行高：35px；
颜色：# FFF；
边距：1px；
字体大小：18px；
}
JS代码：

var { { { {
init：函数（）{
This.diagram（）；
}，
随机函数（l，u）{
返回Math.floor（（Math.random（）*（U L + 1））+ L）；
}，
图：函数（）{
VAR r =拉斐尔（'diagram '，600, 600），
拉德= 73；
r.circle（300, 300, 85）。Attr（{中风：不关的，填写：# 193340 }）；
var title= r.text（300, 300，'loading…Attr（{）。
字体：Arial'20px，
补：# FFF
ToFront（）}）；
r.customattributes.arc =功能（价值，颜色，RAD）{
var = 3.6 *值，
α＝v＝360359.99：v，
随机= o.random（91, 240），
=（随机α）×math.pi / 180，
B =随机math.pi / 180，
SX = 300 +拉德* Math.cos（B），
SY = 300 RAD * math.sin（B），
x = 300 +拉德* Math.cos（一），
Y = 300 RAD * math.sin（一），
路径= { {是}，SX，SY，{'a'，弧度，弧度，0 +（α＞180），1，X，Y } }；
返回路径：路径，笔画：颜色}
}
$（获取）。查找（ARC）。每个（函数（i）{）
var = $（$），
颜色= t.find（'。颜色）瓦迩（），
价值= t.find（%'）瓦迩（），
文本= t.find（'。文本）文本（）；
拉德= 30；
VaR z = r.path（）。Attr（{弧：{值、颜色、RAD }，'stroke-width：26 }））；
Z.mouseover（function（）{（）
this.animate（{ 'stroke-width：50，不透明度：75 }，1000，'elastic）；
如果（Raphael.type！= 'vml '） / /解决IE的问题
This.toFront（）；
title.animate（{不透明度：0 }，{（500功能），>。
This.attr（{文本：文本+ +值%}（动画）{不透明：1 }，500，<；
}）；
}）。Mouseout（function（）{）
this.animate（{ 'stroke-width：26，不透明度：1 }，1000，'elastic）；
}）；
}）；
}
}
（function（）{ o.init美元（）；}）；
希望本文能帮助您学习Javaｓｃｒｉｐｔ程序设计。