JavaScript/Tutorials/Funktionsplotter

Es wird ein Script vorgestellt, das mathematische Funktionen über Inputelemente einliest und grafisch darstellt. Für die grafische Darstellung wird das Canvas-Element verwendet.

Das Script besteht aus dem Grafikobjekt grafik, dem Plotobjekt plot und dem Funktionsplotter.

Das Grafikobjekt

Das Grafikobjekt ist die Schnittstelle zur Canvas-API.

SW.grafik(grafikelement): legt das Canvas-Element an.; grafikelement: ID des Elements oder Referenz auf das Element, in dem das Canvas-Element angelegt wird.; SW.grafik definiert die Methoden:

.setwidth(width): setzt die Linienstärke.; width: Linienstärke in Pixeln.

.line(xs,ys,xe,ye,color): zeichnet eine Linie von (xs,ys) nach (xe,ye) in Farbe color.; xs,ys: Koordinaten des Startpunkts in Pixeln,; xe,ye: Koordinaten des Endpunkts in Pixeln,; color: Linienfarbe im css-Format.

.polyline(points,color): zeichnet einen Linienzug.; points: Array der Form [{x: xwert, y: ywert},{…},…] mit den Koordinaten der Stützpunkte in Pixeln.; color: Linienfarbe im css-Format.

.polyfill(points,color,a): zeichnet einen Linienzug. Die vom Linienzug umschlossene Fläche wird eingefärbt.; points: Array der Form [{x: xwert, y: ywert},{…},…] mit den Koordinaten der Stützpunkte in Pixeln.; color: Füllfarbe im css-Format.; alpha: Transparenz, 0<=alpha<=1

.text(x,y,size,color,text,align,direction): gibt Text aus.; x,y: Koordinaten des Bezugspunkts in Pixeln,; size: Texthöhe im css-Format; color: Linienfarbe im css-Format.; align: String aus zwei Buchstaben, gibt die Lage des Bezugspunkts relativ zum Text an. Der erste Buchstabe darf die Werte l, m, oder r annehmen für links, mitte oder rechts. Der zweite Buchstabe darf die Werte o, m oder u annehmen für oben, mitte oder unten.; direction: gibt die Laufrichtung des Textes an, darf die Werte h und v für horizontal und vertikal annehmen.

.del(): löscht die Grafik.

Das folgende Beispiel zeigt das Grafikobjekt sowie seine Anwendung.

Beispiel ansehen …

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plottet Funktionen">
<title>Test Grafikobjekt</title>

<style>
  #plotarea { background-color:#ffffff; width:300px; height:300px; border: 1px solid black }
</style>

<script>
"use strict";

var SW = {};

