Einführung
Mit den HTML-Standards können Sie Hotspots auf einer Webseite mithilfe einer Bilderzuordnung angeben. Diese Hotspots können verwendet werden, um Hover-Text anzuzeigen oder als Links zu fungieren. Sie können sogar JavaScript-Ereignisverarbeitung hinzufügen, um die Interaktivität zu ermöglichen. Bewegen Sie den Mauszeiger beispielsweise auf die Balken und Achsenbeschriftungen des folgenden Bildes:
Diese Hotspots werden mithilfe der HTML-Elemente <map>
und <area>
erstellt. Die Chart API kann wie im Folgenden beschrieben alle Koordinaten zurückgeben, die zum Erstellen einer Hotspot-Karte erforderlich sind.
Karten für Ihr Diagramm erstellen
Wenn Sie der Diagramm-URL den Parameter chof=json
hinzufügen, erhalten Sie einen JSON-String mit allen Daten, die Sie zum Erstellen einer Imagemap für Ihr Diagramm benötigen. Anschließend können Sie Links zu bestimmten Bereichen Ihres Diagramms hinzufügen oder JavaScript-Funktionen an Klickereignisse anhängen, um Ihr Diagramm interaktiver zu gestalten. Dies wird nicht von allen Diagrammtypen unterstützt. Weitere Informationen finden Sie in der jeweiligen Diagrammdokumentation.
Mit dem Tool auf dieser Seite können Sie den HTML-Code für eine Imagemap generieren. Sie können diesen HTML-Code dauerhaft in Ihre Seite einbetten oder sogar unseren Code auf Ihre Seite kopieren und die Karte dann im Handumdrehen anfordern und erstellen, wenn Nutzer auf Ihrer Seite die Karte dynamisch ändern können.
So generieren Sie mit diesem Tool eine Karte:
- Rufen Sie die JSON-Ausgabe für Ihr Diagramm ab: Fügen Sie der Diagramm-URL
chof=json
hinzu, rufen Sie diese URL in Ihrem Browser auf und kopieren Sie den zurückgegebenen Text. - Fügen Sie den kopierten JSON-Text in das Textfeld unten mit der Bezeichnung „JSON-Ausgabe“ ein und klicken Sie auf „Zuordnung erstellen“.
- Erstellten Kartencode in Ihre Seite einfügen
- Geben Sie im generierten Code einen eindeutigen Namen für das
<map>
-Element an. - Entfernen Sie alle Kartenelemente, die Sie nicht benötigen, z. B. bestimmte Balken, Segmente, Labels oder Achsenelemente.
- Aktualisieren Sie die href-Attribute in den generierten
<area>
-Elementen. - Fügen Sie dem
<img>
-Element das Attributusemap="#MAP_NAME"
hinzu und ersetzen SieMAP_NAME
durch den Namen Ihrer Karte.Wichtig: Vor dem Usemap-Wert muss „#“ stehen, z. B.
usemap="#mymap"
. In diesem Fall lautet der Kartenname „mymap“, nicht „#mymap“.
Format des JSON-Strings
Hier das Format der JSON-Antwort, die zurückgegeben wird, wenn Sie chof=json
angeben:
- Ein Stammobjekt namens chartshape. Dieses Objekt enthält ein Array von Objekten, die jeweils einen Bereich in einer Imagemap des Diagramms darstellen. Jedes Objekt hat die folgenden Eigenschaften:
- name – ein Name für diesen bestimmten Bereich. Die allgemeine Namenskonvention lautet elementtype_series#_item#. Beispiel: bar0_0 für einen Bereich, der den ersten Balken in der ersten Reihe beschreibt, oder axis0_1 für einen Bereich, der das Label der zweiten Achse auf der x-Achse beschreibt.
- Typ – Form dieses Bereichs. Je nach Diagrammtyp kann es sich um einen der folgenden Werte handeln: RECT, CIRCLE oder POLY. Dies entspricht dem Attribut shape des
<area>
-Tags. - coords – ein numerisches Array, das die Fläche beschreibt; entspricht dem Attribut coords des
<area>
-Tags.