<!--
Document : vmlChartDemo
Created on : 2008/7/15, 10:12:24
Author : qq.c
Email : [email protected]
-->
<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>
<TITLE> chart </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META NAME="Author" CONTENT="qq.c">
<style>
body{font-size:12px;}
</style>
</HEAD>
<BODY>
<script language="javaScript">
function vmlVectChart(){
this.title = null;
this.typeArray = new Array();
this.partArray = new Array();
this.vFunArray = new Array();
this.vTitle = "";
this.lTitle = "";
this.xTitle = "";
this.backgroundColor = "#EFEFEF";
this.left = 0;
this.top = 0;
this.width = 500;
this.height = 300;
this.span = 10;
this.thick = 2 ;
this.showValue = true;
this.showVvalue = true;
this.showLvalue = true;
this.lineColor = null;
this.singleColor = false;
this.singleColorId = 0;
this.htmlStr = "";
this.colorMark = "1";
this.lineThick = 1;
this.lineMax = null;
this.vectMax = null;
this.vectArray = new Array();
this.lineArray = new Array();
this.baseColor = {
tmdColor1 : new Array("#d1ffd1","#ffbbbb","#ffe3bb","#cff4f3","#d9d9e5","#ffc7ab","#ecffb7"),
tmdColor2 : new Array("#00ff00","#ff0000","#ff9900","#33cccc","#666699","#993300","#99cc00")
};
this.param = {
haveLine : false,
haveVect : false,
typeCount: 1,
total_no : 0,
vtemp1 : 0,
vtemp2 : null,
vtemp3 : null,
vtemp4 : null,
ltemp1 : 0,
ltemp2 : null,
ltemp3 : null,
ltemp4 : null,
vPercent: false,
lPercent: false,
chartWidth : 0,
chartHeight : 0,
chartTop : 0,
chartLeft : 0,
zIndex : 0,
line_color : "#69f",
vectThick : 0,
lineCount : 0
}
};
vmlVectChart.prototype={
trim : function(str){
return str.replace(/(^[\s]*)|([\s]*$)/g, "");
},
init : function(){
this.width = parseInt(this.width);
this.height = parseInt(this.height);
this.param.typeCount = this.typeArray.length;
this.param.total_no = this.partArray.length;
this.param.vectThick = this.thick;
var numArrayStr,numArray,numStr;
//判斷是否有柱型圖﹐是否為百分比類型
if(this.vectArray.length>0){
this.param.haveVect = true;
for(var i=0;i<this.vectArray.length;i++){
numArrayStr = this.vectArray[i];
if(numArrayStr.indexOf("%")>0){
this.param.vPercent = true;
break;
}
}
}
//判斷是否有折線圖﹐是否百分比類型
if(this.lineArray.length>0){
this.param.haveLine = true;
for(var i=0;i<this.lineArray.length;i++){
numArrayStr = this.lineArray[i];
if(numArrayStr.indexOf("%")>0){
this.param.lPercent = true;
break;
}
}
}
//取Vect的相關數值
//取Vect的最大值
for(var i = 0;i<this.vectArray.length;i++){
numArrayStr = this.vectArray[i];
numArray = numArrayStr.split(",");
for(var j=0;j<numArray.length;j++){
numStr = numArray[j].replace("%","");
if(this.param.vtemp1<parseInt(numStr)){
this.param.vtemp1 = parseInt(numStr);
}
}
}
if(this.param.vtemp1>9){
this.param.vtemp2 = this.param.vtemp1.toString().substr(1,1);
if(this.param.vtemp2>4){
this.param.vtemp3 = (parseInt((this.param.vtemp1/(Math.pow(10,(this.param.vtemp1.toString().length-1)))).toString())+1)*Math.pow(10,(this.param.vtemp1.toString().length-1));
}else{
this.param.vtemp3 = (parseInt((this.param.vtemp1/(Math.pow(10,(this.param.vtemp1.toString().length-1)))).toString())+0.5)*Math.pow(10,(this.param.vtemp1.toString().length-1));
}
}else{
if(this.param.vtemp1>4){
this.param.vtemp3 = 10;
}else{
this.param.vtemp3 = 5;
}
}
if(this.vectMax!=null && this.param.vtemp1<= this.vectMax){
this.param.vtemp3 = this.vectMax;
}
this.param.vtemp4=this.param.vtemp3/5;
//取折線的相關數值
//取Line的最大值
for(var i = 0;i<this.lineArray.length;i++){
numArrayStr = this.lineArray[i];
numArray = numArrayStr.split(",");
if (numArray.length>this.param.lineCount){
this.param.lineCount = numArray.length;
}
for(var j=0;j<numArray.length;j++){
numStr = numArray[j].replace("%","");
if(this.param.ltemp1<parseInt(numStr)){
this.param.ltemp1 = parseInt(numStr);
}
}
}
if(this.param.ltemp1>9){
this.param.ltemp2 = this.param.ltemp1.toString().substr(1,1);
if(this.param.ltemp2>4){
this.param.ltemp3 = (parseInt((this.param.ltemp1/(Math.pow(10,(this.param.ltemp1.toString().length-1)))).toString())+1)*Math.pow(10,(this.param.ltemp1.toString().length-1));
}else{
this.param.ltemp3 = (parseInt((this.param.ltemp1/(Math.pow(10,(this.param.ltemp1.toString().length-1)))).toString())+0.5)*Math.pow(10,(this.param.ltemp1.toString().length-1));
}
}else{
if(this.param.ltemp1>4){
this.param.ltemp3 = 10;
}else{
this.param.ltemp3 = 5;
}
}
if(this.lineMax!=null && this.param.ltemp1<= this.lineMax){
this.param.ltemp3 = this.lineMax;
}
this.param.ltemp4=this.param.ltemp3/5;
//基本位置參數
if(this.title!=null){
this.param.chartHeight = this.height-90;
this.param.chartTop = 50;
}else{
this.param.chartHeight = this.height-70;
this.param.chartTop = 30;
}
if(this.param.typeCount>1 && this.colorMark == "1"){
this.param.chartWidth = this.width-150;
this.param.chartLeft = 50;
}else{
this.param.chartWidth = this.width-100;
this.param.chartLeft = 50;
}
this.start();
},
start : function(){
if(this.param.haveLine){
if(this.param.vectThick>2)this.param.vectThick=2;
this.thick = 0;
}
//制作容器
this.htmlStr = "<v:group style='position:relative;left:"+this.left+";top:"+this.top+";width:"+this.width+"px;height:"+this.height+"px' coordsize='"+(this.width)+","+(this.height)+"'>";
//制作title
if(this.title!=null && this.trim(this.title)!=""){
this.htmlStr += "<!--[if gte vml 1]><v:shape style='position:relative;left:0px;top:10px;width:"+(this.width)+"px;height:30px;z-index:"+(this.param.zIndex+40)+";'><v:textbox inset='0px,0px,0px,0px'><span style=' width:100%;font:bolder 20px Verdana,Arial,Tahoma;text-align:center;overflow:hidden;text-overflow:ellipsis; white-space:nowrap; '>" + (this.title) + "</span></v:textbox></v:shape><![endif]-->";
}
//制作底版
this.htmlStr += ("<!--[if gte vml 1]><v:rect style='position:relative;left:0px;top:0px;width:" + (this.width) + "px;height:" + (this.height) + "px;z-index:"+this.param.zIndex+"' fillcolor='"+(this.backgroundColor)+"' stroked='t' strokecolor='#808080'></v:rect><![endif]-->");
//制作圖形彩色底版
this.htmlStr += ("<!--[if gte vml 1]><v:rect style='position:relative;left:" + (this.param.chartLeft) + "px;top:" + (this.param.chartTop) + "px;width:" + (this.param.chartWidth) + "px;height:" + (this.param.chartHeight) + "px;z-index:"+(this.param.zIndex+1)+"' fillcolor='#9cf' stroked='f'><v:fill rotate='t' angle='-45' focus='100%' type='gradient'/></v:rect><![endif]-->");
//X軸
var x_startX = this.param.chartLeft;
var x_startY = this.param.chartTop + this.param.chartHeight;
var x_endX = this.param.chartLeft + this.param.chartWidth + 20;
var x_endY = x_startY;
this.htmlStr +=("<!--[if gte vml 1]><v:line style='position:relative;text-align:left:0;top:0;flip:y;z-index:"+(this.param.zIndex+10)+"' from='" + (x_startX) + "," + (x_startY) + "' to='" + (x_endX) + "," + (x_endY) + "'><v:stroke opacity='1' star
javascript图表，饼状图 矩形图 折线图
4星 · 超过85%的资源 需积分: 9 59 浏览量
2009-06-30
19:24:34
上传
评论
收藏 8KB RAR 举报 
chart.rar （2个子文件） 
chart 
vmlChartDemo.html 26KB pieChart.html 7KB资源评论
sw882013-04-04不知干嘛，引用后整个页面出现乱码
w_titan2012-05-29很有用的东西，就是帮助文档少了一点，，，
waerxie2013-01-13谢谢楼主的分享，正在学习javascript，是个好例子。- shizonghuhu2012-06-12还不错，可惜ie低版本的不行