// Das Grafikobjekt
SW.grafik = function(grafikelement) {
  // Canvas in Größe des "grafikelement" anlegen
  if(typeof grafikelement == "string") grafikelement = document.getElementById(grafikelement);
  this.w = grafikelement.offsetWidth;
  this.h = grafikelement.offsetHeight;
  var cv = document.createElement("canvas");
  cv.width = this.w;
  cv.height = this.h;
  //cv.style.position = "absolute";
  grafikelement.appendChild(cv);
  var context = cv.getContext("2d"); 
  this.w = context.canvas.width;
  this.h = context.canvas.height;
  context.lineWidth = 1;
  context.globalAlpha = 1.0;
  
  // Linienstärke setzen
  this.setwidth = function(width) {
    context.lineWidth = width;
  } // setwidth
  
  // Linie von (xs,ys) nach (xe,ye) in Farbe color zeichnen
  this.line = function(xs,ys,xe,ye,color) {
    xs=Math.round(xs); xe=Math.round(xe);
    ys=Math.round(ys); ye=Math.round(ye);
    context.strokeStyle = color;
    context.beginPath();
    context.moveTo(xs,this.h-ys);
    context.lineTo(xe,this.h-ye);
    context.stroke();
  } // line

  // Polylinie mit den Werten in points in Farbe color zeichnen
  this.polyline=function(points,color) { 
    context.strokeStyle = color;
    context.beginPath();
    context.moveTo(Math.round(points[0].x),this.h-Math.round(points[0].y));
    for(var i=1,l=points.length;i<l;i++) 
      context.lineTo(Math.round(points[i].x),this.h-Math.round(points[i].y));
    context.stroke();
  } // polyline

  // Polylinie mit den Werten in points zeichnen
  // Die von der Polylinie umschlossene Fläche wird in Farbe color mit Alphawert alpha eingefärbt
  this.polyfill=function(points,color,alpha) { 
    context.fillStyle = color;
    context.globalAlpha = alpha;
    context.beginPath();
    context.moveTo(Math.round(points[0].x),this.h-Math.round(points[0].y));
    for(var i=1,l=points.length;i<l;i++) 
      context.lineTo(Math.round(points[i].x),this.h-Math.round(points[i].y));
    context.fill();
    context.globalAlpha = 1;
  } // polyfill
  
  // Text an (x,y) ausgeben
  // size: Schriftgröße
  // text: Text
  // align: Bezug für (x,y), zwei Buchstaben, z.B. lu für links unten, s. case
  // diretion: Textrichtung: v für vertikal, sonst horizontal
  this.text=function(x,y,size,color,text,align,direction) {
    var align_h = "m";
    var align_v = "m";
    if(align && align.length) {
      align_h = align.substr(0,1);
      if(align.length>1) align_v = align.substr(1,1);
    }
    context.save();
    context.translate(x,this.h-y);
    if(direction && direction=="v") 
      context.rotate(1.5*Math.PI);
    switch(align_h) {
      case "l": context.textAlign = "start"; break;
      case "m": context.textAlign = "center"; break;
      case "r": context.textAlign = "end"; break;
      default:  context.textAlign = "start"; break;
    }
    switch(align_v) {
      case "o": context.textBaseline = "top" ; break;
      case "m": context.textBaseline = "middle" ; break;
      case "u": context.textBaseline = "bottom" ; break;
      default:  context.textBaseline = "bottom" ; break;
    }
    context.font = size+" sans-serif";
    context.fillStyle = color;
    context.fillText(text,0,0);
    context.restore();
  } // text

  // Canvas löschen
  this.del=function() {
    context.clearRect(0, 0, this.w, this.h);
  } // del
} // grafik


window.addEventListener("DOMContentLoaded",function() {
  var grafik = new SW.grafik("plotarea");
  grafik.line(20,20,280,40,"black");
  var werte = [{x:20 ,y:25 },{x:15 ,y:290 },{x:290 ,y:250 },{x:270 ,y:100 },{x:200 ,y:50 }];
  grafik.setwidth(3);
  grafik.polyline(werte,"green");
  werte = [{x:70 ,y:70 },{x:70 ,y:230 },{x:230 ,y:230 },{x:230 ,y:70 }];
  grafik.polyfill(werte,"red",0.2);
  grafik.text(70,70,"0.8em","blue","Text_ro","ro","h"); // Referenzpunkt rechts oben
  grafik.text(70,70,"1em","blue","Text_lu","lu","h"); // Referenzpunkt links unten
  grafik.text(230,150,"1.5em","blue","Text_mm","mm","v"); // Referenzpunkt mitte mitte
});
  
</script>

</head>
<body>
  <h1>Test Grafikobjekt</h1>
  <figure id="plotarea"></figure>
</body>
</html>

Das Plotobjekt

Das Plotobjekt erstellt das Diagramm mit Achsen und Achsenbeschriftung.

SW.plot(feld,xstr,ystr): legt den Bereich für das Diagramm an.; Feld: ID des Elements oder Referenz auf das Element, in dem das Diagramm angelegt wird.; xstr, ystr: Bezeichner der Objektelemente mit den x- und y-Werten im Datenarray. Defaultwerte sind x und y. Das Datenarray sieht dann so aus: [{x: xwert, y: ywert}{...},...]

sw.plot definiert die Methoden:

