时间线——自动排列，直观地显示各个时间段。

时间线——自动排列，直观地显示各个时间段。
基于 AngularJS 的 Web 应用。

在线演示   http://gonnavis.com/timeline/
GitHub源码   https://github.com/gonnavis/Timeline

1. [代码][JavaScript]代码    

data:[
			{name:'三皇',from:-4000,to:-2717}
			,{name:'黄帝',from:-2717,to:-2599}
			,{name:'尧舜禹',from:-2226,to:-2070}
			,{name:'五帝',from:-2717,to:-2070}
			,{name:'夏朝',from:-2070,to:-1600}
			,{name:'商朝',from:-1700,to:-1027}
			,{name:'周朝',from:-1066,to:-221}
			,{name:'春秋',from:-770,to:-476}
			,{name:'战国',from:-475,to:-221}
			,{name:'秦朝',from:-221,to:-207}
			,{name:'汉朝',from:-206,to:220}
			,{name:'新朝',from:8,to:23}
			,{name:'三国',from:220,to:280}
			,{name:'晋朝',from:265,to:420}
			,{name:'十六国',from:304,to:439}
			,{name:'南朝',from:420,to:588}
			,{name:'北朝',from:386,to:581}
			,{name:'隋朝',from:581,to:617}
			,{name:'唐朝',from:618,to:907}
			,{name:'武周',from:690,to:705}
			,{name:'五代',from:907,to:960}
			,{name:'十国',from:907,to:979}
			,{name:'宋朝',from:960,to:1279}
			,{name:'金',from:1115,to:1234}
			,{name:'元朝',from:1279,to:1368}
			,{name:'明朝',from:1368,to:1644}
			,{name:'清朝',from:1644,to:1911}
		]


	//rows
	var getRows=function(data){
		var rows=[];
		var tempData=angular.copy(data);
		function setRow(row){
			var arr=[];
			arr.push(tempData.splice(0,1)[0]);
			var length=tempData.length;
			for(var i=0;i<length;){
				if(tempData[i].from>=arr[arr.length-1].to){
					arr.push(tempData.splice(i,1)[0]);
					length--;
				}
				else{
					i++;
				}
			}
			rows.push(arr);
			if(tempData.length>0){
				setRow(++row);
			}
		}
		setRow(0);
		return rows;
	}

2. [图片] e8246b600c33874463078423560fd9f9d62aa0ab.png