js 的折线图和饼图

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);
 }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据