.scale(daten): ermittelt zu den Werten im Array daten die kleinsten und größten Werte.; a: Array der Form [{xstr: xwert, ystr: ywert}{...},...]

.clear(): löscht das Diagramm

.frame(x0,y0,xtext,ytext): legt das Achsenkreuz an.; x0, y0: Koordinaten der linken unteren Ecke in Pixel.; xtext, ytext: Beschriftung der Achsen.

.plot(daten,color) Plottet die Daten.: daten: Array der Form [{xstr: xwert, ystr: ywert}{...},...]; color: Linienfarbe im css-Format.

Weitere Eigenschaften und deren Defaultwerte:

.ticwidth: Linienstärke der Gitterlinien (1)
.linewidth: Linienstärke der Plotlinien (1)
.borderwidth: Linienstärke des Rahmens um den Plot (2)
.framecol: Farbe des Rahmens ("black")
.gridcol: Farbe der Gitterlinien ("gray")
.labelcol: Farbe der Achsenbeschriftung ("black")
.fillopac: Deckkraft der Füllfarbe unter der Plotlinie (0.1)

Beispiel ansehen …

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plottet Funktionen">
<title>Test Plotobjekt</title>

<style>
  #plotarea { background-color:#ffffff; margin:0; height:calc(100vh - 7em); min-height:300px; }
</style>

<script>
"use strict";

var SW = {};

// Hilfsfunktionen

if(!Math.log10) Math.log10 = function(x) { return Math.log(x)/Math.LN10; };

// Das Grafikobjekt
SW.grafik = function(grafikelement) {
  // s. oben
}

