js vml 饼图柱状图曲线图文档格式.docx

资源描述

js vml 饼图柱状图曲线图文档格式.docx

《js vml 饼图柱状图曲线图文档格式.docx》由会员分享，可在线阅读，更多相关《js vml 饼图柱状图曲线图文档格式.docx（29页珍藏版）》请在冰点文库上搜索。

js vml 饼图柱状图曲线图文档格式.docx

提示5'

histogram_Array[5]=[300,'

提示6'

varhistogram_Array2=[];

histogram_Array2[0]=[421,'

提示A'

B.html'

histogram_Array2[1]=[951,'

提示B'

histogram_Array2[2]=[138,'

提示C'

histogram_Array2[3]=[370,'

提示D'

histogram_Array2[4]=[726,'

提示E'

histogram_Array2[5]=[479,'

提示F'

//参数含义（数据源数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题，X轴单位，Y轴单位,"

放入的div的ID"

）

document.getElementById（"

）.innerHTML=drawHistogram（histogram_Array,240,100,700,400,"

柱状统计图"

元"

）.innerHTML=drawHistogram（histogram_Array2,240,550,700,400,"

//画饼图

//第一行为横坐标刻度，注意第一个为空。

//下面的行的第一列为项目名，后面为数据。

varpie_Array=[];

pie_Array[0]=[123,'

pie_Array[1]=[432,'

pie_Array[2]=[134,'

pie_Array[3]=[234,'

pie_Array[4]=[564,'

pie_Array[5]=[784,'

varpie_Array2=[];

pie_Array2[0]=[789,'

pie_Array2[1]=[897,'

pie_Array2[2]=[789,'

pie_Array2[3]=[754,'

pie_Array2[4]=[345,'

pie_Array2[5]=[141,'

//参数含义（数据源数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题,单位,"

）.innerHTML=drawPie（pie_Array,240,1000,700,400,"

三维饼状图"

）.innerHTML=drawPie（pie_Array2,240,1450,700,400,"

//画折线图

vardata_Array=[];

data_Array[0]=["

1月"

2月"

3月"

4月"

5月"

6月"

7月"

8月"

9月"

10月"

11月"

12月"

data_Array[1]=["

项目1"

200"

158"

982"

369"

100"

595"

895"

652"

25"

245"

951"

data_Array[2]=["

项目2"

984"

58"

495"

36"

486"

952"

258"

653"

415"

485"

14"

data_Array[3]=["

项目3"

850"

988"

958"

145"

745"

265"

856"

425"

352"

data_Array[4]=["

项目4"

600"

525"

235"

365"

35"

148"

658"

475"

data_Array[5]=["

项目5"

62"

635"

215"

465"

305"

66"

547"

54"

data_Array[6]=["

项目6"

560"

625"

645"

329"

665"

358"

95"

120"

42"

253"

data_Array[7]=["

项目7"

950"

725"

435"

865"

458"

955"

152"

845"

421"

data_Array[8]=["

项目8"

825"

155"

455"

558"

853"

122"

data_Array[9]=["

项目9"

360"

925"

545"

400"

541"

125"

data_Array[10]=["

项目10"

50"

225"

355"

655"

858"

758"

584"

214"

651"

//参数含义（数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题，X轴单位，Y轴单位,"

）.innerHTML=drawLine（data_Array,240,1900,700,350,"

曲线统计图"

时间"

）;

）.innerHTML=drawLine（data_Array,240,2300,700,350,"

/body>

/html>

----------------------------------------js文件-----------------------------------------

functiondrawHistogram（data_Array,table_left,table_top,all_width,all_height,table_title,x_unit,y_unit,uniqueId）

{

//颜色列表：

预设10个。

varcolors=["

#F08080"

#F0FFF0"

#CDAD00"

#fc0"

#3cc"

#ff19ff"

#993300"

#f60"

//数据个数

varnum=data_Array.length;

//图形宽度

varitem_width=parseInt（20000/num+0.5）;

//起始坐标

varbegin_x=parseInt（（（item_width-1200）/2）+2200）;

//算比例高度

//取所有值的最大值

varvalue_max=0;

for（i=0;

num;

i++）

{

if（value_max<

data_Array[i][0]）

value_max=data_Array[i][0]

}

value_max=parseInt（value_max）;

value_max_str=value_max+"

;

if（value_max>

9）

temp=value_max_str.substring（2,1）;

if（temp>

4）

temp2=（parseInt（value_max/Math.pow（10,value_max_str.length-1））+1）*Math.pow（10,value_max_str.length-1）

else

temp2=（parseInt（value_max/Math.pow（10,value_max_str.length-1））+0.5）*Math.pow（10,value_max_str.length-1）

elseif（value_max>

temp2=10;

temp2=5;

//横坐标有五条线，折算成每条线的高度。

item_height=temp2/5;

//开始作图

varresult="

//大背景

result+="

shapetypeid='

+uniqueId+"

Box'

coordsize='

21600,21600'

spt='

16'

adj='

5400'

/v:

shapetype>

rectid='

background'

style='

position:

absolute;

left:

+table_left+"

px;

top:

+table_top+"

WIDTH:

+all_width+"

HEIGHT:

+all_height+"

fillcolor='

#E1EDF5'

strokecolor='

gray'

rect>

groupID='

table'

coordsize='

23500,12700'

;

Rectstyle='

relative;

1500;

200;

width:

20000;

height:

800'

filled='

false'

stroked='

TextBoxinset='

0pt,0pt,0pt,0pt'

//标题

tablewidth='

100%'

border='

align='

center'

cellspacing='

tr>

tdalign='

valign='

middle'

divstyle='

font-size:

12pt;

font-family:

黑体;

+table_title+"

/B>

/td>

/tr>

/table>

TextBox>

Rect>

//背景与箭头

back'

1700;

1200;

20500;

height:

10500;

#DFDFDF'

fillrotate='

angle='

-45'

focus='

type='

gradient'

lineID='

from='

1700,11700'

to='

22700,11700'

z-index:

#000000'

strokeWeight=1pt>

strokeEndArrow='

Classic'

line>

1700,900'

strokeStartArrow='

//X轴与Y轴的单位

100;

700;

600'

filled='

9pt;

divalign='

right'

+y_unit+"

22200;

11900;

2000;

left'

+x_unit+"

//画五条横坐标

=4;

linefrom='

1200,"

+（i*2000+1700）+"

1700,"

2200,"

+（i*2000+1200）+"

#0099FF'

22200,"

+（i*2000+2200）+"

strokedashstyle='

Dot'

+（i*2000+1250）+"

+item_height*（5-i）+"

//画三条让图形变得立体的线

2200,11200'

22200,11200'

2200,1200'

//画柱子了

this_hight=parseInt（data_Array[i][0]/（5*item_height）*10000+420）;

shapeid='

Box"

+i+"

+colors[i]+"

#5f5f5f'

left:

+（i*item_width+begin_x）+"

+parseInt（10000-this_hight+1620）+"

+this_hight+"

10'

title='

+data_Array[i][2]+"

fillo:

opacity2='

52429f'

rotate='

shape>

+（i*item_width+2200）+"

+parseInt（10000-this_hight+1000）+"

+item_width+"

1000'

6pt;

+data_Array[i][0]+"

11850;

ahref='

+data_Array[i][3]+"

+data_Array[i][1]+"

/a>

group>

returnresult;

}

//画饼图

//参数含义（数据源数组，横坐标，纵坐标，图表的宽度，图表的高度,图表标题,单位,维一性ID）

//数据源数组结构：

数值，标题

functiondrawPie（data_Array,table_Left,table_Top,all_Width,all_Height,table_Title,unit,uniqueId）

//预设十种颜色

#ff1919"

#ffff19"

#1919ff"

#19ff19"

#ff8c19"

//饼数组

varpie=[];

//数据值总数

varallValue=0;

展开阅读全文

js vml 饼图柱状图 曲线图文档格式.docx

js vml 饼图柱状图曲线图文档格式.docx