Bildzuordnung eines Diagramms erstellen

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:

1. 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.
2. Fügen Sie den kopierten JSON-Text in das Textfeld unten mit der Bezeichnung „JSON-Ausgabe“ ein und klicken Sie auf „Zuordnung erstellen“.
3. Erstellten Kartencode in Ihre Seite einfügen
4. Geben Sie im generierten Code einen eindeutigen Namen für das <map>-Element an.
5. Entfernen Sie alle Kartenelemente, die Sie nicht benötigen, z. B. bestimmte Balken, Segmente, Labels oder Achsenelemente.
6. Aktualisieren Sie die href-Attribute in den generierten <area>-Elementen.
7. Fügen Sie dem <img>-Element das Attribut usemap="#MAP_NAME" hinzu und ersetzen Sie MAP_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.