做完了一系列的准备工作,那么现在应该开始真正介绍如何绘制Pie了吧。首先看看下面的一个示意图,清楚地描述了VMLPie的元素结构。
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
为了更加清楚的显示构成VML的文本结构,我使用XML的格式给出了如下的方式。
<v:group>
<!--
设置饼图的背景及其标题
-->
<v:rect>
<v:textbox>VML
饼图
</v:textbox>
</v:rect>
<!--
设置饼图的各个块
-->
<v:shape path="...">
</v:shape>
<!--
图例元素集合
-->
<v:group>
<!--
设置图例的颜色
-->
<v:rect fillcolor="green"></v:rect>
<v:rect>
<!--
设置图例文字
-->
<v:textbox>
重庆
(50)
</v:textbox>
</v:rect>
</v:group>
</v:group>
完成了制图的基本思路之后,剩下的就是通过DOM逐步完成建立过程了,为了简单起见,我们安装函数的功能进行逐步分析。
1. VMLPie
this
.
Container
=
pContainer
;
this
.
Width
=
pWidth
||
"400px"
;
this
.
Height
=
pHeight
||
"250px"
;
this
.
Caption
=
pCaption
||
"VML Chart"
;
this
.
backgroundColor
=
""
;
this
.
Shadow
=
false
;
this
.
BorderWidth
=
0
;
this
.
BorderColor
=
null
;
this
.
all
=
new
Array(
);
this
.
id
=
document.uniqueID
;
this
.
RandColor
=
function
(
){
return
"rgb("
+
parseInt
(
Math.random
() *
255
) +
","
+
parseInt
(
Math.random
() *
255
) +
","
+
parseInt
(
Math.random
() *
255
)+
")"
;
}
this
.
VMLObject
=
null
;
this
.
LegendObject
=
null
;
这个函数只是简单的初始化了一些变量,将class可以使用的一些属性在这里做了声明。RandColor函数提供了生成随机颜色的作用,这个也就是我在前文提到的,对于饼图的各个块的颜色,我都采用随机颜色,这样带来的一个问题就是会出现有些时候两个颜色比较接近,如果随能够给我提供几个基础的颜色列表,我将感激不尽。
2. VMLPie.prototype.AddData
添加图表数据,在这里我采用了prototype滞后加载的方式实现,如果读者认为这样不够清晰,可以修改成this.RandColor那样的内置形式。
实现代码如下:
VMLPie
.
prototype
.
AddData
=
function
(
sName
,
sValue
,
sTooltipText
){
var
oData
=
new
Object();
oData.Name
=
sName
;
oData.Value
=
sValue
;
oData.TooltipText
=
sTooltipText
;
var
iCount
=
this
.
all.length
;
this
.
all
[
iCount
]=
oData
;
}
这里使用一个Object来存储每一个数据项,然后放到this.all这个数组中。
3. VMLPie.prototype.Draw
整个类实现最关键的函数,也就是在这个函数和后续的CreatePie函数中,一步一步地实现了图形的绘制工作。
//
画外框
var
o=
document.createElement
(
"v:group"
);
o.id
=
this
.id
;
o.
style.width
=
this
.Width
;
o.
style.height
=
this
.Height
;
o.coordsize
=
"21600,21600"
;
//
添加一个背景层
var
vRect
=
document.createElement
(
"v:rect"
);
vRect.
style.width
=
"21600px"
vRect.
style.height
=
"21600px"
o.appendChild
(
vRect
);
//
添加标题
var
vCaption
=
document.createElement
(
"v:textbox"
);
vCaption.
style.fontSize
=
"24px"
;
vCaption.
style.height
=
"24px"
vCaption.preSize
=
"24"
;
vCaption.
style.fontWeight
=
"bold"
;
vCaption.innerHTML
=
this
.Caption
;
vCaption.
style.textAlign
=
"center"
;
vRect.appendChild
(
vCaption
);
//
设置边框大小
if
(
this
.BorderWidth
){
vRect.strokeweight=
this
.BorderWidth
;
}
//
设置边框颜色
if
(
this
.BorderColor
){
vRect.strokecolor=
this
.BorderColor
;
}
//
设置背景颜色
if
(
this
.backgroundColor
){
vRect.fillcolor=
this
.backgroundColor
;
}
//
设置是否出现阴影
if
(
this
.Shadow
){
var
vShadow
=
document.createElement
(
"v:shadow"
);
vShadow.on=
"t"
;
vShadow.type=
"single"
;
vShadow.color=
"graytext"
;
vShadow.offset=
"4px,4px"
;
vRect.appendChild(vShadow);
}
this
.VMLObject
=o;
完成上述工作之后,已经构建出了一个canvas(画布),完成了图形外框及其标题的制作,剩下的也就是最最重要的工作调用CreatePie来画出各个块,并且作出图例。