Custom-HTML-Element zum Darstellen von XY-Daten und Funktionsgraphen. Es wurde besonderes Augenmerk auf das Hauptgitter gelegt: Es soll in Zentimeter-Einheiten erstellt werden. Achtet man beim Ausdrucken darauf, dass der Druckertreiber keine Skalierungen mehr vornimmt, wird das Hauptgitter auf dem Blatt in Zentimetereinheiten gedruckt.
Es ist ein einigermaßen moderner Browser mit Javascript- und SVG-Unterstützung von Nöten. Die Berechnungen, die für die Erstellung von Funktionsgraphen benötigt werden, werden mit Hilfe der Funktion evaluate von mathjs vorgenommen.
Lade die Datei lms-chart.js in ein geeignetes Verzeichnis und füge im head
deines HTML-Dokuments folgende Zeilen ein.
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.9.0/math.min.js"></script>
<script src="/pfad/zu/lms-chart.js"></script>
Ersetze bitte /pfad/zu/
mit einer korrekten URL.
Diese kleine Bibliothek stellt XY-Daten und Funktionsgraphen nur mit Hilfe von HTML in einem Diagramm dar. Das Diagramm wird mit SVG erzeugt. Achsenbeschriftung und Skalierungen werden mit CSS-grid platziert.
<lms-chart graph-expr-1="x^2"></lms-chart>
erzeugt das folgende Diagramm:
Skalierung, Koordinatengitter und Wertebereiche lassen sich mit HTML-Attributen einstellen. Achsenbeschriftungen und Titel des Diagramms können mit Hilfe von Slots angegeben werden. Der Standardslot wird direkt auf das Diagramm platziert.
Attribute, die für dieses Template relevant sind, beginnen entweder mit grid-
oder graph-
.
grid
-Attribute konfigurieren das Koordinatengitter, die Größe des Diagramms und die Skalierung der Achsen.
Attribut | Funktion | Beispiel | Standard |
---|---|---|---|
grid‑xmin grid‑ymin |
Untere Intervallgrenze der x- bzw. y-Werte | -4 | 0 |
grid‑xmax grid‑ymax |
Obere Intervallgrenze der x- bzw. y-Werte | 8 | 10 |
grid‑xsize grid‑ysize |
Größe des Hauptkästchens in cm | 2 | 1 |
grid‑xdelta grid‑ydelta |
Größe des Hauptgitters in x- bzw. y-Werten | 5 | 1 |
grid‑xsubdelta grid‑ysubdelta |
Größe des Untergitters in x- bzw. y-Werten | 0.1 | .2 |
grid‑xhidegrid grid‑yhidegrid |
Hauptgitter verbergen | true | false |
grid‑xhidesubgrid grid‑yhidesubgrid |
Untergitter verbergen | true | false |
grid‑xhidescale grid‑yhidescale |
Skalierung verbergen | true | false |
grid‑legendposition |
Platzierung der Legende im Diagramm (t, r, b, l, tr, tl, br, bl, none) | tr | tl |
grid‑xlegendpadding grid‑ylegendpadding |
Padding in CSS-Koordinaten | 5mm | 2mm |
Mit Hilfe der graph
-Attribute können Messwertepaare oder Funktionsgraphen dargestellt werden. Es muss entweder
das Attribut graph-values-[id]
oder graph-expr-[id]
gesetzt werden, damit ein Graph zu sehen ist.
Attribut | Funktion | Beispiel | Standard |
---|---|---|---|
graph‑values‑[id] |
Wertepaare in x,y-Koordinaten für Graph der ID id als zweidimensionales JSON-Array. |
[[0,0],[1,4],[2,6],[3,9]] | null |
graph‑expr‑[id] |
Mathematischer Ausdruck, der von math.js evaluiert werden kann. Muss x als Variable enthalten. | 2*sin(x) | null |
graph‑start‑[id] |
x-Startwert des Graphen mit der ID id . |
-4 | grid-xmin |
graph‑end‑[id] |
x-Endwert des Graphen mit der ID id . |
20 | grid-xmax |
graph‑step‑[id] |
Schrittweite der x-Werte zum Graphen mit der ID id . |
0.02 | grid-xsubdelta |
graph‑name‑[id] |
Der Name, der in der Legende für den Graphen mit der ID id angezeigt wird. Fehlt diese Angabe wird der Wert von id in der Legende angezeigt. |
Sinus | null |
graph‑nolegend‑[id] |
Graph wird nicht in die Legende eingetragen. | true | false |
graph‑symbol‑[id] |
Gibt an, wie der Graph zur ID id dargestellt werden soll (line, circle, cross, square, diamond, triangle). |
diamond | line |
graph‑linewidth‑[id] |
Die Liniendicke des Graphen zur ID id in CSS-Einheiten. |
2pt | 1.3pt |
graph‑symbolsize‑[id] |
Die Größe der Symbole des Graphen zur ID id in cm. |
0.1 | 0.15 |
graph‑strokecolor‑[id] |
Die Linienfarbe des Graphen zur ID id . |
magenta | blue |
graph‑fillcolor‑[id] |
Die Füllfarbe des Graphen zur ID id . |
cyan | null |
lmschart stellt sieben Slots zur Verfügung, die in der folgenden Tabelle erklärt sind.
Slot | Funktion | Beispiel |
---|---|---|
standardslot | Wird direkt auf dem Diagramm dargestellt | |
title |
Die Überschrift des Diagramms. | <div slot="title">Röntgenspektrum</div> |
xlabel |
Die Beschriftung der x-Achse. | <div slot="xlabel">Spannung U in V</div> |
ylabel |
Die Beschriftung der y-Achse. | <div slot="ylabel">Stromstärke I in A</div> |
legend‑before |
Text vor der Legende | <div slot="legend-before">Legende:</div> |
legend‑after |
Text nach der Legende | <div slot="legend-after">gemessen mit Spezialgerät</div> |
error |
Formatiert die Fehlermeldung. Nur zum internen Gebrauch gedacht. |
<lms-chart grid-legendposition="none"></lms-chart>
<lms-chart grid-ymax="2" grid-ymin="-2" graph-expr-1="sin(x)"></lms-chart>
<lms-chart graph-values-1="[[1,4],[2,4.9],[3,5.1],[4,5.5],[5,6.9],[6,6.8],[7,7.9],[8,7.9]]"
graph-symbol-1="diamond" graph-name-1="Konstantan">
<h3 slot="title">Spezifischer Widerstand</h3>
<div slot="xlabel">Drahtlänge l in cm</div>
<div slot="ylabel">Widerstand R in Ohm</div>
</lms-chart>
<lms-chart
graph-values-1='[[3.0,39.0],[3.1,40.0],[3.2,39.0],[3.3,33.0],[3.4,29.0],[3.5,27.0],[3.6,21.0],[3.7,19.0],[3.8,10.0],[3.9,13.0],[4.0,11.0],[4.1,8.0],[4.2,9.0],[4.3,6.0],[4.4,10.0],[4.5,6.0],[4.6,5.0],[4.7,9.0],[4.8,8.0],[4.9,10.0],[5.0,7.0],[5.1,4.0],[5.2,8.0],[5.3,4.0],[5.4,5.0],[5.5,6.0],[5.6,8.0],[5.7,8.0],[5.8,8.0],[5.9,7.0],[6.0,6.0],[6.1,13.0],[6.2,9.0],[6.3,10.0],[6.4,9.0],[6.5,8.0],[6.6,11.0],[6.7,12.0],[6.8,13.0],[6.9,12.0],[7.0,15.0],[7.1,14.0],[7.2,18.0],[7.3,24.0],[7.4,26.0],[7.5,33.0],[7.6,32.0],[7.7,41.0],[7.8,44.0],[7.9,53.0],[8.0,54.0],[8.1,55.0],[8.2,65.0],[8.3,63.0],[8.4,70.0],[8.5,70.0],[8.6,69.0],[8.7,83.0],[8.8,86.0],[8.9,99.0],[9.0,106.0],[9.1,134.0],[9.2,161.0],[9.3,159.0],[9.4,148.0],[9.5,122.0],[9.6,108.0],[9.7,100.0],[9.8,105.0],[9.9,116.0],[10.0,144.0],[10.1,169.0],[10.2,202.0],[10.3,222.0],[10.4,254.0],[10.5,348.0],[10.6,236.0],[10.7,138.0],[10.8,116.0],[10.9,130.0],[11.0,134.0],[11.1,128.0],[11.2,129.0],[11.3,136.0],[11.4,153.0],[11.5,139.0],[11.6,130.0],[11.7,143.0],[11.8,151.0],[11.9,145.0],[12.0,150.0],[12.1,155.0],[12.2,148.0],[12.3,146.0],[12.4,137.0],[12.5,154.0],[12.6,156.0],[12.7,144.0],[12.8,159.0],[12.9,155.0],[13.0,158.0],[13.1,163.0],[13.2,172.0],[13.3,151.0],[13.4,159.0],[13.5,137.0],[13.6,125.0],[13.7,123.0],[13.8,120.0],[13.9,139.0],[14.0,141.0],[14.1,134.0],[14.2,139.0],[14.3,129.0],[14.4,130.0],[14.5,125.0],[14.6,128.0],[14.7,124.0],[14.8,146.0],[14.9,135.0],[15.0,136.0],[15.1,117.0],[15.2,128.0],[15.3,129.0],[15.4,138.0],[15.5,124.0],[15.6,127.0],[15.7,129.0],[15.8,125.0],[15.9,132.0],[16.0,138.0],[16.1,120.0],[16.2,128.0],[16.3,132.0],[16.4,126.0],[16.5,125.0],[16.6,126.0],[16.7,123.0],[16.8,114.0],[16.9,125.0],[17.0,119.0],[17.1,115.0],[17.2,110.0],[17.3,107.0],[17.4,114.0],[17.5,123.0],[17.6,118.0],[17.7,123.0],[17.8,107.0],[17.9,125.0],[18.0,114.0],[18.1,113.0],[18.2,107.0],[18.3,115.0],[18.4,118.0],[18.5,130.0],[18.6,114.0],[18.7,112.0],[18.8,122.0],[18.9,107.0],[19.0,103.0],[19.1,101.0],[19.2,90.0],[19.3,95.0],[19.4,102.0],[19.5,87.0],[19.6,91.0],[19.7,86.0],[19.8,90.0],[19.9,96.0],[20.0,92.0],[20.1,94.0],[20.2,96.0],[20.3,96.0],[20.4,83.0],[20.5,98.0],[20.6,94.0],[20.7,126.0],[20.8,142.0],[20.9,125.0],[21.0,107.0],[21.1,89.0],[21.2,71.0],[21.3,85.0],[21.4,82.0],[21.5,72.0],[21.6,82.0],[21.7,79.0],[21.8,74.0],[21.9,68.0],[22.0,63.0],[22.1,67.0],[22.2,68.0],[22.3,58.0],[22.4,57.0],[22.5,62.0],[22.6,61.0],[22.7,62.0],[22.8,58.0],[22.9,60.0],[23.0,57.0],[23.1,46.0],[23.2,48.0],[23.3,47.0],[23.4,60.0],[23.5,55.0],[23.6,49.0],[23.7,52.0],[23.8,46.0],[23.9,38.0],[24.0,44.0],[24.1,44.0],[24.2,48.0],[24.3,43.0],[24.4,44.0],[24.5,60.0],[24.6,44.0],[24.7,55.0],[24.8,39.0],[24.9,42.0],[25.0,36.0],[25.1,35.0],[25.2,38.0],[25.3,33.0],[25.4,42.0],[25.5,36.0],[25.6,36.0],[25.7,40.0],[25.8,39.0],[25.9,39.0],[26.0,28.0],[26.1,30.0],[26.2,28.0],[26.3,33.0],[26.4,32.0],[26.5,30.0],[26.6,27.0],[26.7,32.0],[26.8,33.0],[26.9,24.0],[27.0,31.0],[27.1,31.0],[27.2,29.0],[27.3,26.0],[27.4,25.0],[27.5,29.0],[27.6,26.0],[27.7,20.0],[27.8,18.0],[27.9,18.0],[28.0,24.0],[28.1,28.0],[28.2,17.0],[28.3,20.0],[28.4,22.0],[28.5,22.0],[28.6,17.0],[28.7,21.0],[28.8,18.0],[28.9,15.0],[29.0,22.0],[29.1,21.0],[29.2,15.0],[29.3,23.0],[29.4,15.0],[29.5,17.0],[29.6,18.0],[29.7,15.0],[29.8,21.0],[29.9,18.0],[30.0,16.0],[30.1,17.0],[30.2,19.0],[30.3,16.0],[30.4,15.0],[30.5,23.0],[30.6,20.0],[30.7,16.0],[30.8,14.0],[30.9,11.0],[31.0,9.0],[31.1,16.0],[31.2,19.0],[31.3,20.0],[31.4,17.0],[31.5,16.0],[31.6,15.0],[31.7,10.0],[31.8,17.0],[31.9,21.0],[32.0,26.0],[32.1,29.0],[32.2,25.0],[32.3,26.0],[32.4,21.0],[32.5,21.0],[32.6,15.0],[32.7,16.0],[32.8,14.0],[32.9,17.0],[33.0,6.0],[33.1,19.0],[33.2,10.0],[33.3,13.0],[33.4,13.0],[33.5,18.0],[33.6,8.0],[33.7,13.0],[33.8,12.0],[33.9,15.0],[34.0,12.0],[34.1,13.0],[34.2,13.0],[34.3,15.0],[34.4,11.0],[34.5,13.0],[34.6,12.0],[34.7,13.0],[34.8,15.0],[34.9,13.0],[35.0,11.0],[35.1,14.0],[35.2,11.0],[35.3,8.0],[35.4,12.0],[35.5,10.0],[35.6,16.0],[35.7,13.0],[35.8,9.0],[35.9,12.0],[36.0,12.0],[36.1,10.0],[36.2,13.0],[36.3,10.0],[36.4,12.0],[36.5,12.0],[36.6,12.0],[36.7,15.0],[36.8,8.0],[36.9,14.0],[37.0,11.0],[37.1,11.0],[37.2,11.0],[37.3,11.0],[37.4,7.0],[37.5,14.0],[37.6,15.0],[37.7,11.0],[37.8,16.0],[37.9,4.0],[38.0,11.0],[38.1,9.0],[38.2,10.0],[38.3,6.0],[38.4,12.0],[38.5,11.0],[38.6,10.0],[38.7,11.0],[38.8,9.0],[38.9,8.0],[39.0,10.0],[39.1,13.0],[39.2,13.0],[39.3,10.0],[39.4,15.0],[39.5,9.0],[39.6,8.0],[39.7,11.0],[39.8,10.0],[39.9,8.0],[40.0,10.0]]'
graph-values-2='[[3.0,315.0],[3.1,304.0],[3.2,281.0],[3.3,242.0],[3.4,229.0],[3.5,195.0],[3.6,164.0],[3.7,128.0],[3.8,131.0],[3.9,123.0],[4.0,94.0],[4.1,87.0],[4.2,81.0],[4.3,68.0],[4.4,64.0],[4.5,56.0],[4.6,54.0],[4.7,56.0],[4.8,51.0],[4.9,62.0],[5.0,62.0],[5.1,61.0],[5.2,65.0],[5.3,81.0],[5.4,89.0],[5.5,92.0],[5.6,116.0],[5.7,117.0],[5.8,124.0],[5.9,118.0],[6.0,148.0],[6.1,156.0],[6.2,166.0],[6.3,156.0],[6.4,178.0],[6.5,185.0],[6.6,180.0],[6.7,171.0],[6.8,183.0],[6.9,194.0],[7.0,191.0],[7.1,202.0],[7.2,188.0],[7.3,194.0],[7.4,209.0],[7.5,191.0],[7.6,208.0],[7.7,226.0],[7.8,220.0],[7.9,206.0],[8.0,230.0],[8.1,232.0],[8.2,227.0],[8.3,239.0],[8.4,243.0],[8.5,253.0],[8.6,229.0],[8.7,237.0],[8.8,258.0],[8.9,281.0],[9.0,377.0],[9.1,452.0],[9.2,579.0],[9.3,622.0],[9.4,519.0],[9.5,331.0],[9.6,290.0],[9.7,301.0],[9.8,278.0],[9.9,284.0],[10.0,414.0],[10.1,541.0],[10.2,835.0],[10.3,1700.0],[10.4,2089.0],[10.5,1746.0],[10.6,855.0],[10.7,377.0],[10.8,302.0],[10.9,300.0],[11.0,311.0],[11.1,318.0],[11.2,313.0],[11.3,305.0],[11.4,300.0],[11.5,302.0],[11.6,314.0],[11.7,293.0],[11.8,318.0],[11.9,305.0],[12.0,322.0],[12.1,307.0],[12.2,310.0],[12.3,285.0],[12.4,313.0],[12.5,307.0],[12.6,323.0],[12.7,322.0],[12.8,337.0],[12.9,318.0],[13.0,341.0],[13.1,292.0],[13.2,311.0],[13.3,306.0],[13.4,334.0],[13.5,276.0],[13.6,259.0],[13.7,262.0],[13.8,269.0],[13.9,265.0],[14.0,264.0],[14.1,249.0],[14.2,268.0],[14.3,268.0],[14.4,260.0],[14.5,237.0],[14.6,231.0],[14.7,249.0],[14.8,247.0],[14.9,261.0],[15.0,235.0],[15.1,232.0],[15.2,231.0],[15.3,237.0],[15.4,222.0],[15.5,254.0],[15.6,243.0],[15.7,235.0],[15.8,259.0],[15.9,248.0],[16.0,241.0],[16.1,232.0],[16.2,230.0],[16.3,211.0],[16.4,228.0],[16.5,217.0],[16.6,238.0],[16.7,221.0],[16.8,219.0],[16.9,232.0],[17.0,196.0],[17.1,235.0],[17.2,204.0],[17.3,222.0],[17.4,215.0],[17.5,222.0],[17.6,190.0],[17.7,212.0],[17.8,200.0],[17.9,172.0],[18.0,204.0],[18.1,201.0],[18.2,222.0],[18.3,210.0],[18.4,241.0],[18.5,258.0],[18.6,235.0],[18.7,214.0],[18.8,205.0],[18.9,208.0],[19.0,190.0],[19.1,170.0],[19.2,180.0],[19.3,161.0],[19.4,173.0],[19.5,166.0],[19.6,185.0],[19.7,164.0],[19.8,141.0],[19.9,148.0],[20.0,138.0],[20.1,154.0],[20.2,159.0],[20.3,151.0],[20.4,160.0],[20.5,208.0],[20.6,267.0],[20.7,380.0],[20.8,460.0],[20.9,474.0],[21.0,369.0],[21.1,212.0],[21.2,166.0],[21.3,148.0],[21.4,120.0],[21.5,131.0],[21.6,133.0],[21.7,131.0],[21.8,131.0],[21.9,117.0],[22.0,124.0],[22.1,117.0],[22.2,106.0],[22.3,111.0],[22.4,117.0],[22.5,92.0],[22.6,103.0],[22.7,105.0],[22.8,107.0],[22.9,107.0],[23.0,100.0],[23.1,102.0],[23.2,96.0],[23.3,97.0],[23.4,99.0],[23.5,95.0],[23.6,103.0],[23.7,89.0],[23.8,104.0],[23.9,85.0],[24.0,88.0],[24.1,89.0],[24.2,88.0],[24.3,75.0],[24.4,81.0],[24.5,85.0],[24.6,93.0],[24.7,73.0],[24.8,80.0],[24.9,70.0],[25.0,85.0],[25.1,72.0],[25.2,77.0],[25.3,75.0],[25.4,70.0],[25.5,58.0],[25.6,75.0],[25.7,72.0],[25.8,59.0],[25.9,67.0],[26.0,62.0],[26.1,74.0],[26.2,53.0],[26.3,55.0],[26.4,58.0],[26.5,59.0],[26.6,69.0],[26.7,67.0],[26.8,60.0],[26.9,64.0],[27.0,59.0],[27.1,59.0],[27.2,47.0],[27.3,54.0],[27.4,52.0],[27.5,51.0],[27.6,49.0],[27.7,48.0],[27.8,60.0],[27.9,59.0],[28.0,52.0],[28.1,55.0],[28.2,70.0],[28.3,55.0],[28.4,47.0],[28.5,39.0],[28.6,53.0],[28.7,39.0],[28.8,38.0],[28.9,51.0],[29.0,46.0],[29.1,55.0],[29.2,44.0],[29.3,37.0],[29.4,42.0],[29.5,40.0],[29.6,40.0],[29.7,36.0],[29.8,40.0],[29.9,35.0],[30.0,46.0],[30.1,48.0],[30.2,38.0],[30.3,40.0],[30.4,33.0],[30.5,40.0],[30.6,37.0],[30.7,36.0],[30.8,35.0],[30.9,37.0],[31.0,36.0],[31.1,40.0],[31.2,33.0],[31.3,40.0],[31.4,38.0],[31.5,33.0],[31.6,44.0],[31.7,38.0],[31.8,53.0],[31.9,70.0],[32.0,106.0],[32.1,110.0],[32.2,98.0],[32.3,79.0],[32.4,53.0],[32.5,44.0],[32.6,41.0],[32.7,36.0],[32.8,32.0],[32.9,29.0],[33.0,31.0],[33.1,31.0],[33.2,32.0],[33.3,36.0],[33.4,28.0],[33.5,40.0],[33.6,39.0],[33.7,25.0],[33.8,32.0],[33.9,24.0],[34.0,34.0],[34.1,29.0],[34.2,29.0],[34.3,27.0],[34.4,38.0],[34.5,36.0],[34.6,29.0],[34.7,31.0],[34.8,31.0],[34.9,30.0],[35.0,27.0],[35.1,23.0],[35.2,34.0],[35.3,29.0],[35.4,27.0],[35.5,28.0],[35.6,29.0],[35.7,30.0],[35.8,20.0],[35.9,22.0],[36.0,27.0],[36.1,22.0],[36.2,26.0],[36.3,24.0],[36.4,26.0],[36.5,23.0],[36.6,28.0],[36.7,28.0],[36.8,28.0],[36.9,29.0],[37.0,26.0],[37.1,28.0],[37.2,24.0],[37.3,29.0],[37.4,22.0],[37.5,24.0],[37.6,23.0],[37.7,26.0],[37.8,26.0],[37.9,22.0],[38.0,19.0],[38.1,25.0],[38.2,21.0],[38.3,26.0],[38.4,25.0],[38.5,33.0],[38.6,21.0],[38.7,20.0],[38.8,27.0],[38.9,21.0],[39.0,27.0],[39.1,34.0],[39.2,28.0],[39.3,24.0],[39.4,29.0],[39.5,28.0],[39.6,26.0],[39.7,22.0],[39.8,18.0],[39.9,24.0],[40.0,21.0]]'
graph-name-1="25 kV"
graph-name-2="35 kV"
grid-legendposition="tr"
grid-xmax="40" grid-xdelta="5" grid-xsubdelta="1" grid-xsize="2"
grid-ymax="2200" grid-ydelta="250" grid-ysubdelta="50" grid-ysize="2">
<h3 slot="title">Röntgenspektrum (LiF)</h3>
<div slot="xlabel">Winkel theta in Grad</div>
<div slot="ylabel">Impulse pro Sekunde</div>
</lms-chart>
Für die Abbildung der Wertekoordinaten auf SVG-Koordinaten ist folgende Abbildung hilfreich:
Die schwarzen Achsen stellen das Koordinatensystem der realen Werte dar, so wie es normalerweise gezeichnet wird (Y-Achse nach oben).
Die roten Achsen stellen das SVG-Koordinatensystem dar. Die Ursprünge und X-Achsen der beiden Koordinatensysteme liegen übereinander.
Die jeweiligen Achsen der realen Werte und der SVG-Koordinaten haben verschiedene Skalierungen xscale
und yscale
. Hat ein Punkt im realen
Koordinatensystem die Koordinaten xr
und yr
haben, dann hat er im SVG-Koordinatensystem die Koordinaten
xr*xscale
und ‑yr*yscale
. Man beachte das Minuszeichen bei der Y-Koordinate.
Mit Hilfe der SVG-Attribute width
, height
und viewBox
lässt sich der sichtbare Ausschnitt und die Größe der SVG-Abbildung
einstellen. Die Breite wird auf (xrmax‑xrmin)cm
und die Höhe auf (yrmax‑yrmin)cm
gesetzt. Das Attribut viewBox
muss in
SVG-Koordinaten angegeben werden. Anhand der Abbildung erkennt man die Parameter
xmin*xscale ‑ymax*yscale (xrmax‑xrmin)*xscale (yrmax‑yrmin)*yscale
.