// Das Plotobjekt
// feld ist das Objekt bzw. dessen Id, in dem das Diagramm erstellt werden soll
// xstr und ystr geben die Bezeichner der Objektelemente mit den x- und y-Werten im Datenarray an.
// Defaultwerte sind x und y. Das Datenarray sieht dan so aus: [{x:xwert,y:ywert}{...},...]
SW.plot = function(feld,xstr,ystr) {
  // Defaultwerte
  this.ticwidth = 1;
  this.linewidth = 1;
  this.borderwidth = 2;
  this.framecol = "black";
  this.gridcol = "gray";
  this.labelcol = "black";
  this.fillopac = 0.1;
  
  // Erstellt ein figure-Element in "parentnode" bei (x,y) mit Größen w und h
  var makegraele = function(parentnode,id,x,y,w,h) {
    var ele = document.createElement("figure");
    ele.style.position = "absolute";
    ele.style.margin = "0";
    if(typeof id == "string" && id.length) ele.id = id;
    if(typeof x == "number") ele.style.left = x + "px";
    if(typeof y == "number") ele.style.top = y + "px";
    if(typeof w == "number") ele.style.width = w + "px";
    if(typeof h == "number") ele.style.height = h + "px";
    parentnode.appendChild(ele);
    return ele;
  } // makegraele
  
  // Plotbereich anlegen
  if(typeof feld == "string") feld = document.getElementById(feld);
  feld.innerHTML = "";
  var w = feld.offsetWidth;
  var h = feld.offsetHeight;
  var ifeld = makegraele(feld,"","","",w,h);

  // Einige Variablen
  var xobj = xstr?xstr:"x";
  var yobj = ystr?ystr:"y";
  var xmin=0,xmax=0,ymin=0,ymax=0;
  var xfak=0,yfak=0;
  var dx,dy,fx,fy;
  var gr = null;
  var xlabel = null;
  var ylabel = null;

  // Zu den Werten in a xmin, xmax, ymin und ymax ermiteln
  this.scale = function(daten) {
    if(xmin==xmax) {
      xmax = xmin = daten[0][xobj];
      ymax = ymin = daten[0][yobj];
    }
    for(var i=1;i<daten.length;i++) {
      var t = daten[i];
      if(t[xobj]<xmin) xmin = t[xobj];
      if(t[xobj]>xmax) xmax = t[xobj];
      if(t[yobj]<ymin) ymin = t[yobj];
      if(t[yobj]>ymax) ymax = t[yobj];
    }
  } // scale
  
  // Plotbereich leeren
  this.clear = function() {
    ifeld.innerHTML = "";
    xmax = xmin = ymax = ymin = xfak = yfak = 0;
  } // clear

  // Achsenkreuz, Tics und Beschriftung, linke untere Ecke bei (x0,y0)
  // xtext und ytext sind die Beschriftungen der Achsen
  this.frame = function(x0,y0,xtext,ytext) {
    // Die Bereiche für das Diagramm und die Achsenbeschriftungen anlegen
    ifeld.innerHTML = "";
    this.pele = makegraele(ifeld,"",x0,0,w-x0,h-y0);
    if(xtext.length) xlabel = new SW.grafik(makegraele(ifeld,"",x0,h-y0,w-x0,y0));
    if(ytext.length) ylabel = new SW.grafik(makegraele(ifeld,"",0,0,x0,h-y0));
    gr = new SW.grafik(this.pele);
    // Achsenbeschriftungen
    if(xtext.length) xlabel.text(xlabel.w/2,0,".9em",this.labelcol,xtext,"mu","h"); 
    if(ytext.length) ylabel.text(10,ylabel.h/2,".9em",this.labelcol,ytext,"mm","v");
    // Abstand der Tics auf glatte Zahlen (1 2 5 0) für x-Achse legen
    if(xmax==xmin) { xmin -= 0.5; xmax += 0.5; }
    dx = (xmax - xmin)/100;    
    xmin -= dx; xmax += dx;
    dx = xmax - xmin;
    fx = Math.pow(10,Math.floor(Math.log10(dx))-1);
    xmin = Math.floor(xmin/fx)*fx;
    xmax = Math.ceil(xmax/fx)*fx;
    xfak = gr.w/(xmax-xmin);
    var tx = ticdist(100*dx/gr.w);
    var mxmin = Math.ceil(xmin/tx)*tx;
    // Tics und Zahlen 
    gr.setwidth(this.ticwidth);
    for(var x=mxmin;x<=xmax;x+=tx) {
      var xx = (x-xmin)*xfak;
      gr.line(xx,0,xx,gr.h,this.gridcol);
      if(xtext.length && xx<(gr.w-5) && xx>5) 
        xlabel.text(xx,xlabel.h-2,".8em",this.labelcol,myround(x,tx),"mo","h");
    }
    // Abstand der Tics auf glatte Zahlen (1 2 5 0) für y-Achse legen
    if(ymax==ymin) { ymin -= 0.5; ymax += 0.5; }
    dy = (ymax - ymin)/100; 
    ymin -= dy; ymax += dy;
    dy = ymax - ymin;
    fy = Math.pow(10,Math.floor(Math.log10(dy))-1);
    ymin = Math.floor(ymin/fy)*fy;
    ymax = Math.ceil(ymax/fy)*fy;
    yfak = gr.h/(ymax-ymin);
    var ty = ticdist(gr.h<250 ?  50*dy/gr.h : 100*dy/gr.h);
    var mymin = Math.ceil(ymin/ty)*ty;
    // Tics und Zahlen 
    for(var y=mymin;y<=ymax;y+=ty) {
      var yy = (y-ymin)*yfak;
      gr.line(0,yy,gr.w,yy,this.gridcol);
      if(ytext.length && yy<(gr.h-5) && yy>5) 
        ylabel.text(ylabel.w-2,yy,".8em",this.labelcol,myround(y,ty),"rm","h");
    }
    gr.setwidth(this.borderwidth);
    gr.line(   0,   0,gr.w,   0,this.framecol);
    gr.line(gr.w,   0,gr.w,gr.h,this.framecol);
    gr.line(gr.w,gr.h,   0,gr.h,this.framecol);
    gr.line(   0,gr.h,   0,   0,this.framecol);
  } // frame

  // Daten Plotten
  // daten: Datenarray mit Objekten mit den x- und y-Werten
  // color Diagrammfarbe
  this.plot = function(daten,color) {
    var arr=[];
    for(var i=0,l=daten.length;i<l;i++)
      arr.push({x:(daten[i][xobj]-xmin)*xfak, y:(daten[i][yobj]-ymin)*yfak});
    if(this.fillopac>0) {
      var y0;
      if(ymax*ymin<=0) y0 = -ymin*yfak ; 
      else if(ymin>0) y0 = 1;
      else y0 = h-1;
      arr.push({x:(daten[l-1][xobj]-xmin)*xfak,y:y0});
      arr.push({x:(daten[0][xobj]-xmin)*xfak,y:y0});
      arr.push({x:(daten[0][xobj]-xmin)*xfak,y:(daten[0][yobj]-ymin)*yfak});
      gr.polyfill(arr,color,this.fillopac);
      arr.length -= 3;
    }
    gr.setwidth(this.linewidth);
    gr.polyline(arr,color);
  } // plot
  
  // Hilfsfunktionen zum Runden
  var myround = function(z,d) { 
    var l10 = Math.floor(Math.log10(d));
    var f = Math.pow(10,l10); 
    var zz = Math.round(z/f)*f;
    var zzz = Number(zz.toPrecision(15)).toString(10);
    return zzz; 
  }
  
  // Hilfsfunktion zum berechnen des Abstands der Achsen-Tics, Abstände auf 1 2 5 0 gerundet
  var ticdist = function(td) { 
    var td10 = Math.pow(10,Math.floor(Math.log10(td)));
    td = Math.round(td/td10);
    td = Number(String(td).replace(/3/,"2").replace(/[4567]/,"5").replace(/[89]/,"10"));
    td *= td10;
    return td;
  } // ticdist
} // plot

