<script language=javascript>
function table3(total,table_x,table_y,all_width,all_height,table_type)
{
//参数含义(传递的数组,横坐标,纵坐标,图表的宽度,图表的高度,图表的类型)
//纯ASP代码生成图表函数3——饼图
//作者:龚鸣(Passwordgm) QQ:25968152 MSN:passwordgm@sina.com Email:passwordgm@sina.com
//本人非常愿意和ASP,VML,FLASH的爱好者在HTTP://topclouds.126.com进行交流和探讨
//版本1.0 最后修改日期 2003-8-11
//非常感谢您使用这个函数,请您使用和转载时保留版权信息,这是对作者工作的最好的尊重。
//***************************************************************************************
//修改说明:
// 本代码经原作者同意,由 awaysrain(绝对零度)修改为javascript。
// 最后修改日期 2003-9-22,测试环境为IE 6.0.2500.1106
// 因本人水平有限,修改中难免有错误,请大家及时指正。
//***************************************************************************************
var tmdColor1 = new Array();
tmdColor1[0] = "#d1ffd1";
tmdColor1[1] = "#ffbbbb";
tmdColor1[2] = "#ffe3bb";
tmdColor1[3] = "#cff4f3";
tmdColor1[4] = "#d9d9e5";
tmdColor1[5] = "#ffc7ab";
tmdColor1[6] = "#ecffb7";
var tmdColor2 = new Array();
tmdColor2[0] = "#00ff00";
tmdColor2[1] = "#ff0000";
tmdColor2[2] = "#ff9900";
tmdColor2[3] = "#33cccc";
tmdColor2[4] = "#666699";
tmdColor2[5] = "#993300";
tmdColor2[6] = "#99cc00";
var tb_color = new Array(tmdColor1,tmdColor2);
var tb_height = 30;
var total_no = total[0].length;
var totalpie = 0;
for(var i=0;i<total_no;i++)
{
totalpie += total[1][i];
}
var PreAngle = 0;
for(var i=0;i<total_no;i++)
{
document.write("<v:shape id='_x0000_s1025' alt='' style='position:absolute;left:" + table_x + "px;top:" + table_y + "px;width:" + all_width + "px;height:" + all_height + "px;z-index:1' coordsize='1500,1400' o:spt='100' adj='0,,0' path='m750,700ae750,700,750,700," + parseInt(23592960*PreAngle) + "," + parseInt(23592960*total[1][i]/totalpie) + "xe' fillcolor='" + tb_color[0][i] + "' strokecolor='#FFFFFF'><v:fill color2='" + tb_color[1][i] + "' rotate='t' focus='100%' type='gradient'/><v:stroke joinstyle='round'/><v:formulas/><v:path o:connecttype='segments'/></v:shape>");
PreAngle += total[1][i] / totalpie;
}
if(table_type=="A")
{
document.write("<v:rect id='_x0000_s1025' style='position:absolute;left:" + (table_x + all_width + 20) + "px;top:" + (table_y + 20) + "px;width:100px;height:" + (total_no * tb_height + 20) + "px;z-index:1'/>");
for(var i=0;i<total_no;i++)
{
document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x + all_width + 25) + "px;top:" + (table_y+30+(i)*tb_height) + "px;width:60px;height:" + tb_height + "px;z-index:1'>");
document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + total[0][i] + "</td></tr></table></v:textbox></v:shape>");
document.write("<v:rect id='_x0000_s1040' alt='' style='position:absolute;left:" + (table_x + all_width + 80) + "px;top:" + (table_y + 30 + (i)*tb_height+3) + "px;width:30px;height:20px;z-index:1' fillcolor='" + tb_color[0][i] + "'><v:fill color2='" + tb_color[1][i] + "' rotate='t' focus='100%' type='gradient'/></v:rect>");
//显示比例数
//document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + (table_x+all_width+110) + "px;top:" + (table_y+30+(i)*tb_height) + "px;width:60px;height:" + tb_height + "px;z-index:1'>");
//document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + Math.round(parseFloat(total[1][i]*100/totalpie)*100)/100 + "%</td></tr></table></v:textbox></v:shape>");
}
}
if(table_type == "B")
{
var pie = 3.14159265358979;
var TempPie = 0;
for(var i=0;i<total_no;i++)
{
var TempAngle = pie * 2 * (total[1][i] / (totalpie * 2) + TempPie);
var x1 = table_x + all_width/2 + Math.cos(TempAngle) * all_width * 3/8;
var y1 = table_y + all_height/2 - Math.sin(TempAngle) * all_height * 3/8;
var x2 = table_x + all_width/2 + Math.cos(TempAngle) * all_width * 3/4;
var y2 = table_y + all_height/2 - Math.sin(TempAngle) * all_height * 3/4;
if(x2>table_x + all_width/2)
{
x3 = x2 + 20;
x4 = x3;
}
else
{
x3 = x2 - 20;
x4 = x3 - 100;
}
document.write("<v:oval id='_x0000_s1027' style='position:absolute;left:" + (x1 - 2) + "px;top:" + (y1 - 2) + "px;width:4px;height:4px; z-index:2' fillcolor='#111111' strokecolor='#111111'/>");
document.write("<v:line id='_x0000_s1025' alt='' style='position:absolute;left:0;text-align:left;top:0;z-index:1' from='" + x1 + "px," + y1 + "px' to='" + x2 + "px," + y2 + "px' coordsize='21600,21600' strokecolor='#111111' strokeweight='1px'></v:line>");
document.write("<v:line id='_x0000_s1025' alt='' style='position:absolute;left:0;text-align:left;top:0;z-index:1' from='" + x2 + "px," + y2 + "px' to='" + x3 + "px," + y2 + "px' coordsize='21600,21600' strokecolor='#111111' strokeweight='1px'></v:line>");
document.write("<v:shape id='_x0000_s1025' type='#_x0000_t202' alt='' style='position:absolute;left:" + x4 + "px;top:" + (y2 - 10) + "px;width:100px;height:20px;z-index:1'>");
document.write("<v:textbox inset='0px,0px,0px,0px'><table cellspacing='3' cellpadding='0' width='100%' height='100%'><tr><td align='left'>" + total[0][i] + " " + Math.round(parseFloat(total[1][i] * 100/ totalpie)*100)/100 + "%</td></tr></table></v:textbox></v:shape>")
TempPie += total[1][i]/totalpie;
}
}
}
</script>
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if !mso]>
<style>
v\:* { behavior: url(#default#VML) }
o\:* { behavior: url(#default#VML) }
.shape { behavior: url(#default#VML) }
</style>
<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
<style>
TD { FONT-SIZE: 9pt}
</style></head>
<body topmargin=5 leftmargin=0 scroll=AUTO>
<script language=javascript>
//=============调用方法=====================
var dataArray = new Array()
dataArray[0]=200
dataArray[1]=1200
dataArray[2]=900
dataArray[3]=600
dataArray[4]=1222
dataArray[5]=413
dataArray[6]=800
var nameArray = new Array()
nameArray[0]="中国经营报"
nameArray[1]="招聘网"
nameArray[2]="51Job"
nameArray[3]="新民晚报"
nameArray[4]="新闻晚报"
nameArray[5]="南方周末"
nameArray[6]="羊城晚报"
var total= new Array(nameArray,dataArray)
table3(total,200,40,250,250,"A");
table3(total,300,450,250,250,"B");
</script>
分享到:
相关推荐
在这个"用VML+JavaScript写的一个通用统计图表"项目中,开发者利用VML的强大图形绘制能力和JavaScript的动态性,构建了一个适用于多种统计需求的图表库。这种图表库可以用来显示各种类型的统计数据,如柱状图、折线...
Echarts是一款由百度开发的开源JavaScript图表库,它提供了丰富的可视化图表类型,包括但不限于饼图、折线图和柱状图。在这个项目中,Echarts与AJAX和Java后端结合,利用MySQL数据库来实现动态的数据展示。接下来,...
例如,开发者可以利用VML创建各种类型的图表,如条形图、饼图、线图等,这些图表可用于数据可视化,帮助用户更好地理解和分析信息。同时,由于VML是基于XML的,所以数据可以直接嵌入到图形中,方便数据驱动的动态...
在JavaScript中使用VML绘制饼图,关键步骤有: 1. 创建一个圆形的VML路径(`<v:shape>`)作为饼图的基础。 2. 计算每个扇形的起始和结束角度,这取决于数据值的比例。 3. 为每个扇形创建一个新的VML路径,调整其`...
Highcharts JS是一个强大的JavaScript库,专门用于创建高质量的数据可视化图表。这个库支持SVG(Scalable Vector Graphics)和VML(Vector Markup Language)两种渲染方式,确保在各种浏览器中都能提供出色的图表...
在本案例中,我们将探讨如何使用Raphaël库来制作统计图表,特别是饼图。 首先,Raphaël库的主要优点在于它的跨浏览器兼容性,支持IE6+以及所有现代浏览器,使得开发者能够构建出一致的用户体验。Raphaël提供了一...
在给定的资源中,"asp\asp.net统计图VML"是一个关于如何在ASP和ASP.NET中创建统计图表的教程或组件,主要涵盖了饼图、曲线图和柱图这三种常见的数据可视化形式。 VML,全称Vector Markup Language,是一种用于在...
JavaScript 和 VML(Vector Markup Language)技术在网页中创建统计图表是一种早期的解决方案,尤其在SVG(Scalable Vector Graphics)在所有现代浏览器得到广泛支持之前。本教程将深入探讨如何利用这两种技术来构建...
它在IE浏览器中得到了很好的支持,可以用于创建高质量、可缩放的图形,特别适合于生成统计图表和数据可视化。在ASP中集成VML,可以实现动态生成图形,这对于数据分析和报告是非常有用的。 在ASP中,通常会有一个或...
在实际应用中,使用VML生成这些统计图的优点是兼容老版本的IE浏览器,因为VML是为了解决IE对SVG(Scalable Vector Graphics)不支持的问题而提出的。然而,VML现在已经不再被广泛使用,现代浏览器普遍支持SVG和...
直方图是一种统计图表,常用于展示数据分布的情况,它将连续性数据分成若干个等间距的区间(或称为“组”),然后计算每个区间的频数或频率,以矩形的高度来表示数据在各区间内的数量。在信息技术中,VML(Vector ...
在ASP.NET开发中,有时候我们需要为网页创建动态的、交互式的统计图表,以直观地展示数据。VML(Vector Markup Language)是一种基于XML的语言,用于在网页上绘制矢量图形。在“自制:ASP.NET利用VML绘制统计图”这个...
总之,ASP结合VML可以实现基于服务器端的统计图表生成,尽管现代Web开发倾向于使用前端框架和JavaScript库,但在特定场景下,这种技术仍然具有实用价值。通过学习和理解这些基础知识,开发者能够更好地理解和实现...
**jQuery统计图表**是一种在网页上展示数据的强大工具,它主要依赖于JavaScript库Flot。Flot是一个基于jQuery的开源库,专为创建高质量、可定制的图表而设计。本教程将详细介绍如何利用jQuery和Flot来实现动态、美观...
Highcharts JS支持多种图表类型,包括折线图、柱状图、饼图、散点图(气泡图)、面积图、热力图、瀑布图等,可以满足从简单的数据展示到复杂的统计分析的各种需求。开发者可以通过配置选项来自定义图表的颜色、样式...
在IT行业中,创建交互式和动态的统计图表是常见的需求,尤其在数据分析和展示时。本项目使用jQuery作为基础框架,结合Highcharts插件,利用AJAX技术来实现实时或动态的数据绑定,以创建各种样式的统计图表。以下是...
FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型,如饼图、折线图、柱状图等,用于创建交互式的数据可视化解决方案。在这个例子中,你将找到如何使用FusionCharts来创建这些基本图表的实践应用。...
在统计学中,这类图表可以是3D柱状图、3D饼图或3D散点图等,它们能更直观地显示数据之间的关系和趋势。网友所创建的这个三维统计图,虽然只支持IE,但其视觉效果和信息传递能力仍然值得赞赏。 在压缩包中的"Demo....
饼图是另一种常用的统计图表,它将数据以扇形面积的比例来表示各部分占总体的比例。在ASP中生成饼图可能需要计算每个扇形的角度,然后用VML或其他图形技术绘制出相应的形状。 VML是一种XML语言,用于在IE浏览器中...
**Flot:JavaScript的强大图表库** Flot是一个基于JavaScript的开源图表库,它允许你在Web页面上绘制出高质量的、动态交互的图表。这个库以其轻量级、高性能和灵活性而受到开发者的青睐,尤其适合那些希望在网页上...