<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {Behavior: url(#default#VML)}
td {font-size:12px; font-family:Arial;}
</style>
<Script language="javascript" src="class_statistical_chart.js" ></Script>
<script language="javascript">
////////////////////////// 以下为测试代码 ///////////////////////////////
//声明一个统计图表对象，在经过初始化之后，可以调用 draw() 方法画出统计图
var test_chart = new cls_statistical_chart();
//给出 x，y轴的标号
// x 轴的标号
for (i=1; i<10; i++)
test_chart.x_axis_tag_ary.push((i).toString() + "月");
//y_axis_tag
for (i=1; i<8; i++)
test_chart.y_axis_tag_ary.push((i*10).toString() + "元");
//设定第一象限的尺寸（像素）
test_chart.x_axis_lengthpx = 600;
test_chart.y_axis_lengthpx = 400;
//设定你的统计数据的范围，我会把你的数据映射到坐标轴上
//目前 x 轴的范围是保留的
test_chart.user_x_from = 0;
test_chart.user_x_to = 10000;
test_chart.user_y_from = 10;
test_chart.user_y_to = 70;
//以上为初始化
//下面的函数体是一个添加统计数据的示范，为了测试方便，故写成了一个函数，统计数据随机生成
function testdata( name, chart_color, intro )
{
var i = 0;
var data_ary = new Array(); //存放统计数据的数组
data_ary.push(name); //此条统计数据的名称，把鼠标放在这条上会显示
data_ary.push(chart_color); //此条的颜色
data_ary.push(test_chart.x_axis_tag_ary.length); //统计数据个数从[4]开始
data_ary.push(intro); //此条统计数据的简介，把鼠标放在这条上会显示
for (i=0; i<data_ary[2]; i++)
{
//data_ary.push(test_chart.logic_width / (test_chart.x_axis_tag_ary.length+1) * (i+1)); //自动填充 x，暂定为自动获取
data_ary.push(Math.random() * 70 ); //这里应该是用户入口参数，暂为随机生成
}
test_chart.addpolyline(data_ary); //向统计图类的对象注册这条折线，这样在调用 draw() 的时候才能画出来
//alert(data_ary);
//alert(test_chart.data_item_ary.pop().valueOf()); //测试项目数组
//alert(test_chart.draw());
}
//连续调用testdata()函数，目的是生成很多条随机折线，节省代码
testdata("1111111111111111", "#336699" ,"1111111111111111_intro");
testdata("2222222222222222", "red" ,"2222222222222222_intro");
testdata("3333333333333333", "green" ,"3333333333333333_intro");
testdata("4444444444444444", "yellow" ,"4444444444444444_intro");
</script>
</head>
<body>
<table border=0 align="center" cellpadding=0 cellspacing=0 >
<tr>
<td height=20 valign=middle align="center">
伦子的统计图表
</td>
</tr>
<tr>
<td align=left valign=right>
<!--div style=" background-color:#fedede"-->
<div align="center">
<!--统计图数据 开始-->
<!--v:polyline points="220,60 225,100 215,220 218,228 230,240 250,238" filled="false"-->
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write(test_chart.title + "<br>");
document.write(test_chart.draw());
//alert(test_chart.data_item_ary.valueOf());
//alert(test_chart.draw());
//-->
</SCRIPT>
<!--统计图数据 结束-->
</div>
</td>
</tr>
</table>
</body>
</html><BR>
用VML+JavaScript写的一个通用统计图表
版权申诉
27 浏览量
2022-06-26
20:09:58
上传
评论
收藏 4KB RAR 举报
3892259.rar （2个子文件） 
用VML+JavaScript写的一个通用统计图表 class_statistical_chart 
class_statistical_chart.js 8KB
class_statistical_chart_test.html 3KB资源评论