window.addEventListener("DOMContentLoaded",function() {
  var daten = [],
    xmin = -Math.PI,
    xmax = Math.PI,
    npt = 1000;
  var dx = ( xmax - xmin ) / npt;    
  for(var x=xmin;x<=xmax;x+=dx) daten.push( { x: x, y: Math.sin(x) } );
  var plt = new SW.plot("plotarea") ;
  plt.scale(daten);
  plt.frame(50,35,"x","sin(x)");
  plt.plot(daten,"red");
});
</script>

</head>
<body>
  <h1>Test Plotobjekt</h1>
  <figure id="plotarea"></figure>
</body>
</html>

Der Funktionsplotter

Der Funktionsplotter befindet sich im Eventhandler für das Ereignis DOMContentLoaded. Hier werden die Referenzen auf die HTML-Elemente ermittelt und die benötihten Eventhandler angelegt.

In der Funktion fkt_plotter werden dann die Inputfelder mit den Funktionen und den Min- und Maxwerten für die X-Achse ausgelesen, die Funktionswerte berechnet und der Plot erstellt. Zusätzlich wird noch in einem versteckten Div-Element eine gekürzte Wertetabelle für Screenreader angelegt.

Leider ist canvas pixelorientiert. Im Beispiel zur Plotfunktion wird zwar die Größe des Plotbereichs in Abhängigkeit von der Größe des Viewports festgelegt, aber die Grafik behält ihre Größe bei nachträglicher Änderung der Viewportgröße. Daher wurde im Funktionsplotter auch noch ein Eventhandler für das Ereignis resize erstellt, der den Plot löscht und mit den neuen Maßen neu anlegt.

Das folgende Beispiel zeigt den Funktionsplotter.

Beispiel ansehen …

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plottet Funktionen">
<title>Funktionsplot</title>

<style>
  #plotarea { background-color:#ffffff; margin:0; height:calc(100vh - 19em); min-height:300px; }
  #plotter { margin-bottom: 1em; border: none }
  #plotter div { display:inline-block; vertical-align:top }
  #plotter div:nth-child(1) label { display:block; }
  #plotter div:nth-child(2) button { display:block; margin: 1em 0 0 5em;}  
  #idxmin, #idxmax { text-align:right; width:10em; }
  #fkt1, #fkt2, #fkt3 { width:30em; }
</style>

<script>
"use strict";

var SW = {};

