Задача: Плоттеры для рисования графиков
Исходник: Плоттер для рисования графиков. Пример - график sin-уса, язык: javascript [code #142, hits: 8159]
автор: - [добавлен: 22.05.2006] 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">	
  2. <html>	
  3. <head>	
  4.     <title>Function Plotter</title>	
  5. <style type="text/css">	
  6. .plotterarea {	
  7.    postitio: relative;	
  8.    width: 80%;	
  9.    height: 80%;	
  10.    overflow: hidden;	
  11.    background-color: #cccccc;	
  12.    left: center;	
  13.    border-left: 2px solid black;	
  14. }	
  15. .plotter_pen {	
  16.    position: absolute;	
  17.    background-color: black;	
  18.    margin:0px;	
  19.    width: 3px;	
  20.    height: 3px;	
  21.    font-size: 1px;	
  22.    z-index: 10;	
  23. }	
  24. .plotter_interpolation {	
  25.    position: absolute;	
  26.    background-color: #999999;	
  27.    margin:0px;	
  28.    width: 3px;	
  29.    height: 3px;	
  30.    font-size: 1px;	
  31.    z-index: 5;	
  32. }	
  33. </style>	
  34. <script type="text/javascript">	
  35. <!--	
  36. /**	
  37. * Контейнер для точек, что бы скрывать/удалять удобней было.	
  38. */	
  39. function PlotterDrawing(name, area) {	
  40.   this.points=[]; //контейнер с точками	
  41.   this.area=area; //предок, обьект PlotterArea	
  42.   this.name=name; //имя графика	
  43.   this.initing=false; //флаг инициализации, пока установлен флаг, скрыть или удалить график нельзя	
  44. }	
  45. /**	
  46. * Скрыть/показать график	
  47. * @param visible  - true - показать, false - скрыть график	
  48. */	
  49. PlotterDrawing.prototype.setVisible=function(visible) {	
  50.   if(this.initing) return;	
  51.   for(var i=0; i<this.points.length; i++) this.points[i].style.visibility=visible? "true": "false";	
  52. }	
  53. /**	
  54. * Удалить график	
  55. */	
  56. PlotterDrawing.prototype.remove=function() {	
  57.   if(this.initing) return;	
  58.   for(var i=0; i<this.points.length; i++) this.area.area.removeChild(this.points[i]);	
  59.   this.points=[];	
  60.   this.area.drawings["~"+this.name]=null;	
  61. }	
  62. /**	
  63. * Если установить в true, то дополняем все несуществующие точки простейшей	
  64. * интерполяцией. Не рекомендуеться для медленных машин.	
  65. */	
  66. PlotterArea.use_interpolation=true;	
  67. /**	
  68. * Создать активное поле для графиков. Аргументом передаём слой/блочный элемент	
  69. * где рисуем граифк.	
  70. */	
  71. function PlotterArea(obj) {	
  72.   if(!obj||obj.nodeType!==1||obj.offsetWidth<1||obj.offsetHeight<1) throw "PlotterArea.<constructor> IlligalArgumentException: area is not a HTML element";	
  73.   this.area=obj;	
  74.   this.width=obj.offsetWidth	
  75.   this.height=obj.offsetHeight;	
  76.  
  77.   this.plotter=document.createElement("SPAN"); //дефолтовый мелок	
  78.   this.plotter.className="plotter_pen";	
  79.   this.plotter.style.visibility="hidden";	
  80.   this.area.appendChild(this.plotter);	
  81.  
  82.   this.drawings={}; //регистр графиков	
  83. }	
  84. /**	
  85. * Нарисовать график. Аргументами передаём имя, функцию и опциональные параметры.	
  86. * @param name  - имя графика	
  87. * @param func  - функция, что будем рисовать	
  88. * @param start - стартовое значение для аргумента функции	
  89. * @param step  - шаг, с которым будем проходить по функции	
  90. * @param coef  - выравнивающий коефициент, -1 <= func(arg)*coef <= 1	
  91. */	
  92. PlotterArea.prototype.draw=function(name, func, start, step, coef) {	
  93.   if(typeof(func)!="function"||name=="") throw "PlotterArea.draw: IlligalArgumentException: name and function must be specified";	
  94.   var d=this.getDrawing(name); //если уже существует такой график, то удалим	
  95.   this.drawings["~"+name]=(d=(d!=null)? (d.remove(),d): new PlotterDrawing(name, this));	
  96.   d.initing=true;	
  97.  
  98.   var steps=Math.floor(this.width/this.plotter.offsetWidth); //количество точек вмещаемых в область рисования	
  99.   start=start==null? 0: start;	
  100.   step=step==null? 1: step;	
  101.   coef=coef==null? 1: coef;	
  102.  
  103.   var pts=[];	
  104.   for(var i=0; i<steps; i++) pts.push(func(start+step*i)*coef); //must be [-1...1]	
  105.  
  106.   var prnt=this, pos=0, prevp=null;	
  107.   var tmr=window.setInterval(drawThread, 50); //ставим отрисовку с паузой в миллисекундах	
  108.  
  109.   //исполняемый тред, тот что будет рисовать точки	
  110.   function drawThread() {	
  111.     if(pos>=pts.length) {	
  112.       d.initing=false;	
  113.       window.clearTimeout(tmr);	
  114.       return;	
  115.     }	
  116.     var p=prnt.plotter.cloneNode(true);	
  117.     p.style.visibility="visible";	
  118.     p.style.left=(pos*prnt.plotter.offsetWidth)+"px";	
  119.     p.style.top=(prnt.height/2 - pts[pos]*prnt.height/2)+"px";	
  120.     prnt.area.appendChild(p);	
  121.     d.points.push(p);	
  122.     /*	
  123.     * Если разрешенна простая интерполяция, то дорисовываем недостающие точки.	
  124.     * Медленный процес под Мозиллой, не советую... =/	
  125.     */	
  126.     var bijsteps;	
  127.     if(PlotterArea.use_interpolation && prevp!=null && (bijsteps=(Math.abs(prevp.offsetTop-p.offsetTop)/prnt.plotter.offsetHeight))>1) {	
  128.       var sp=prnt.plotter.offsetWidth/bijsteps;	
  129.       var sign=(prevp.offsetTop>p.offsetTop)? -1: 1;	
  130.       var x, y, pi, prevx=prevp.offsetLeft;	
  131.       for(var i=0; i<bijsteps; i++) {	
  132.          x=Math.round(prevp.offsetLeft + sp*i);	
  133.          if(pi&&x==prevx) { //простенькая оптимизация, дабы не генерить кучу точек друг под дружкой	
  134.             pi.style.height=(pi.offsetHeight+prnt.plotter.offsetHeight)+"px";	
  135.             if(sign<0) pi.style.top=(pi.offsetTop-prnt.plotter.offsetHeight)+"px";	
  136.          } else {	
  137.             pi=prnt.plotter.cloneNode(true);	
  138.             pi.className="plotter_interpolation";	
  139.             pi.style.visibility="visible";	
  140.             pi.style.left=x+"px";	
  141.             y=Math.round(prevp.offsetTop + prnt.plotter.offsetHeight*sign*(i+1))	
  142.             pi.style.top=y+"px";	
  143.             if(sign<0&&y>prevp.offsetTop) alert(prevp.offsetTop+", "+y);	
  144.          prnt.area.appendChild(pi);	
  145.             d.points.push(pi);	
  146.             prevx=pi.offsetLeft;	
  147.          }	
  148.       }	
  149.     }	
  150.     prevp=p;	
  151.     pos++;	
  152.   }	
  153. }	
  154. /**	
  155. * Поставить мелок. Аргументом принимаем HTML элемент, им может быть что угодно,	
  156. * от картинки, до целой страницы(шутка ;-))	
  157. */	
  158. PlotterArea.prototype.setPlotter=function(pen) {	
  159.   if(!pen||pen.nodeType!=1) throw "PlotterArea.setPlotter: IlligalArgumentException: pen is not a HTML element";	
  160.   this.plotter=pen;	
  161. }	
  162. /**	
  163. * Достать график по имени, полученный график можно затем скрыть или удалить.	
  164. */	
  165. PlotterArea.prototype.getDrawing=function(name) {	
  166.   return (typeof(this.drawings["~"+name])=="object")? this.drawings["~"+name]: null;	
  167. }	
  168. //=============================- Test -============================	
  169. var area;	
  170. function drawSinus() {	
  171.   area=new PlotterArea(document.getElementById("graph"));	
  172.   try {	
  173.     area.draw("sinus", Math.sin, 0, 0.1, 0.9);	
  174.   } catch(e) {	
  175.     alert(e.toString());	
  176.   }	
  177. }	
  178. function removeSinus() {	
  179.   if(area) {	
  180.     var d=area.getDrawing("sinus");	
  181.     if(d.initing) alert("График сейчас рисуеться, я бы не рискнул его остановить =))");	
  182.     else d.remove();	
  183.   }	
  184. }	
  185. //-->	
  186. </script>	
  187. </head>	
  188. <body>	
  189. <div style="width: 100%; height: 100%; text-align: center;">	
  190. <h3>Движение по траектории синуса</h3>	
  191. <button onclick="drawSinus()">Вперёд</button>&nbsp;<button onclick="removeSinus()">Удалить график</button><br><br>	
  192. <div id="graph" class="plotterarea">	
  193. <div style="position: absolute; font-size: 1px; width: 100%; height:2px; background-color: black; left: 0px; top: 50%;"</div>	
  194. </div>
  195. </body>	
  196. </html>
По точкам с определенным шагом рисует, интерполирует заданный график.

Найдено на forum.vingrad.ru
Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

+добавить реализацию