easychart.htm 的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>easyChart Demo</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="chart.js"></script>
</HEAD>
<BODY>
<div id="chart1"></div>
<div id="chart2"></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
var ec = new easyChart("chart1","我的图表",800,500);
ec.fieldTitle = ["4月13日","4月14日","4月15日","4月16日","4月17日","4月18日","4月19日"];
ec.addData("字段1",[10,20,30,20,40,30]);
ec.addData("字段2",[20,40,50,20,50,20]);
ec.addData("字段3",[10,20,40,50,20,40]);
ec.addData("字段4",[10,40,10,30,30,30]);
ec.addData("字段5",[30,50,30,60,40,30]);
ec.show("c");
var ec = new easyChart("chart2","我的图表");
ec.addData("字段1",[10,20,30,20,40,30]);
ec.addData("字段2",[20,40,50,20,50,20]);
ec.addData("字段3",[10,20,40,50,20,40]);
ec.addData("字段4",[10,40,10,30,30,30]);
ec.addData("字段5",[30,50,30,60,40,30]);
ec.show("p");
//-->
</SCRIPT>
Copyright By PuterJam 2007
</BODY>
</HTML>
chart.js 的代码
/*easy Chart Class For IE Only*/
// init vml stylesheet & namespace --------------
var vSheet = document.createStyleSheet();
vSheet.addRule("v\:*","{behavior:url(#default#VML);color:#000;margin:auto}",0);
vSheet.addRule("o\:*","{behavior:url(#default#VML);}",1);
vSheet.addRule("v\:*.chartTitle","{font-weight:bold}",2);
vSheet.addRule("v\:*.on","{font-weight:bold}",3);
vSheet.addRule("v\:*.off","{behavior:url(#default#VML);}",4);
vSheet.addRule("v\:*.leftValue","{text-align:right;font-size:11;padding-right:3px;padding-top:5px;}",5);
vSheet.addRule("v\:*.bottomValue","{text-align:center;font-size:11;padding-right:3px;padding-top:5px;}",5);
// defined NAMESPACE
document.write('<XML:NAMESPACE ns="urn:schemas-microsoft-com:vml" prefix="v"/>');
document.write('<XML:NAMESPACE ns="urn:schemas-microsoft-com:office:office" prefix="o"/>');
// defined Class ----------------
var easyChart = function(elementId,title,width,height){
this.ANGLE = Math.pow(2,16) * 360;
this.coordFactor = 10; //坐标系放大系数
this.width = width?width:480; //页面坐标系宽度
this.height = height?height:250;//页面坐标系高度
this.cWidth = this.width * this.coordFactor; //放大后的宽度
this.cHeight = this.height * this.coordFactor; //放大后的高度
//曲线图和柱形图背景参数
this.mL = 50 * this.coordFactor; //marginLeft
this.mB = 30 * this.coordFactor; //marginRight
this.mT = 50 * this.coordFactor; //marginTop
this.mR = 100 * this.coordFactor; //marginRight
this.lineMarginTop = 30 * this.coordFactor;
this.lineWidth = this.cWidth - this.mR - this.mL;
this.lineHeight = this.cHeight - this.mT - this.mB;
this.initBackground = false; //是否初始化过背景图
this.lineCut = 10; //数据分段
this.valueLength = 0; //数据长度
this.vGroup = null;
this.vContent = null;
this.fieldTitle = []; //字段数组
this.data = [];
this.totalCount = 0;
this.max = 0;
this.ceilMax = Math.ceil(this.max/100) * 100;
this.title = title?title:"默认图表";
this.elementId = elementId;
this.colorArray = ["#0099FF","#FF0000","#339933","#3300CC","#CC33FF","#006633"];
this.showCurveDot = true;
this.init();
}
easyChart.prototype.init = function(){
this.buildCoordinate();
}
easyChart.prototype.clear = function(){
}
easyChart.prototype.addData = function(title,value){
this.data.push([title,value.slice(0)]);
this.totalCount += eval(value.join("+"));
var maxValue = value.sort(function (a,b){return a-b})[value.length-1] - 0;
if (this.valueLength < value.length) this.valueLength = value.length;
if (maxValue > this.max){
this.max = maxValue;
this.ceilMax = Math.ceil(this.max/95) * 100;
}
this.initBackground = false;
}
easyChart.prototype.clearData = function(){
this.data = [];
this.totalCount = 0;
this.max = 0;
this.valueLength = 0;
this.initBackground = false;
}
easyChart.prototype.show = function(type){
switch(type){
case "p":
this.vContent.innerHTML = this.buildPie();
break;
case "r":
this.vContent.innerHTML = this.buildCurve();
break;
case "c":
this.vContent.innerHTML = this.buildCurve();
break;
}
//alert(this.vGroup.outerHTML)
}
easyChart.prototype.buildPie = function(){//绘制饼图
var strHTML = "";
var startAngle = 0;
var endAngle = 0;
var p = 0;
var w = this.cWidth / 2;
var h = this.cHeight / 2;
var size = this.cHeight * 0.75;
var x = size + this.cWidth * 0.2;
var y = size + this.cHeight * 0.3;
for (var i=0;i<this.data.length;i++){
startAngle += p;
var c = eval(this.data[i][1].join("+"));
p = c/this.totalCount;
endAngle = p;
var colorID = parseInt(i % this.colorArray.length);
var id = Math.ceil(Math.random() * 10000);
strHTML += '<v:shape title="' + this.data[i][0] + ':' + c + '" style="width: ' + w + ';height: ' + h + ';cursor:pointer" fillcolor = "' + this.colorArray[colorID] + '" strokecolor = "black" strokeweight = "1pt" path="m '+ x +' '+ y +' ae '+ x +' '+ y +' '+ size +' ' + size +' '+Math.floor(startAngle * this.ANGLE)+' '+Math.floor(endAngle * this.ANGLE)+' x e" onmouseover="document.getElementById('r_'+id+'').className = 'on'" onmouseout="document.getElementById('r_'+id+'').className = 'off'"/>';
var tY = ((i * 25 + 50) * this.coordFactor);
var tW = (this.cWidth - (x+150));
strHTML += '<v:rect style="POSITION: relative;top:' + (tY+30) + 'px;left:' + x + 'px;WIDTH:' +(10 * this.coordFactor) + ';HEIGHT:' + (10 * this.coordFactor) + '" fillcolor = "' +this.colorArray[colorID]+ '"></v:rect>'
strHTML += '<v:rect filled="false" stroked="false" id="r_'+id+'" strokecolor="#fff" style="POSITION: relative;top:' + tY + 'px;left:' + (x+140) + 'px;WIDTH:' + tW + ';HEIGHT:' + (20 * this.coordFactor) + '">' + this.data[i][0] + '</v:rect>'
}
return strHTML;
}
easyChart.prototype.buildRectangle = function(){
return this.buildBackground();
}
easyChart.prototype.buildCurve = function(){
var backGround = this.buildBackground(); //绘制背景图
var curveLine = "";
var left = this.lineWidth / this.data.length;
var top = this.mT;
var perW = this.lineWidth / this.data.length /2;
var perHeight = this.cHeight + this.mT;
var lastX = 0;
var lastY = 0;
for (var i=0;i<this.valueLength;i++){
var pointer = ""
var colorID = parseInt(i % this.colorArray.length);
for (var j=1;j<=this.data.length;j++){
var data = this.data[j-1][1][i];
var fW = this.lineWidth * (j-1) / this.data.length - perW;
var fH = this.lineHeight - (this.lineHeight * (data / this.ceilMax));
//alert(data + ": "+ this.ceilMax+ ":"+ data / this.ceilMax)
// if (j>1) {
// curveLine +='<v:line from = "'+lastX+','+ lastY +'" to = "'+(this.mL + fW )+','+ fH + '" strokeweight = "1px" ></v:line>'
// }
lastX = this.mL + fW;
lastY = fH;
if (this.showCurveDot)
curveLine +='<v:oval style="POSITION: relative;cursor:pointer;left:'+(lastX + this.lineWidth / this.data.length - 25)+'px;top:'+ (lastY+this.mT - 25)+'px;width:50;height:50" title="'+data+'" fillcolor="'+this.colorArray[colorID]+'" stroked="false"/>';
pointer += lastX + "," + lastY + " ";
}
var x = this.cWidth - 90 * this.coordFactor;
var tY = ((i * 25 + 40) * this.coordFactor);
var tW = (this.cWidth - (x+150));
curveLine += '<v:rect style="POSITION: relative;top:' + (tY+30) + 'px;left:' + x + 'px;WIDTH:' +(10 * this.coordFactor) + ';HEIGHT:' + (10 * this.coordFactor) + '" fillcolor = "' +this.colorArray[colorID]+ '"></v:rect>'
curveLine += '<v:rect filled="false" stroked="false" strokecolor="#fff" style="POSITION: relative;top:' + tY + 'px;left:' + (x+140) + 'px;WIDTH:' + tW + ';HEIGHT:' + (20 * this.coordFactor) + '">' + (this.fieldTitle[i]?this.fieldTitle[i]:"字段"+i) + '</v:rect>'
curveLine += '<v:PolyLine filled="false" Points="' + pointer + '" style="position:relative;left:' + left + ';top:'+top+'" StrokeColor="'+this.colorArray[colorID]+'"/>';
}
var curveHTML = backGround + curveLine;
return curveHTML;
}
easyChart.prototype.buildBackground = function(){
if (this.initBackground) return this.backgroundHTML;
var strHTML = "";
var lFix = "";
//绘制边线
strHTML +='<v:line from = "'+this.mL+','+ (this.cHeight - this.mB) +'" to = "'+(this.lineWidth + this.mL)+','+ (this.cHeight - this.mB) + '" strokeweight = "1px" ></v:line>';
strHTML +='<v:line from = "'+this.mL+','+ this.mT +'" to = "'+this.mL+',' + (this.lineHeight + this.mT)+'" strokeweight = "1px" ></v:line>';
//绘制虚线和数值
for (var i=1;i<=this.lineCut;i++){
var fH = this.lineHeight * i/this.lineCut;
strHTML += '<v:rect filled="false" stroked="false" strokecolor="#fff" style="POSITION: relative;top:'+(this.cHeight - this.mB - fH - 10*this.coordFactor)+'px;left:100px;WIDTH:' + (this.mL - 100) + ';HEIGHT:' + (20 * this.coordFactor) + '" class="leftValue">' + (this.ceilMax/this.lineCut * i) + '</v:rect>';
strHTML +='<v:line from = "'+this.mL+','+ (this.cHeight - this.mB - fH) +'" to = "'+(this.lineWidth + this.mL)+','+ (this.cHeight - this.mB - fH) + '" strokeweight = "1px" ><v:stroke dashstyle="ShortDash"/></v:line>'
}
//绘制节点
for (var i=1;i<=this.data.length;i++){
var fW = this.lineWidth * i / this.data.length;
var w = (60 * this.coordFactor);//文字框的宽度
strHTML += '<v:rect filled="false" stroked="false" strokecolor="#fff" style="POSITION: relative;top:'+(this.cHeight - this.mB)+'px;left:'+ (this.mL + fW - w/2) +'px;WIDTH:' + w + ';HEIGHT:' + (20 * this.coordFactor) + '" class="bottomValue">' + this.data[i-1][0] + '</v:rect>';
strHTML +='<v:line from = "'+(this.mL+fW)+','+ (this.lineHeight + this.mT) +'" to = "'+(this.mL+fW)+',' + (this.lineHeight + this.mT - (5 * this.coordFactor))+'" strokeweight = "1px" ></v:line>';
}
this.backgroundHTML = strHTML;
this.initBackground = true;
return strHTML;
}
easyChart.prototype.buildCoordinate = function(){
this.vGroup = document.createElement("v:group");
this.vGroup.style.width = this.width;
this.vGroup.style.height = this.height;
this.vGroup.coordSize = (this.width * this.coordFactor) + "," + (this.height * this.coordFactor);
this.vGroup.innerHTML = '<v:rect style="WIDTH:' +(this.width * this.coordFactor) + ';HEIGHT:' + (this.height * this.coordFactor) + '" fillcolor="#fff"><v:TextBox inset="5pt,5pt,5pt,5pt" class="chartTitle">' + this.title + '</v:TextBox><v:shadow on="t" type="single" color="silver" offset="2pt,2pt"/></v:rect>';
this.vContent = document.createElement("div");
this.vGroup.appendChild(this.vContent);
var element = document.getElementById(this.elementId);
element.appendChild(this.vGroup);
}