if(!Math.log10) Math.log10 = function(x) { return Math.log(x)/Math.LN10; };

// Das Grafikobjekt
SW.grafik = function(grafikelement) {
  // s. oben
}

// Das Plotobjekt
SW.plot = function(feld,xstr,ystr) {
  // s. oben
}

window.addEventListener("DOMContentLoaded",function() {
  // Zahlen einlesen bei Bedarf korrigieren
  var get_num = function(e) {
    var num = e.value;
    if (isNaN(num)) { num = num.replace(/,/g,"."); }
    if (isNaN(num) || num.length==0 ) { num = 0.0; e.value = num; }
    return parseFloat(num);
  }
  // Der Funktionsplotter
  var fkt_plotter = function() {
    var gl = [];
    // Funktionen lesen
    for(var i=0;i<e_fkt.length;i++ ) gl[i] = e_fkt[i].value.replace(/,/g,".");
    // xmin und xmax lesen, prüfen und bei Bedarf korrigieren
    var xmin = get_num(e_xmin);
    var xmax = get_num(e_xmax);
    if (xmax==xmin) {
      xmin -= 0.5; xmax += 0.5;
      e_xmin.value = xmin;
      e_xmax.value = xmax;
    }
    var dx = (xmax - xmin)/npt;
    if (dx<0) {
      dx = -dx;
      var t=xmax;
      xmax = xmin;
      xmin = t;
      e_xmin.value = xmin;
      e_xmax.value = xmax;
    }
    // Werte für Diagramm berechnen ...
    var daten = [];
    for(var i=0;i<gl.length;i++) {
      try { 
        if(gl[i].length && gl[i].search(/\S/)!=-1) {
          var fun = new Function("x","with(Math){return("+gl[i]+")}");
          var ar= [];
          for(var x=xmin;x<=xmax;x+=dx) ar.push( { x: x, y: fun(x) } );
          daten.push(ar);
        }
      }
      catch(e) { 
        alert("Fehler in der Formel Nr "+(i+1)+":\n\n"+gl[i]+"\n\n"+e); 
      }
    }
    // ... und plotten
    plt.clear();
    plt.fillopac = .3;
    for(var i=0;i<daten.length;i++) if(!isNaN(daten[i][0].y)) plt.scale(daten[i]);
    plt.frame(50,35,"x","y");
    for(var i=0;i<daten.length;i++) if(!isNaN(daten[i][0].y)) plt.plot(daten[i],cols[i]);
    // ... und Ausgabe in versteckter Tabelle für Screenreader
    var tabelle = "";
    for(var j=0;j<daten.length;j++) {
      tabelle += "<table>";
      tabelle += "<caption>Wertetabelle für Funktion "+(j+1)+"</caption>";
      tabelle += "<thead><tr><th colspan='2'>"+gl[j]+"</th></tr>";
      tabelle += "<tr><th>x</th><th>y"+j+"</th></tr></thead>";
      tabelle += "<tbody>";
      for(var i=0;i<daten[j].length;i+=npt/20 ) 
        tabelle += "<tr><td>"+daten[j][i].x.toFixed(3)+"</td><td>"+daten[0][i].y.toFixed(3)+"</td></tr>";
      tabelle += "</tbody>"
      tabelle += "</table>";
    }
    e_wertetabelle.innerHTML = tabelle;
  } // fkt_plotter

  var i,j,e_plotarea,e_wertetabelle,e_fkt=[],e_xmin,e_xmax,plt,e_jsfkt,e_vdeffkt;
  var npt = 1000;
  var current = 0;
  var cols = ["#ff0000","#008000","#0000ff"];
  var vdef_fkt = { 
    AM: "(1-0.3*sin(x/4))*sin(3*x)",
    PM: "sin(3*x-2*sin(x/3))",
    "sin(x)/x": "sin(x)/x",
    sinh: "(exp(x)-exp(-x))/2",
    cosh: "(exp(x)+exp(-x))/2",
    tanh: "(exp(x)-exp(-x))/(exp(x)+exp(-x))",
    Puls: "(function(){var y=0;for(var ii=10;ii<30;ii++) y+=sin(ii*x);return y})(x)"
  };
  var js_fkt = {
    abs: "abs(x)",
    acos: "acos(x)",
    asin: "asin(x)",
    atan: "atan(x)",
    cos: "cos(x)",
    exp: "exp(x)",
    log: "log(x)",
    sin: "sin(x)",
    sqrt: "sqrt(x)",
    tan: "tan(x)",
  };

  // Referenzen
  e_plotarea = document.getElementById("plotarea");
  e_wertetabelle = document.getElementById("wertetabelle");
  e_xmin = document.getElementById("idxmin");
  e_xmax = document.getElementById("idxmax");
  e_jsfkt = document.querySelectorAll("#jsfkt button"); 
  e_vdeffkt = document.querySelectorAll("#vdeffkt button"); 
  for(i=0;i<3;i++) {
    e_fkt[i] = document.getElementById("fkt"+(i+1));
    document.getElementById("f"+(i+1)).style.color = cols[i];
  }
  // Die Eventhandler
  document.getElementById("plotbutton").addEventListener("click",fkt_plotter);
  document.getElementById("fkt1").addEventListener("click",function(){ current = 0 });
  document.getElementById("fkt2").addEventListener("click",function(){ current = 1 });
  document.getElementById("fkt3").addEventListener("click",function(){ current = 2 });
  for(i=0;i<e_vdeffkt.length;i++) e_vdeffkt[i].addEventListener("click",function() { 
    e_fkt[current].value = vdef_fkt[this.innerHTML] });
  for(i=0;i<e_jsfkt.length;i++) e_jsfkt[i].addEventListener("click",function() { 
    e_fkt[current].value += "+"+ js_fkt[this.innerHTML] });
  window.addEventListener("resize",function() {
    plt = new SW.plot(e_plotarea) ;
    fkt_plotter();
  });
  // Plottbereich anlegen und Startwerte plotten
  plt = new SW.plot(e_plotarea) ;
  fkt_plotter();
});
</script>

