一个Javascript曲线绘制实例代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js曲线绘制</title>
<script>
var gov=new Object();
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}
 var $ = function(elem) {
    if (arguments.length > 1) {
      for (var i = 0, elems = [], length = arguments.length; i < length; i++)
        elems.push($(arguments[i]));
      return elems;
    }
    if (typeof elem == 'string') {
      return document.getElementById(elem);
    } else {
      return elem;
    }
  };
var period =  Class.create();
period.prototype = {
			initialize:function(value,time){
				this.value = value;			   
				this.time = time;
			}
};
gov.Graphic = Class.create();
gov.Graphic.prototype={
	initialize: function(data,elm,options){
		this.setOptions(options);
		this.entity=document.createElement("div");
		this.pointBox=$(elm);
		this.showPointGraphic(data);
	},
	setOptions: function(options) {
		this.options = {
			height:170,                 //绘图区域高度
			maxHeight:50,              //y轴最高数值
			barDistance:26,           //x轴坐标间距
			topDistance:0,             //上部填充
			bottomDistance:0,        //底部填充
			leftDistance:20,
			pointWidth:5,               //坐标点宽度
			pointHeight:5,             //坐标点高度
			pointColor:"#ff0000",     //坐标点颜色
			lineColor:"#ffd43a",       //连接线颜色
			valueWidth:20,            //y轴数值宽度
			valueColor:"#000",       //y轴数值颜色
			timeWidth:20,             //x轴数值宽度
			timeColor:"#000",       //x轴数值颜色
			disvalue:true,             //是否显示y轴数值
			distime:true              //是否显示x轴数值
		}
		Object.extend(this.options, options || {});
  	},
	showPointGraphic:function(data,obj)
	{
			var This=this;
			var showPoints=new Array();
			var values=new Array();
			var times=new Array();
			This.points=data;
			This.count=data.value.length;

for(var i=0;i<This.count;i++)
			{
				var showPoint=document.createElement("div");
                var spanValue=document.createElement("span");
                var spanTime=document.createElement("span");
				showPoint.height=This.points.value[i];
                showPoint.value=This.points.value[i];
                showPoint.time=This.points.time[i];
				
				showPoint.style.backgroundColor=this.options.pointColor;
				showPoint.style.fontSize="0px";
				showPoint.style.position="absolute";
				showPoint.style.zIndex ="999";
				showPoint.style.width=this.options.pointWidth+"px";
				showPoint.style.height=this.options.pointHeight+"px";
				showPoint.style.top=this.options.topDistance+"px";
                
				spanValue.style.position="absolute";
				spanValue.style.width=this.options.valueWidth+"px";
				spanValue.style.textAlign="center";
				spanValue.style.color=this.options.valueColor;
				spanValue.style.zIndex ="999";

spanTime.style.position="absolute";
				spanTime.style.width=this.options.timeWidth+"px";
				spanTime.style.textAlign="center";
				spanTime.style.color=this.options.timeColor;
				var timeHeight=15;
				var valueHeight=21;
				if(!this.options.disvalue) {
					spanValue.style.display="none";
					valueHeight=this.options.pointHeight;
				}
				if(!this.options.distime) {
					spanTime.style.display="none";
					timeHeight=0;
				}

var left;
				if(showPoints.length!=0){
					left=parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+this.options.barDistance;
				}
				else{
					left=this.options.leftDistance;
				}
				
				showPoint.style.left=left+"px";
                spanValue.style.left=left+parseInt((this.options.pointWidth-this.options.valueWidth)/2)+"px";
                spanTime.style.left=left+parseInt((this.options.pointWidth-this.options.timeWidth)/2)+"px";
												
				if(showPoint.height>this.options.maxHeight)
				{
					showPoint.height=this.options.maxHeight;
				}
				
		        spanValue.innerHTML=showPoint.value;
				spanTime.innerHTML=showPoint.time;
                        
                showPoints.push(showPoint);
                values.push(spanValue);
                times.push(spanTime);

This.entity.appendChild(showPoint);
				This.entity.appendChild(spanValue);
				This.entity.appendChild(spanTime);
				
				var percentage=showPoints[i].height/this.options.maxHeight||0;
				var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage;
				showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px";
                values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px";
                times[i].style.top=this.options.height-this.options.bottomDistance-timeHeight+"px";
			}
			var _leng=showPoints.length
			for(var i=0;i<_leng;i++)
			{
				if(i>0)
					{
						This.drawLine(parseInt(showPoints[i-1].style.left),
													parseInt(showPoints[i-1].style.top),
													parseInt(showPoints[i].style.left),
													parseInt(showPoints[i].style.top)
													);
					}
			}
			This.Constructor.call(This);
		},
		drawLine:function(startX,startY,endX,endY)
		{
			var xDirection=(endX-startX)/Math.abs(endX-startX);
			var yDirection=(endY-startY)/Math.abs(endY-startY);
			var xDistance=endX-startX;
			var yDistance=endY-startY;
			var xPercentage=1/Math.abs(endX-startX);
			var yPercentage=1/Math.abs(endY-startY);
			if(Math.abs(startX-endX)>=Math.abs(startY-endY))
			{
				var _xnum=Math.abs(xDistance)
				for(var i=0;i<=_xnum;i++)
				{
					var point=document.createElement("div");
					point.style.position="absolute";
					point.style.backgroundColor=this.options.lineColor;
					point.style.fontSize="0";
					point.style.width="1px";
					point.style.height="1px";							
					
					startX+=xDirection;
					point.style.left=startX+this.options.pointWidth/2+"px";
					startY=startY+yDistance*xPercentage;
					point.style.top=startY+this.options.pointHeight/2+"px";
					this.entity.appendChild(point);
				}
			}
			else
			{
				var _ynum=Math.abs(yDistance)
				for(var i=0;i<=_ynum;i++)
				{
					var point=document.createElement("div");
					point.style.position="absolute";
					point.style.backgroundColor=this.options.lineColor;
					point.style.fontSize="0";
					point.style.width="1px";
					point.style.height="1px";							
					
					startY+=yDirection;
					point.style.top=startY+this.options.pointWidth/2+"px";
					startX=startX+xDistance*yPercentage;
					point.style.left=startX+this.options.pointHeight/2+"px";
					this.entity.appendChild(point);
				}
			}
		},
		Constructor:function()
		{
			this.entity.style.position="absolute";
			this.pointBox.innerHTML="";
			this.pointBox.appendChild(this.entity);
		}
}
</script>
<script>
	window.onload=function(){
		var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据
			[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
			);
		var data1=new period([48,23,10,2,12,8,24,25,15,35,25,14,42,58,46,25,12,8,14,28,42],//y轴数据
			[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据
			);
		new gov.Graphic(data,"box");
		new gov.Graphic(data1,"box1",{ pointColor:"#3366ff",lineColor:"#33ffff"});
	}
</script>
<style type="text/css">
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin:0px;
	padding:0px;
}
#box,#box1{
	padding:13px 0px 10px;
	padding-left:28px;
	width:677px;
	height:180px;
	background:url(//ku.shouce.ren/files/images/201601/56a36bb960581.gif) no-repeat;
}
</style></head>
	<body>
	<div id="box"></div>
	<div id="box1"></div>
	</body>
</html>

​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js曲线绘制</title>
<script>
var gov=new Object();
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

一个Javascript曲线绘制实例代码

分类

网站常用

描述

一个Javascript曲线绘制实例代码，使用了一个背景图，我觉得挺不错，就发上来分享给大家。