<\/p>\n
Wenn es um das Erzeugen von Grafiken geht, lässt Access Sie weitgehend im Regen stehen. Maximal die Anzeige von Bilddateien über das Bild- oder Anlagesteuerelement ist in Formularen und Berichten vorgesehen. Für alles darüber hinaus kommen Sie um den Einsatz aufwändiger Windows-API-Funktionen nicht herum. Wir zeigen hier aber, dass Sie auch mithilfe des Webbrowser-Steuerelements und HTML5 auf einfache Weise zu verblüffenden Ergebnissen kommen.<\/b><\/p>\nDie HTML5- und SVG-Erweiterungen von HTML<\/h2>\n
Grafikelemente können auf dynamischen Webseiten über zwei Schnittstellen erstellt werden. Die eine ist SVG<\/b> und die andere HTML5<\/b>. SVG<\/b> ist eine auf XML<\/b> basierende Auszeichnungssprache, die beliebige grafische Objekte mitsamt Effekten erzeugen und die resultierenden Anweisungen in einer Datei mit der Endung svg<\/b> abspeichern kann.<\/p>\n
Solche Dateien stellen Sie dann mit einem Grafikprogramm dar und bearbeiten sie dort auch, wobei sich vor allem Inkscape<\/b> als Open-Source-Lösung etabliert hat. Seit geraumer Zeit beherrschen aber auch alle gängigen Webbrowser diese Schnittstelle, wobei sie keinesfalls auf das Laden solcher Dateien angewiesen sind, sondern die Grafikelemente auch direkt über Objekte aufbauen können. In der Regel kommt für die Steuerung JavaScript<\/b> zum Einsatz. <\/p>\n
Dasselbe gilt für HTML5<\/b>. Auch hier gibt es vordefinierte Objekte, die Sie mit Leben füllen. Der wesentliche Unterschied zu SVG<\/b> besteht allerdings darin, dass die damit getätigten Grafikoperationen nicht mehr rückgängig gemacht werden können. Während SVG<\/b> eine Ansammlung von interaktiven (!) Grafikobjekten darstellt, die Sie später einzeln im Dokument ansprechen können, zeichnet HTML5<\/b> alles passiv auf eine Malfläche (canvas<\/b>), wie etwa das Windows-GDI<\/b> auch. Dafür ist seine Handhabung aber auch deutlich einfacher – einer der Gründe, die Schnittstelle als erste zu betrachten. In einem Folgebeitrag wenden wir uns dann der alternativen SVG<\/b>-Schnittstelle zu.<\/p>\nHTML5-Objektmodell<\/h2>\n
Für alles, was mit HTML und dem Internet Explorer<\/b> zusammenhängt, stellt Microsoft die Bibliothek MSHTML<\/b> bereit. Laden Sie diese über die Auswahl Microsoft HTML Object Libary<\/b> in die Verweise Ihres VBA-Projekts. Im Objektkatalog erscheint sie danach unter dem Namen MSHTML<\/b>.<\/p>\n
Diese Bibliothek ist die umfangreichste, die Sie unter Windows überhaupt finden können. Zu jedem HTML-Element gibt es hier ein Pendant in Form einer Klasse. So entspricht ein Web-Dokument etwa der Klasse HTMLDocument<\/b>, eine Tabelle dem HTMLTable<\/b>, ein div<\/b>-Bereich dem HTMLDivElement<\/b>, und so weiter.<\/p>\n
Jede dieser Klassen weist genau jene Eigenschaften und Methoden auf, die das W3C<\/b>-Konsortium für das HTML-Element definiert hat, auch wenn jeder Browser-Hersteller hier sein eigenes Süppchen kocht und manchmal nur eine Teilmenge oder modifizierte Parameter implementiert sind. Die Angleichung ist aber in vollem Gange, so dass sich derzeit der Internet Explorer in seinem Verhalten nur noch marginal von anderen Browsern, wie Firefox oder Chrome unterscheidet.<\/p>\n
Häufig wird der Text eines HTML-Dokuments über Strings aufgebaut. Das ist mit MSHTML<\/b>, mit dem Sie den Internet Explorer oder das Webbrowser-Steuerelement fernsteuern, eigentlich nicht mehr notwendig. Sie erzeugen stattdessen neue Klasseninstanzen der Elemente unter VBA und verschachteln diese im HTMLDocument<\/b> oder dessen HTMLBody<\/b> über das Setzen bestimmter Eigenschaftenparameter. Damit können Sie den HTML-Text komplett über Klassenobjekte erzeugen.<\/p>\n
Das Stichwort HTML5<\/b> selbst werden Sie indessen im Objektkatalog nicht finden. Seine Implementierung versteckt sich hinter jenen Klassen, die den String Canvas<\/b> enthalten, wie etwa HTMLCanvasElement<\/b>, CanvasGradient<\/b>, CanvasPattern<\/b>, ICanvasPixelArray<\/b> oder CanvasRenderingContext2D<\/b>. Letztere ist von besonderer Bedeutung, weil eben sie alle benötigten Grafikmethoden aufweist.<\/p>\n
Bild 1 zeigt einen Ausschnitt der Methoden im Objektkatalog. An ihren Namen lässt sich schon ablesen, was sie bewirken sollen. lineTo<\/b> etwa zeichnet eine Line vom aktuellen Ort zu den Koordinaten x<\/b> und y<\/b>. arc<\/b> erzeugt einen Bogen. Mit den Path<\/b>-Methoden legen Sie geschwungene Linienzüge an. rect<\/b> malt ein Rechteck. Die Fill<\/b>-Methoden erlauben das Füllen dieser Grafikobjekte mit beliebigen Farben oder Mustern, wobei diverse Verlaufsformen möglich sind (Gradient<\/b>). Die Aufgabe besteht also darin, ein HTML-Dokument zu erzeugen, diesem ein Canvas<\/b>-Element über eine VBA-Objektvariable zu verabreichen und anschließend über die Methoden das CanvasRenderingContext2D<\/b> Zeichenoperationen darauf auszuführen. JavaScript<\/b> entfällt. Die Ausgabe geschieht im eingebauten Access-Webbrowsersteuerelement<\/b>.<\/p>\n
![\"Die](\"..\/fileadmin\/_temp_\/2018_01\/Objektkatalog1.png\")
<\/p>\n
Bild 1: Die Zeichenoperationen der HTML5-Canvas-Klasse im Objektkatalog<\/span><\/b><\/p>\n HTML5<\/b> und SVG<\/b> hielten mit der Version 9 des Internet Explorers<\/b> Einzug und reflektierten sich auch gleich im MSHTML<\/b>-Objektmodell. Das Webbrowser-Steuerelement hostet ja lediglich den Internet Explorer und kann damit praktisch alles, was der auch kann. Bis zur aktuellen Version 11 (Edge<\/b> verwendet eine andere Technik und hat mit dem Webbrowser Control<\/b> nichts zu tun; auch unter Windows 10<\/b> nutzt das Control den Kompatibilitätsmodus des IE11<\/b>) ereignete sich eine Evolution, die den Umfang der W3C<\/b>-Implementierung kontinuierlich steigerte. Sie kann als weitgehend abgeschlossen betrachtet werden. <\/p>\n Dumm leider, dass das Steuerelement im Urzustand nur den Internet Explorer 7<\/b> hostet. Dies bedeutet, dass Microsoft aus Sicherheitsgründen den Internet Explorer im Steuerelement in den Zustand dieser alten Version versetzt. Und diese kennt überhaupt noch keine HTML5<\/b>– oder SVG<\/b>-Elemente! In diesem Modus ignoriert das Control schlicht alle entsprechenden Anweisungen. Zum Glück gibt es aber einen Workaround, den Sie schon im Beitrag der Ausgabe 3\/2017 GoogleMaps als Kartendienst<\/b> (Shortlink 1089<\/b>) kennenlernten. Mithilfe des Moduls mdlWebControl<\/b> und dem Aufruf der Prozedur SetWebControlAsIE11<\/b> oder der übergeordneten Prozedur PrepareBrowser<\/b> können Sie über API-Funktionen erzwingen, dass der Internet Explorer im Webbrowser-Steuerelement in den Modus der Version 11 übergeht und zusätzlich noch weitere Limitierungen aufgehoben werden. Das alles ist legitim. Dasselbe Modul findet nun auch in der Beispieldatenbank HTMLImage.accdb<\/b> zum vorliegenden Beitrag Anwendung. Von einer Funktionsbeschreibung sehe ich an dieser Stelle ab, weil dazu alles erschöpfend bereits im erwähnten Beitrag erläutert ist.<\/p>\n Dergestalt vorbereitet kann das Webbrowser-Steuerelement dann auch mit HTML5<\/b> und SVG<\/b> umgehen.<\/p>\n Um die grundlegenden Vorgänge zu beleuchten, die die Anlage einer HTML5<\/b>-Grafik im Webbrowser-Steuerelement erfordern, laden Sie das Formular frmHTML5<\/b> der Beispieldatenbank. Zunächst sehen Sie hier nur einen augenscheinlich leeren Detailbereich, sowie einen Button rechts oben im Formularkopf. Nach dessen Betätigung kommt es zur Ausgabe der ziemlich sinnfreien Grafik in Bild 2. Aber immerhin demonstriert das Beispiel einige Grafikelemente, die andernorts vielleicht nützlicher verwandt werden könnten.<\/p>\n Bild 2: Diese Grafik im Formular frmHTML5 wird mit nur recht wenigen Zeilen VBA-Code erzeugt<\/span><\/b><\/p>\n Im Entwurf des Formulars finden Sie das Webbrowser-Steuerelement mit dem Namen ctlWeb<\/b> im Detailbereich. Es füllt diesen fast ganz aus und hat die Einstellung Nach unten und quer dehnen<\/b> für die Eigenschaft Verankern<\/b>. Damit macht das Steuerelement alle Größenänderungen des Formulars mit. Der Steuerelementinhalt ist an kein Tabellenfeld gebunden, sondern auf den festen Wert =“about:blank“<\/b>. Ohne diese Einstellung fänden Sie nämlich nach dem Laden des Formulars im Webbrowser die unschöne Ausgabe Die Adresse ist ungültig vor<\/b>. about:blank<\/b> hingegen rendert gleich zu Beginn eine leere Fläche und legt ein rudimentäres Dokument an, mit dem Sie anschließend weiterarbeiten können, um ihm die HTML5-Elemente unterzujubeln. Schauen wir uns dazu einmal den Code der Formularklasse an. Beim Laden des Formulars wird zunächst diese Zeile abgesetzt:<\/p>\n Aufgepasst! Das Webbrowser-Steuerelement schleift keineswegs alle Methoden des zugrundeliegenden Internet Explorer-<\/b>Objekts durch. Deshalb muss dessen Instanz erst über die Eigenschaft Object<\/b> des Steuerelements erhalten werden, ähnlich, wie auch bei ActiveX-Steuerelementen üblich. Und eine seiner Eigenschaften ist Silent<\/b>, die hier auf True<\/b> eingestellt wird. Das weist ihn an, jegliche Meldungen zu fehlerhaften Skripten oder ähnliches zu unterlassen. Das hat zwar direkt nichts mit unserem HTML5-Vorhaben zu tun, ist jedoch grundsätzlich sinnvoll, wenn Sie dem Anwender Ihrer Datenbank im Zweifel nicht die Herkunft des dargestellten Inhalts verraten möchten …<\/p>\n Der Klick auf den Button cmdCanvas<\/b> ruft nun die Ereignisprozedur in Listing 1 auf. Hier wird zunächst die Objektvariable oDoc<\/b> vom Typ HTMLDocument<\/b> (MSHTML<\/b>-Bibliothek) auf das im Webbrowser-Steuerelement befindliche leere Dokument gesetzt. Der Hintergrund wird dann über das style<\/b>-Attribut bgColor<\/b> des body<\/b>-Elements auf hellgrau (lightgray<\/b>) eingestellt. In der Abbildung wird das durch die leicht graue Umrandung der Grafik deutlich. Das Setzen solcher Attribute wirkt sich übrigens immer unmittelbar im Browser aus. Bis hierhin hat das Ganze noch nichts mit HTML5<\/b> zu tun, was sich jedoch in der folgenden Zeile ändert. Die erzeugt über die Methode createElement<\/b> des Dokuments ein allgemeines HTMLElement<\/b> vom Typ canvas<\/b>. Unterstützt der Browser HTML5<\/b> nicht, etwa, weil sein Modus noch unverändert auf der Version 7 des Internet Explorers beruht, so ereignet sich hier kein Fehler, sondern die Objektvariable oElement<\/b> hat schlicht den Wert Nothing<\/b> oder aber sie hat keinen spezifischen Typ. Deshalb fragt die nächste Zeile über die Hilfsroutine IsCanvasSupported<\/b> noch ab, ob das Canvas<\/b>-Element erfolgreich angelegt wurde und verlässt andernfalls die Routine.<\/p>\n Listing 1: Komplette Routine zur Anlage der HTML5-Grafik<\/span><\/b><\/p>\n Dem Canvas<\/b>-Element wird nun die eindeutige Id<\/b> zeichnung<\/b> verabreicht, damit später gegebenenfalls auf es Bezug genommen werden kann. Da die Variable oElement<\/b> nur vom allgemeinen Typ HTMLElement<\/b> ist, unterstützt Intellisense von VBA auf sie nicht die speziellen Methoden des Canvas<\/b>-Elements. Deshalb kommt die Hilfsvariable oCanv<\/b> ins Spiel, die dezidiert den Typ IHTMLCanvasElement<\/b> aufweist. Sie wird direkt auf die Variable oElement<\/b> gecastet. Kleiner Einschub zur Hilfsroutine IsCanvasSupported<\/b>: Die Funktion ermittelt einfach den Typ des in der Variablen oElement<\/b> gespeicherten HTML-Elements:<\/p>\n Nun haben wir zwar ein Element vom Typ Canvas<\/b> angelegt, doch dieses ist damit noch lange nicht Bestandteil des Dokuments, sondern existiert rein im Speicher. Die Methode appendChild<\/b> des Body<\/b>-Objekts erledigt dies in der Folge aber.<\/p>\n Das Canvas<\/b>-Element selbst kennt noch keinerlei Methoden zum Zeichnen. Nur der sogenannte Render-Kontext<\/b> kann das. Sie erhalten diesen über den Methodenausdruck getContext(„2D“)<\/b>. Das resultierende Objekt ist vom Typ ICanvasRenderingContext2D<\/b> und wird in der Objektvariablen CTX<\/b> abgespeichert. Der Parameter 2D<\/b> ist übrigens der einzige, der hier aktuell erlaubt ist. Definiert ist über W3C<\/b> zwar auch der Parameter 3D<\/b> für dreidimensionale Grafiken, doch der Internet Explorer unterstützt das, wie viele andere Browser auch, noch gar nicht. <\/p>\n Die Vorarbeiten sind damit abgeschlossen und es kann nun direkt an die Zeichenoperationen gehen. Da derer mehrere folgen, ist die Variable CTX<\/b> mit einem With<\/b>-Block versehen, der fast bis ans Ende der Prozedur reicht.<\/p>\n Wir picken uns aus der Reihe der Anweisungen die Methode fillRect<\/b> heraus. Die erzeugt ein gefülltes Rechteck. Als Parameter erwartet sie die Koordinaten der linken oberen Ecke, sowie Breite und Höhe des Rechtecks. Allein ausgeführt resultierte sie in einem komplett schwarzen Rechteck. Denn Angaben etwa zur Linienstärke der Umrandung und zur Art und Farbe der Füllung werden der Methode ja nicht übergeben. Die Methode greift nämlich auf den Kontext des Canvas<\/b> zurück, in dem bereits einige Voreinstellungen zu diesen Stilen festgelegt sind. Um diese Stileinstellungen zu ändern, bedienen Sie sich weiterer Methoden des Objekts, und das übernehmen die Zeilen vor dem Aufruf von fillRect<\/b>.<\/p>\n Soll ein Grafikelement nicht nur einfarbig gefüllt werden, sondern mit einem Verlauf, so muss die Eigenschaft FillStyle<\/b> des Grafikkontexts auf ein Verlaufsobjekt gesetzt werden. Dieses Objekt vom Typ ICanvasGradient<\/b>, zugewiesen der Variablen oGrad<\/b>, erzeugt die Prozedur über die Methode createLinearGradient<\/b>. Sie erwartet als Parameter zwei Punktkoordinaten in der Einheit Pixel<\/b>, die der gewünschten Ausdehnung des Verlaufs entsprechen. Hier ist das einerseits die linke obere Ecke (0,0,<\/b>) und dann die rechte obere (500,0<\/b>). Der Verlauf erstreckt sich damit von links bis fast nach rechts. Sie können hier über andere Werte natürlich auch einen diagonalen Verlauf erzeugen, der problemlos auch über den Rand des Canvas hinausgehen darf. Zu erwähnen wäre an dieser Stelle auch, dass die alternative Methode createRadialGradient<\/b> einen kreisförmigen Verlauf erzeugen könnte.<\/p>\n Anschließend müssen die Farben für den Verlauf bestimmt werden, was die Methode addColorStop<\/b> ermöglicht. Sie erwartet zwei Parameter: Der erste gibt dabei den Abstand innerhalb des Verlaufs an, auf den die Farbe wirken soll. Der Wertebereich des Single<\/b>-Werts erstreckt sich von 0<\/b> bis 1<\/b>. 0<\/b> bedeutet in unserem Beispiel ganz links, 1<\/b> wäre ganz rechts, also bei der Breite 500<\/b> Pixel. Mit 0,5 <\/b>treffen Sie genau die Mitte der Fläche, die sich bei der Breite 250<\/b> Pixel befindet. Es können beliebig viele solcher Farbbereiche durch Wiederholung der Methode addColorStop<\/b> angelegt werden. Wenn Sie wollen, also ein ganzes buntes Farbspektrum. Die Farben selbst geben Sie jeweils im zweiten Parameter als hexadezimalen String an, wie sonst auch für solche HTML-Farbattribute üblich. Unsere drei Farbbereiche sind auf hellgrau, grün und dunkelgrau gesetzt. Die Methode fillRect<\/b> füllt das Rechteck nun mit diesem im Kontext neu bestimmten Verlauf. Es nimmt fast den gesamten Raum des Canvas<\/b> ein.<\/p>\n Es gibt noch eine alternative Methode, ein gefülltes Rechteck zu erzeugen. Das machen die nächsten drei Zeilen deutlich. Die Methode RECT<\/b> legt zunächst ein Rechteck auf dem Hintergrund an, welches ohne Füllung daherkommt. Ein einfacher Aufruf von fill<\/b> ändert dies. Sie füllt die zuletzt angelegten Grafikobjekte mit der im Kontext weiter oben festgelegten Verlaufseigenschaft. Zu sehen bekommen Sie das tatsächlich jedoch erst, nachdem Sie die Methode stroke<\/b> aufrufen. Sie erst rendert alle zuvor angelegten Grafikobjekte in den Canvas<\/b>. Im Klartext heißt das, dass sie mehrere Grafikobjekte, etwa auch Kreise (arc<\/b>), hintereinander erzeugen können, sie auf einen Schlag mit fill<\/b> füllen und dann ebenso komplett über stroke<\/b> physisch anzeigen können. In der Abbildung sehen Sie das verlaufsgefüllte kleine Rechteck links unten.<\/p>\n Darunter befindet sich noch ein ungefülltes. Das könnte ebenfalls über die Methode RECT<\/b>, gefolgt von stroke<\/b>, erzeugt werden. Einfacher aber ist die kombinierende Methode stokeRect<\/b>, welche das auf einen Schlag erledigt.<\/p>\n Nun fehlt noch der Kreis in der Abbildung, der über die Methode arc<\/b> erzeugt wird, welche auch Teilbogen darstellen kann. Die Reihenfolge der Parameter: Erst die x<\/b>– und y<\/b>-Koordinaten des Mittelpunkts (100, 200<\/b>), dann der Radius – alle Angaben in Pixel. Darauf folgen Start- und Endwinkel im Bogenmaß (0, 6.4<\/b>). 6.4<\/b> entspricht ungefähr zweimal Pi<\/b>, weshalb ein kompletter Kreis gemalt wird. Der Winkel 0<\/b> befindet sich übrigens ganz rechts vom Mittelpunkt und die Zeichenrichtung geschieht im Uhrzeigersinn, wenn der allerletzte Parameter der Methode auf 0<\/b> steht. Mit dem Wert 1<\/b> würde gegen den Uhrzeigersinn gezeichnet.<\/p>\n Sie können mit dieser Methode also beliebige Kreisabschnitte erzeugen, nicht jedoch ellipsenförmige. Die Breite des Zeichenstifts wurde zuvor über die Eigenschaft lineWidth<\/b> des Kontexts auf 7 Pixel eingestellt. Wo aber kommt die Querlinie her, die den Kreis zu einem Stoppschild macht Eine weitere Methode zum Linienzeichnen findet sich ja in der Routine nicht.<\/p>\n Grund dafür ist die Tatsache, dass dich der Canvas den Endpunkt der letzten Zeichenoperation hernimmt und ihn als Startpunkt der nächsten verwendet. Und die letzte Aktion war das Rechteck ganz unten. Der Startpunkt des Kreises begänne damit bei dessen Ecke links oben. Genauer: Es würde zusätzlich eine gerade Linie von dieser Ecke zum Kreisanfang gezeichnet werden. Auf diese Weise kommt es durch mehrere aufeinanderfolgende Grafikoperationen zu einem Linienzug. Der kann aber durch die Methode moveTo<\/b> unterbrochen werden. In der Prozedur wird der Stift gleichsam zur Koordinate 80 Pixel links vom Mittelpunkt des Kreises bewegt (x=100, r=80, r-x = 20<\/b>). Von hier aus entsteht dadurch eine waagrechte Linie zum Startpunkt des Kreises rechts. Die ganze Geschichte wirkt sich auch hier erst dann sichtbar aus, nachdem die Methode stroke<\/b> aufgerufen wird.<\/p>\n Eine weitere Style<\/b>-Eigenschaft des Canvas<\/b> ist außerdem globalAlpha<\/b>. Die entspricht unter HTML sonst dem Attribut opacity<\/b> und gibt den Grad der Durchsichtigkeit der folgenden Grafikoperationen an. Der Kreis ist deshalb durchscheinend. Dieses Feature, den Alpha-Kanal zu beeinflussen, ermöglicht unter HTML5 überlagernde Grafikelemente! globalAlpha<\/b> hat allerdings einen etwas eigentümlichen Wertebereich. 1<\/b> bedeutet opak, 0<\/b> völlig durchsichtig. Doch 0.5 <\/b>bedeutet noch keinesfalls halbdurchsichtig! Dies kommt eher durch einen Wert von 0.3<\/b> zustande. Selbst beim Wert 0.01<\/b> ist der Kreis noch deutlich zu erkennen. Offenbar verwendet HTML5<\/b> hier eine exponentielle Kurve.<\/p>\n Sie sehen, dass sich über HTML5<\/b> mit nur wenigen Zeilen Code Grafikelemente erzeugen lassen, die mit dem Windows-API <\/b>(GDI32<\/b> oder GDIPlus<\/b>) hunderte Zeilen erfordert hätten! An dieser Stelle kann nicht jede Methode des Canvas<\/b> und deren Parameter erläutert werden. Die Referenz dazu finden Sie in der MSDN<\/b> von Microsoft (https:\/\/msdn.microsoft.com\/de-de\/library\/ff976025(v=vs.85).aspx<\/b>). Hier ging es zunächst nur um die grundliegenden Schritte, die zu einer HTML5<\/b>-Grafik im Webbrowser-Steuerelement führen. Die letzte Zeile der Routine gibt den erzeugten Quelltext des Dokuments über die Methode outerHTML<\/b> im VBA-Direktfenster aus. Und der ist reichlich übersichtlich:<\/p>\n Hier wird offenbar, dass die Zeichenoperationen sich, anders, als bei SVG<\/b>, in keiner Weise im Quelltext wiederspiegeln. Sie lassen sich durch erneutes Laden des Quelltexts nicht mehr reproduzieren. Die erstellte Grafik ist ein reines Bitmap im Browser. Wie Sie an die Daten dieses Bitmaps herankommen, um sie in einer Datei oder direkt in Tabellenfeldern abzuspeichern, folgt später. Neben Grafikelementen kann HTML5<\/b> natürlich auch Texte ausgeben. Beides kombiniert eröffnen sich weite Anwendungsbereiche. Denken Sie an Flussdiagramme, technische Zeichnungen oder auch spezielle Grids, die sich aus den Tabellen der Datenbank speisen. Der einzige Nachteil von HTML5<\/b> ist die fehlende Interaktivität. Sie können etwa nicht auf ein Grafikelement klicken und es über ein Ereignis identifizieren. Dafür brauchen Sie die in einem Folgebeitrag dargestellte Alternative SVG<\/b>.<\/p>\n Das Grundwissen ist nun vermittelt und wir schreiten zu einem nützlicheren Beispiel, dem Anlegen von Balken- und Tortendiagrammen über HTML5<\/b>. Implementiert ist das im Formular frmHTML5Diagram<\/b> der Beispieldatenbank (s. Bild 3).<\/p>\n Bild 3: Das HTML5-Balkendiagramm zu Umsätzen nach Monaten im Formular frmHTML5Diagram<\/span><\/b><\/p>\n Dessen Funktionen sind schnell beschrieben. Nach dem öffnen finden Sie im Detailbereich zunächst eine weiße Fläche vor, bei der es sich tatsächlich um ein Webbrowser-Steuerelement handelt. Im Formularkopf sind einige Controls untergebracht, die die Anlage der Diagramme steuern. Sie können zum einen wählen, ob ein Balken- oder ein Tortendiagramm generiert werden soll. Zum anderen ermitteln Abfragen auf eine Kunden- und Bestelldatenbank die aggregierten Umsätze nach Monaten oder die Umsätze nach Herkunftsländern der Besteller.<\/p>\n Je nach Auswahl wird dann ein anderes Diagramm über den Button links oben erzeugt. Das fertige Diagramm können Sie über die Schaltflächen rechts als Grafikdatei abspeichern oder auch direkt ausdrucken.<\/p>\n Das zugehörige an die bekannte Nordwind<\/b>-Datenbank angelehnte Datenmodell zeigt Bild 4. Es gibt Kunden (tblKunden<\/b>), die Artikel (tblArtikel<\/b>) bestellen. Die Verknüpfung geschieht über die 1:n-Tabelle tblBestellungen<\/b>. Jeder Kunde kann ja mehrmals bestellen. Jede Bestellung wiederum kann mehrere Artikel enthalten, weshalb hier zusätzlich die n:m-Tabelle tblBestellDetails<\/b> benötigt wird. <\/p>\n Bild 4: Am Datenmodell zu Kunden, Bestellungen und Artikeln sind vier relationale Tabellen beteiligt<\/span><\/b><\/p>\n Zur Auswertung der Umsätze pro Zeiteinheit sind nach diesem Modell alle drei rechten Tabellen zu befragen, denn jene ergeben sich aus der Summe des Felds Einzelpreis<\/b> in der Artikeltabelle. Das ist warenwirtschaftlich zwar nicht korrekt, weil im richtigen Leben der Bestellpreis eigentlich zusätzlich in der Tabelle tblBestelldetails<\/b> stehen müsste – beim Versand könnte sich der Artikelpreis ja bereits geändert haben und die Rechnung enthielte dann einen falschen Betrag. Dieses uralte Modell kam so aber bereits in verschiedenen Beispieldatenbanken von Access im Unternehmen<\/b> zum Einsatz, weshalb wir es hier einfach unverändert übernehmen.<\/p>\n <\/p>\n Wie auch immer, die zur Umsatzauswertung gehörige Abfrage stellt Bild 5 dar. Gruppiert wird hier nach dem Bestelldatum<\/b>, wobei die Format<\/b>-Funktion Jahre und Monate zusammenfasst. Für den 24.11.2015 <\/b>etwa <\/b>ergäbe sich damit der Textausdruck 2015\/11<\/b>. Der Umsatz ergibt sich aus der Summe der Einzelpreise<\/b> multipliziert mit der Artikelanzahl<\/b> in tblBestellungen<\/b>. Der Rabatt<\/b> wird der Einfachheit halber ignoriert. Das Ergebnis der Abfrage ist eine nach Jahren und Monaten aufsteigend sortierte Liste der Umsätze und damit die Basis für das Diagramm weiter oben.<\/p>\n Bild 5: Zur Auswertung der Umsätze nach Monaten für die Diagramme kommt die Gruppierungsabfrage qry_UmsatzMonat zum Einsatz<\/span><\/b><\/p>\n Sollen die Umsätze nach Herkunftsländern der Besteller ausgewertet werden, sind hingegen alle vier Tabellen in die Auswahlabfrage zu integrieren, da das Land<\/b> ein Attributfeld des Kunden ist. Es ergibt sich die Abfrage aus Bild 6, in der nach dem Feld Land<\/b> des Kunden gruppiert wird und sich die Umsatzsumme S<\/b> auf gleiche Weise errechnet, wie bei der zuvor erörterten Abfrage.<\/p>\n Bild 6: Zur Auswertung der Umsätze nach Land für die Diagramme kommt die Gruppierungsabfrage qry_UmsatzLaender zum Einsatz<\/span><\/b><\/p>\n Die Sortierung erfolgt hier aber nach der Umsatzsumme absteigend, wodurch dann das Land mit dem höchsten Umsatz ganz oben steht. Das reflektiert sich dann auch im alternativ erzeugten Diagramm in Bild 7, das zudem eine andere Farbgebung aufweist. Beide Diagramme werden aber über den gleichen VBA-Code generiert, der in ein Klassenmodul clsHTMLDiagram<\/b> ausgelagert ist. über Eigenschaften der Klasse und Parameter der Methodenaufrufe können Sie dann die Gestalt des Diagramms beeinflussen.<\/p>\n Bild 7: ähnlich das HTML5-Balkendiagramm zu Umsätzen nach Ländern im Formular frmHTML5Diagram<\/span><\/b><\/p>\n Tatsächlich finden Sie im Formularcode nichts, was mit HTML5<\/b> zu tun hätte, weil all dies im eingeklinkten Klassenmodul passiert:<\/p>\n Die Objektvariable CDgm<\/b> wird formularglobal deklariert und beim Laden des Formulars erzeugt. Dasselbe geschieht mit der separaten für das Tortendiagramm verantwortlichen Klasse clsHTMLPieChart<\/b>, die in der Variablen CDgmPie<\/b> landet. Klicken Sie auf den Button cmdDiagram<\/b> mit der Beschriftung Erzeuge Diagramm<\/b>, so stößt dies die Ereignisprozedur aus Listing 2 an, die schließlich die Diagramme generiert.<\/p>\n Listing 2: Die Formularroutine zum Erzeugen des Diagramms<\/span><\/b><\/p>\n In dieser erfolgt zunächst ein Aufruf der Hilfsprozedur NewDoc<\/b>, welche im Webbrowser-Steuerelement ctlWeb<\/b> per about:blank<\/b> ein neues leeres Dokument anlegt:<\/p>\n Im Select-Case<\/b>-Zweig entscheidet die Routine anhand des in der Optionsgruppe optGrp<\/b> eingestellten Werts, ob die Umsätze nach Monaten oder nach Ländern ausgegeben werden sollen. Von diesem Wert hängt ab, welche der beiden Abfragen in das Recordset rs<\/b> geladen wird. Zusätzlichen werden der Titel des Diagramms (sTitle<\/b>) und die zufällige Farbgebung (bRandom<\/b>) gesetzt. Der nächste Bedingungszweig auf die Optionsgruppe optGrp2<\/b> wertet aus, welche Diagrammart generiert werden soll. Im einen Fall werden Eigenschaftswerte für die Diagrammklasse CDgm<\/b> eingestellt, im anderen die für die Klasse CDgmPie<\/b>. Die Methoden der Klassen sind dabei aber identisch.<\/p>\n Sie teilen den Klassen mit, wie breit und hoch das Diagramm werden soll (Width<\/b>, Height<\/b>). Die Eigenschaft BackColor<\/b> stellt dessen Hintergrundfarbe ein, Title<\/b> den Titeltext links oben im Diagramm. Ob zufällige Farben für die Balken oder Tortenstücke erscheinen sollen, entscheidet RandomColors<\/b> über einen Boole-Wert<\/b>. Zuletzt ist lediglich das im ersten Schritt geöffnete Recordset rs<\/b> über die Methode DataRecordset<\/b> zuzuweisen. Und nun übernimmt das Klassenmodul die Regie, indem Sie seine Prozedur CreateDiagramDoc<\/b> aufrufen.<\/p>\n Erst diese führt auf Basis der erfolgten Einstellungen all jene HTML5<\/b>-Aktionen durch und rendert das Diagramm im als Parameter übergebenen Webbrowser-Objekt. Klappt dies, so gibt die Funktion True<\/b> zurück. Andernfalls zeigt eine Meldung an, dass kein Diagramm erzeugt werden konnte, wobei allerdings keine Ausgabe des genauen Fehlergrunds erfolgt.<\/p>\n Im Modul clsHTMLDiagram<\/b> finden Sie nur etwas mehr als 200 Zeilen Code vor. Ein großer Teil geht dabei auf Variablendeklarationen und Property<\/b>-Prozeduren drauf, die selbst keine Aktionen ausführen. Die zwei wirklich aktiven Prozeduren CreateDiagramDoc<\/b> und deren Subroutine PaintData<\/b> benötigen nur etwa 120 Zeilen. Gemessen am Ergebnis ist das extrem wenig, wenn man es mit anderen Grafikmethoden vergleicht. Wollten Sie dasselbe mit dem Windows-API<\/b> erreichen, so könnten Sie bei GDIPlus<\/b> locker mit etwa dem Fünffachen, bei GDI32<\/b> mit dem Zehnfachen rechnen. Dennoch zeigen wir Ihnen hier nicht den kompletten Code des Moduls, sondern konzentrieren uns lieber auf das Wesentliche.<\/p>\n Beginnen wir mit der Zuweisung des Recordsets an die Klasse über die Property<\/b>-Methode DataRecordset<\/b>. Die ist die einzige, die neben dem Speichern des Eigenschaftswerts in eine Membervariable (m_RS<\/b>) noch eine zusätzliche Aufgabe erledigt, nämlich das Ermitteln des Wertebereichs der gelieferten Daten:<\/p>\n m_min<\/b> nimmt die untere Grenze des Wertebereichs auf, m_max<\/b> die obere. Zu erwähnen wäre an dieser Stelle, dass die Klasse zwingend ein maßgeschneidertes Recordset erwartet: Im ersten Feld vom Typ Text<\/b> muss die Beschriftung des Datenpunkts stehen, im zweiten dessen Wert als Ganz- oder Gleitkommazahl. Gleitkommazahlen werden allerdings auf den Vorkommateil gerundet, was folglich die Anwendung auf Wertebereiche von mindestens 10<\/b> und aufwärts beschränkt. Der Name der Felder im Recordset spielt indessen keine Rolle, da auf sie über deren Indizes 0<\/b> und 1<\/b> zugegriffen wird. Beispieldaten sähen damit etwa so aus:<\/p>\n In einer Schleife werden alle Datensätze des Recordsets durchlaufen und der niedrigste Wert des zweiten Felds (rs(1)<\/b>) in m_min<\/b> gespeichert, der höchste in m_max<\/b>. Diese Werte werden später benötigt, wenn es an die automatische Dimensionierung der Diagrammbalken und die Positionierung der Achsenbeschriftungen geht.<\/p>\n Listing 3 zeigt nun die wesentlichen Bestandteile der Prozedur CreateDiagramDoc<\/b> zum Erzeugen des Diagramms – oder genauer: der Anlage des HTML5-Kontexts<\/b>. Erst der Aufruf der Subroutine PaintData<\/b> zum Schluss führt dann zum eigentlichen Zeichnen des Diagramms. Die meistens Vorgänge in der Routine entsprechen dem, was bereits zum Listing 1<\/b> erläutert wurde.<\/p>\n Listing 3: Diese Prozedur der Klasse erzeugt den HTML5-Kontext<\/span><\/b><\/p>\n Die Klassenvariable oDoc<\/b> nimmt das leere Dokument des Webbrowsers entgegen. über das Attribut bgColor<\/b> wird nun die Hintergrundfarbe des body<\/b>-Elements auf Weiß eingestellt. Folgend legt die Methode createElement<\/b> einen DIV<\/b>-Bereich im Dokument an, der als Container für die HTML5<\/b>-Grafik dienen soll. Die wird über den canvas<\/b> erzeugt, welcher mit der ID zeichnung<\/b> versehen ist, dem DIV<\/b>-Bereich, der nun in der Objektvariablen oDiv<\/b> steht, hinzugefügt (appendChild<\/b>). Breite und Höhe des HTML5-Canvas<\/b> werden an dieser Stelle auch schon eingestellt (Width<\/b>, Height<\/b>). Zusätzlich erhält die Klassenvariable oCanvE<\/b> eine Kopie dieses Canvas<\/b>-Objekts, weil ein Verweis auf ihn später noch von anderen Prozeduren benötigt wird.<\/p>\n Abschließend nimmt die Klassenvariable CTX<\/b> noch den Grafikkontext von HTML5<\/b> auf. Auch dieser wird später noch weiterverwendet. Die Deklaration der drei Klassenvariablen sieht so aus:<\/p>\n oDoc<\/b> ist deshalb mit WithEvents<\/b> deklariert, weil auf Ereignisse des Browser-Dokuments reagiert werden soll. So etwa auf das Klicken mit der rechten Maustaste, was üblicherweise das Kontextmenü des Internet Explorers<\/b> hervorbringt. Die folgende kleine Ereignisprozedur aber unterbindet dies:<\/p>\n Damit sind alle Vorarbeiten erledigt, der HTML5<\/b>-Kontext angelegt, und es kann an das Zeichnen des Diagramms gehen. Das übernimmt nun die Prozedur PaintData<\/b>. <\/p>\n Der Code dieser länglichen Routine ist notwendigerweise stark mit Einrückungen versehen, weshalb seine Abbildung in einem Listing schwierig würde. Wir greifen die interessanteren Parts hier deshalb Schritt für Schritt auf. Eine komplette Erläuterung aller Zeilen würde sicher auch zu weit führen. Etwas externe Einarbeitung in HTML5<\/b> ist zum Verständnis wohl nötig. Sie finden im Netz zwar kaum Beispiele zu HTML5<\/b> im Verein mit dem MSHTML<\/b>-Objektmodell, dafür aber erschöpfend JavaScripte, deren übersetzung nach VBA nicht allzu schwerfällt. Wir selbst haben das ja auch gemacht…<\/p>\n Die Routine beginnt mit dem Errechnen einiger Werte, die für die Dimensionierung der Grafik benötigt werden:<\/p>\n In n<\/b> steht die Anzahl an Datensätzen des Recordset m_RS<\/b>, welches zuvor ja über die Methode DataRecordset<\/b> zugewiesen wurde. xOffset<\/b> beschreibt den linken Rand des Diagramms in der Grafikfläche des Canvas<\/b>. Aus der per Property<\/b> gesetzten Breite in Webbrowser-Steuerelement<\/h2>\n
Die erste HTML5-Grafik<\/h2>\n
![\"Diese](\"..\/fileadmin\/_temp_\/2018_01\/frmHTML5.png\")
<\/p>\nMe!ctlWeb.Object.Silent = True<\/span><\/pre>\nPrivate Sub <\/span>cmdCanvas_Click()\r\n Dim <\/span>oDoc As <\/span>HTMLDocument\r\n Dim <\/span>oElement As <\/span>IHTMLElement\r\n Dim <\/span>oCanv As <\/span>IHTMLCanvasElement\r\n Dim <\/span>CTX As <\/span>ICanvasRenderingContext2D\r\n Dim <\/span>oGrad As <\/span>ICanvasGradient\r\n Set<\/span> oDoc = Me!ctlWeb.Object.Document\r\n oDoc.body.setAttribute \"bgColor\", \"lightgray\"\r\n Set<\/span> oElement = oDoc.createElement(\"canvas\")\r\n If <\/span>Not<\/span> IsCanvasSupported(oElement) Then<\/span> Exit Sub<\/span>\r\n oElement.Id = \"zeichnung\"\r\n Set<\/span> oCanv = oElement\r\n oCanv.Width = 600\r\n oCanv.Height = 400\r\n oDoc.body.appendChild oElement\r\n Set<\/span> CTX = oCanv.getContext(\"2d\")\r\n With<\/span> CTX\r\n Set<\/span> oGrad = .createLinearGradient(0, 0, 500, 0)\r\n oGrad.addColorStop 0, \"#e0e0e0\"\r\n oGrad.addColorStop 0.5, \"#90b080\"\r\n oGrad.addColorStop 1, \"#808080\"\r\n .FillStyle = oGrad\r\n .fillRect 10, 10, 500, 300\r\n .RECT 30, 320, 100, 30\r\n .Fill\r\n .stroke\r\n .strokeRect 40, 350, 100, 30\r\n .globalAlpha = 0.2\r\n .moveTo 20, 200 ''''180, 200\r\n .lineWidth = 7\r\n .arc 100, 200, 80, 0, 6.4, 0\r\n .stroke\r\n End With<\/span>\r\n Debug.Print<\/span> oDoc.all(0).outerHTML\r\nEnd Sub<\/span><\/pre>\nIf <\/span>TypeName(oElement) <> \"HTMLCanvasElement\" Then<\/span>\r\n...(IsCanvasSupported = False<\/span>)... Else = True<\/span> ...<\/pre>\n<html>\r\n <head><\/head>\r\n <body bgcolor=\"lightgray\">\r\n <canvas width=\"600\" height=\"400\" id=\"zeichnung\"><\/canvas>\r\n <\/body>\r\n<\/html><\/pre>\n
Diagramme per HTML5 ausgeben<\/h2>\n
![\"Das](\"..\/fileadmin\/_temp_\/2018_01\/frmDgmChart2.png\")
<\/p>\n![\"Am](\"..\/fileadmin\/_temp_\/2018_01\/rellayout_kunden.png\")
<\/p>\n![\"Zur](\"..\/fileadmin\/_temp_\/2018_01\/qryUmsatzMonat.png\")
<\/p>\n![\"Zur](\"..\/fileadmin\/_temp_\/2018_01\/qryUmsatzLand.png\")
<\/p>\n![\"ähnlich](\"..\/fileadmin\/_temp_\/2018_01\/frmDgmChart1.png\")
<\/p>\nPrivate <\/span>CDgm As <\/span>clsHTMLDiagram ''''Modulkopf\r\nPrivate <\/span>CDgmPie As <\/span>clsHTMLPieChart\r\nPrivate Sub <\/span>Form_Load()\r\n Set<\/span> CDgm = New<\/span> clsHTMLDiagram\r\n Set<\/span> CDgmPie = New<\/span> clsHTMLPieChart\r\nEnd Sub<\/span><\/pre>\nPrivate Sub <\/span>cmdDiagram_Click()\r\n Dim <\/span>rs As <\/span>DAO.Recordset\r\n Dim <\/span>sTitle As String<\/span>\r\n Dim <\/span>bRandom As Boolean<\/span>\r\n NewDoc\r\n Select Case optGrp.Value\r\n Case <\/span>1\r\n Set<\/span> rs = CurrentDb.OpenRecordset(\"qry_UmsaetzeMonat\")\r\n sTitle = \"Umsätze nach Monaten\"\r\n bRandom = False<\/span>\r\n Case <\/span>2\r\n Set<\/span> rs = CurrentDb.OpenRecordset(\"qry_UmsatzLaender\")\r\n sTitle = \"Gesamtumsatz nach Ländern\"\r\n bRandom = True<\/span>\r\n Case Else<\/span>\r\n Exit Sub<\/span>\r\n End Select<\/span>\r\n If <\/span>optgrp2.Value = 1 Then<\/span>\r\n With<\/span> CDgm\r\n .Width = Me!ctlWeb.Object.Width\r\n .Height = Me!ctlWeb.Object.Height\r\n .BackColor = RGB<\/span>(224, 224, 224)\r\n .Title = sTitle\r\n .RandomColors = bRandom\r\n Set<\/span> .DataRecordset = rs\r\n If <\/span>Not<\/span> .CreateDiagramDoc(Me!ctlWeb.Object) Then<\/span>\r\n MsgBox<\/span> \"Erzeugen des Diagramms schlug fehl\"\r\n End If<\/span>\r\n End With<\/span>\r\n Else<\/span>\r\n With<\/span> CDgmPie\r\n .Width = Me!ctlWeb.Object.Width\r\n .Height = Me!ctlWeb.Object.Height\r\n .BackColor = RGB<\/span>(224, 224, 224)\r\n .Title = sTitle\r\n .RandomColors = bRandom\r\n Set<\/span> .DataRecordset = rs\r\n If <\/span>Not<\/span> .CreateDiagramDoc(Me!ctlWeb.Object) Then<\/span>\r\n MsgBox<\/span> \"Erzeugen des Diagramms schlug fehl\"\r\n End If<\/span>\r\n End With<\/span>\r\n End If<\/span>\r\n rs.Close\r\nEnd Sub<\/span><\/pre>\nPrivate Sub <\/span>NewDoc()\r\n ctlWeb.Object.Navigate2 \"about:blank\"\r\n Do\r\n DoEvents\r\n Loop<\/span> Until ctlWeb.Object.ReadyState > 2\r\nEnd Sub<\/span><\/pre>\nHTML5-Balkendiagrammklasse<\/h2>\n
Property Set<\/span> <\/span>DataRecordset(rs As <\/span>DAO.Recordset)\r\n Set<\/span> m_RS = rs\r\n m_min = 9 ^ 10\r\n m_max = -9 ^ 10\r\n With<\/span> m_RS\r\n .MoveFirst\r\n Do While<\/span> Not<\/span> .EOF\r\n If <\/span>rs(1).Value > m_max Then<\/span> m_max = rs(1).Value\r\n If <\/span>rs(1).Value < m_min Then<\/span> m_min = rs(1).Value\r\n .MoveNext<\/span>\r\n Loop<\/span>\r\n .MoveFirst\r\n End With<\/span>\r\n If <\/span>m_min = m_max Then<\/span> m_min = m_max - 10\r\nEnd Property<\/span><\/pre>\nFeld1 Feld2\r\nPolen 12564,88\r\nFrankreich 32211,24\r\nBelgien 8923,47<\/pre>\n
Function <\/span>CreateDiagramDoc(Browser As <\/span>WebBrowser) As Boolean<\/span>\r\n Dim <\/span>oDiv As <\/span>HTMLDivElement\r\n Dim <\/span>oElement As <\/span>IHTMLElement\r\n \r\n On Error Goto Fehler \r\n Set<\/span> oDoc = Browser.Document\r\n oDoc.body.setAttribute \"bgColor\", ColorToStr(vbWhite)\r\n \r\n Set<\/span> oDiv = oDoc.createElement(\"div1\")\r\n oDiv.Id = \"div1\"\r\n oDoc.body.appendChild oDiv\r\n \r\n Set<\/span> oElement = oDoc.createElement(\"canvas\")\r\n oElement.Id = \"zeichnung\"\r\n Set<\/span> oCanvE = oElement\r\n oCanvE.Width = m_Width: oCanvE.Height = m_Height\r\n oDiv.appendChild oElement\r\n \r\n Set<\/span> CTX = oDoc.getElementById(\"zeichnung\").getContext(\"2d\")\r\n PaintData\r\n CreateDiagramDoc = True<\/span>\r\n Exit Function<\/span>\r\nFehler:\r\nEnd Function<\/span><\/pre>\nPrivate <\/span>WithEvents oDoc As <\/span>HTMLDocument\r\nPrivate <\/span>CTX As <\/span>ICanvasRenderingContext2D\r\nPrivate <\/span>oCanvE As <\/span>IHTMLCanvasElement<\/pre>\nPrivate Function <\/span>oDoc_oncontextmenu() As Boolean<\/span>\r\n ''''\r\nEnd Function<\/span> <\/pre>\nn = m_RS.RecordCount\r\nxOffset = 40\r\nw1 = (m_Width - 20 - xOffset) \\ n\r\nx = xOffset\r\nyFactor = (m_Height - 50) \/ (m_max - m_min)\r\nyFactor = yFactor * 0.75<\/pre>\n