Einführung
Mit den HTML-Standards kannst du Hotspots auf einem Webseitenbild mithilfe einer Bildzuordnung angeben. Diese Hotspots können verwendet werden, um Hovertext anzuzeigen oder als Links zu fungieren. Sie können auch eine JavaScript-Ereignisverarbeitung hinzufügen, um Interaktivität zu ermöglichen. Bewegen Sie die Maus beispielsweise über die Balken und Achsenbeschriftungen des folgenden Bildes:
Diese Hotspots werden mit den HTML-Elementen <map> und <area> erstellt. Die Chart API kann alle Koordinaten zurückgeben, die zum Erstellen einer Hotspot-Karte dafür erforderlich sind, wie im Folgenden beschrieben.
Erstellen einer Karte für Ihr Diagramm
Wenn Sie der Diagramm-URL den Parameter chof=json hinzufügen, erhalten Sie einen JSON-String mit allen Daten, die Sie zum Erstellen einer Bildzuordnung für Ihr Diagramm benötigen. Anschließend können Sie Links zu bestimmten Abschnitten Ihres Diagramms hinzufügen oder JavaScript-Funktionen an Click-Events anhängen, um Ihr Diagramm interaktiver zu gestalten. Dies wird nicht von allen Diagrammtypen unterstützt. Weitere Informationen finden Sie in der entsprechenden Diagrammdokumentation.
Das Tool auf dieser Seite hilft Ihnen dabei, den HTML-Code für eine Imagemap zu generieren. Sie können diesen HTML-Code dauerhaft in Ihre Seite einbetten oder sogar unseren Code auf Ihre Seite kopieren und dann die Karte anfordern und im Handumdrehen generieren, sofern der Nutzer auf Ihrer Seite die Möglichkeit hat, die Karte auf der Seite dynamisch zu ändern.
So erstellen Sie mit diesem Tool eine Karte:
- Rufen Sie die JSON-Ausgabe für Ihr Diagramm ab:Fügen Sie der Diagramm-URL
chof=jsonhinzu, rufen Sie diese URL in Ihrem Browser auf und kopieren Sie den zurückgegebenen Text. - Füge den kopierten JSON-Text in das Textfeld unten ein, das mit „JSON-Ausgabe“ gekennzeichnet ist, und klicke auf „Zuordnung erstellen“.
- Den generierten Kartencode in die Seite einfügen
- Geben Sie in den generierten Code einen eindeutigen Namen für das
<map>-Element ein. - 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 das Attribut
usemap="#MAP_NAME"zum<img>-Element hinzu und ersetzen Sie dabeiMAP_NAMEdurch den Namen Ihrer Karte.Wichtig: Vergessen Sie nicht, dem Usemap-Wert das Präfix „#“ voranzustellen, z. B.
usemap="#mymap". In diesem Fall lautet der Kartenname „mymap“ und nicht „#mymap“.
Format des JSON-Strings
Hier ist das Format der JSON-Datei, 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 Bildkarte des Diagramms darstellen. Jedes Objekt hat die folgenden Attribute:
- name – der Name für die Region. Die allgemeine Namenskonvention lautet elementtype_series#_item#. Beispiel: bar0_0 für einen Bereich, der den ersten Balken der ersten Reihe beschreibt, oder axis0_1 für einen Bereich, der das Label der zweiten Achse auf der X-Achse beschreibt.
- Typ – Form des Bereichs. Dies ist je nach Diagrammtyp einer der folgenden Werte: RECT, CIRCLE oder POLY. Dies entspricht dem Attribut shape des Tags
<area>. - coords – ein numerisches Array, das den Bereich beschreibt; entspricht dem Attribut coords des Tags
<area>