</head>
<body>
  <h1>Funktionsplot</h1>
  <p>Stellt mathematische Funktionen grafisch dar.</p>
  <figure id="plotarea"></figure>
  <output hidden id="wertetabelle" aria-live="polite"></output>

  <fieldset id="plotter">
  <div aria-live="polite">
    <label id="f1">f<sub>1</sub>(x) = <input type="text" id="fkt1" value="sin(x)/x"></label>
    <label id="f2">f<sub>2</sub>(x) = <input type="text" id="fkt2" value="sin(x)"></label>
    <label id="f3">f<sub>3</sub>(x) = <input type="text" id="fkt3" value="cos(x)"></label>
  </div>
  <div>
    <label>xmin = <input lang="en" type="number" step="any" id="idxmin" value="-20"></label>
    <label>xmax = <input lang="en" type="number" step="any" id="idxmax" value="20"></label>
    <button id="plotbutton">Plotten</button>
  </div>
  </fieldset>

  <p id="vdeffkt">Vordefinierte Funktionen:
    <button>AM</button>,
    <button>PM</button>,
    <button>sin(x)/x</button>,
    <button>sinh</button>,
    <button>cosh</button>,
    <button>tanh</button> und
    <button>Puls</button>.
  </p>  

  <p id="jsfkt">Javascript unterstützt folgende Funktionen:
    <button>abs</button>,
    <button>acos</button>,
    <button>asin</button>,
    <button>atan</button>,
    <button>cos</button>,
    <button>exp</button>,
    <button>log</button>,
    <button>sin</button>,
    <button>sqrt</button> und
    <button>tan</button>.
  Bitte den Definitionsbereich der Funktionen beachten.</p>
</body>
</html>

JavaScript/Tutorials/Funktionsplotter

Inhaltsverzeichnis

Das Grafikobjekt

Das Plotobjekt

Der Funktionsplotter

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Mehr

Suche

Starten

Werkzeuge

Mitmachen

SELFHTML