Gremlin92
@Gremlin92
Целеустремленный

Как рисовать графики функций?

Есть вот такой код, который считает метод прогонки
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <script type="application/javascript">
	function f1(t)
	{
		return 1-t;
	}
	function f2(t)
	{
		return t;
	}
	function f3(t)
	{
		return (-1/6)*t*(t-1)*(t-2);
	}
	function f4(t)
	{
		return (1/6)*t*(t-1)*(t+1);
	}
	function f(x)
	{
		return x*Math.exp(-x);
	}
	var left=0,right=2;
	var x1=[],y1=[],a=[],b=[],c=[],d=[],u=[],v=[],y2=[],x=[];
	var N=10,h=(right-left)/N,i=-1;
	for(var x1=left;x1<=right;x1+=h)
		y1[++i] = -2*Math.exp(-x1)+Math.exp(-x1)*x1;
	a[1]=1;
	a[N]=1;
	b[1]=0;
	b[N]=0;
	c[1]=0;
	c[N]=0;
	d[1]=y1[0];
	d[N]=y1[y1.length-1];
	i=-1;
	for(var x1=left;x1<=right;x1+=h)
		y1[++i] = f(x1);
	alert(y1);	
	for(var i=2;i<N;i++)
	{
		a[i]=4;
		b[i]=1;
		c[i]=1;
		d[i]=6*(y1[i-1]-2*y1[i]+y1[i+1])/h;
	}
	u[1] = d[1]/a[1];
	v[1]=-b[1]/a[1];		
   	
	for(i=2;i<N;i++)
	{
		u[i]=(d[i]-c[i]*u[i-1])/(c[i]-v[i-1]+a[i]);
		v[i]=-b[i]/(c[i]*v[i-1]+a[i]);	
	}

	for(i=0;i<=N;i++)
		x[i] = i*h+left;
	alert(x);

	v[N]=0;
	u[N]=-1;
	y2[N]=d[N];
	for(i=N-1;i>-1;i--)
	{
		y2[i]=v[i]*y2[i+1]+u[i];
	}
	var s=[];
	var count=-1;
	for(var i=0;i<N;i++)
	{
		s[i] = 0;
		for(var xx=x[i];xx<=x[i+1];xx+=0.01)
		{
			t = (xx-x[i])/h;
			s[++count] = y1[i]*f1(t)+y1[i+1]*f2(t)+y2[i]*h*f3(t)+y2[i+1]*h*f4(t);
		}
	}

	alert(s);
	function draw() {
      		var canvas = document.getElementById('canvas');
	      	if (canvas.getContext) {
        		var ctx = canvas.getContext('2d');

    			ctx.beginPath();
    			ctx.moveTo(0, y1[0]);
	    		for(i=1;i<y1.length;i++)
				ctx.lineTo(100*i,100*Math.abs(y1[i]));
    			//ctx.closePath();
			ctx.strokeStyle = '#ff0000';
	    		ctx.stroke();

    			ctx.beginPath();
    			ctx.moveTo(0, s[0]);
	    		for(i=1;i<=s.length;i++)
				ctx.lineTo(5*i,100*Math.abs(s[i]));

			ctx.strokeStyle = '#00ff00';
	    		ctx.stroke();
      	}
   }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="1000" height="400" border="black"></canvas>
 </body>
</html>

Вопрос в том что мне приходится сверять графики функций через канву, где начальная точка находится в левом верхнем углу, а мне нужно рисовать как в тетради, есть конечно преобразование координат из экранных в бумажные и наоборот, но придется самому рисовать оси абсцисс и ординат и риовать текстом легенды и прочее, есть ли способ проще?
  • Вопрос задан
  • 1331 просмотр
Пригласить эксперта
Ответы на вопрос 2
sergiks
@sergiks Куратор тега JavaScript
♬♬
График + JS = D3js

Придётся немного времени потратить «въехать», но выигрыш стоит того: усложнения, интерактивность, масштабирование, оси, цвета.
Ответ написан
NeiroNx
@NeiroNx
Программист
Я бы взял Flotr2, он чисто для графиков.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы