Dokumentation · Einbetten

Bette ein Diagramm ein, das interaktiv bleibt

Ein gehostetes Skript, ein Custom Element, kein Build-Schritt. Das Diagramm zeichnet sich selbst, animiert Änderungen der Spezifikation und bringt seine eigene Barrierefreiheit mit. Diese Seite beschreibt den vollständigen Vertrag. Die Kurzfassung findest du unter Erste Schritte.

1 · Element laden

Das eigenständige Bundle enthält die Engine und ist mit gzip etwa 31 KB groß. Es wird von dieser Domain mit offenem CORS ausgeliefert, damit dasselbe Tag auf jeder Domain funktioniert. Hover, Tooltips und Tastaturnavigation folgen direkt nach der ersten Darstellung in einer kleinen zweiten Datei (/v1/live-chart-interact.js). Live-Tabellen laden bei Bedarf eine weitere Datei (/v1/live-chart-table.js), ausschließlich auf Seiten, die eine Tabelle zeigen.

<script type="module" src="https://meikucharts.com/v1/live-chart.js"></script>

2 · Diagramm mit JSON als Kindelement einfügen

Der übliche Einstieg: Die Spezifikation steht im Element. Der Code ist damit ein eigenständiger HTML-Block.

<live-chart>
  <script type="application/json">
    {
      "type": "column",
      "theme": "editorial",
      "title": "Weekly Signups",
      "source": "Product analytics",
      "data": {
        "labels": [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri"
        ],
        "series": [
          {
            "name": "Signups",
            "values": [
              12,
              19,
              14,
              27,
              22
            ]
          }
        ]
      }
    }
  </script>
</live-chart>

3 · Oder die Spezifikation anders übergeben

Drei Eingabewege, dasselbe Ergebnis. Wähle passend zur Seite. Ein spec-Attribut mit JSON eignet sich für serverseitig gerenderte Vorlagen:

<live-chart spec='{"type":"line","theme":"mint","data":{"labels":["Q1","Q2","Q3"],"series":[{"values":[12,19,27]}]}}'></live-chart>

Für Skripte eignet sich die Eigenschaft spec: Weise ein normales Objekt ohne Serialisierung zu. Ein neuer Wert an einem bereits geladenen Diagramm löst den animierten Übergang aus:

const chart = document.querySelector("live-chart");
chart.spec = {
  "type": "line",
  "theme": "mint",
  "title": "Weekly Signups",
  "source": "Product analytics",
  "data": {
    "labels": [
      "Mon",
      "Tue",
      "Wed",
      "Thu",
      "Fri"
    ],
    "series": [
      {
        "name": "Signups",
        "values": [
          18,
          24,
          20,
          33,
          29
        ]
      }
    ]
  }
};

Das Element liest jede Änderung neu ein. Die Engine animiert von der alten zur neuen Form, auch zwischen Diagrammtypen. Eine eigene API zum Aktualisieren ist nicht nötig.

Größe

Das Host-Element ist ein Block mit voller Breite und standardmäßig 300 px Höhe. Lege seine Größe wie bei anderen Elementen fest. Der Canvas folgt dem Rahmen und bleibt auf hochauflösenden Bildschirmen scharf:

live-chart {
  height: 420px;      /* default is 300px */
  max-width: 720px;
}

Auf fremden Seiten steht unter dem Canvas die kleine Zeile Made with Meiku Charts. Diese Kennzeichnung finanziert das kostenlos gehostete Bundle. Sie ist ein nofollow-Link nach Googles Regel für Widget-Links, benötigt etwa 16 px und erscheint weder auf meikucharts.com noch bei der Entwicklung auf localhost.

Pro und die Kennzeichnung

Mit Pro entfällt die Kennzeichnung bei allen Diagrammen auf den Websites in deinem Konto. Du musst den Seitencode nicht ändern. Optional kannst du license="mk_…" mit deinem Website-Schlüssel ergänzen, damit ein neues Diagramm schon beim ersten Aufruf ohne Kennzeichnung startet. Schreibe den Pro-Schlüssel niemals in den Seitencode. Sind Websites in Pro eingetragen, übernehmen Maker in einem Browser mit aktivem Pro den Website-Schlüssel in kopierten Embed-Code. Pro umfasst 1 Website einschließlich ihrer Subdomains; Team bis zu 10. Beide ermöglichen eine eigene Quellenzeile oder gar keine.

Wenn deine Website eine Content-Security-Policy setzt, ergänze https://lic.meikucharts.com in connect-src sowie https://meikucharts.com, falls du das optionale Lizenzattribut verwendest. Ohne diese Einträge bleibt die Kennzeichnung erhalten; nichts geht kaputt. Bei einem Netzausfall gilt eine zuvor erfolgreiche Prüfung im Browser dieses Besuchers bis zu 7 Tage weiter. Ein neuer Besucher sieht die Kennzeichnung. Versuche, die Free-Kennzeichnung zu verstecken, stellen sie wieder her und ergänzen eine meikucharts.com-Kennzeichnung im Diagramm. Die Einrichtung erklärt Pro aktivieren.

Zustände für CSS und Skripte

Das Host-Element spiegelt den Engine-Zustand als Attribut: animating beim Zeichnen oder Übergang, idle danach. Unsere Tests warten auf state="idle". Deine Seite kann ebenso warten oder CSS daran binden:

live-chart[state="animating"] { /* drawing or morphing */ }
live-chart[state="idle"]      { /* settled */ }

Eine ungültige Spezifikation löst keine Exception aus: Das Diagramm zeigt eine kurze strukturierte Meldung. Die Eigenschaft error liefert dieselbe Liste aus {path, message, hint}, die in der Spezifikationsreferenz beschrieben ist.

Barrierefreiheit ist eingebaut

Jedes Diagramm enthält eine versteckte Tabelle mit Rohwerten für Screenreader, ein benennendes aria-label und Tastaturnavigation: Tab zum Canvas, Pfeiltasten zwischen Markierungen, Escape zum Verlassen, mit sichtbarem Fokusring. Tooltips sind auch per Tastatur erreichbar. Dafür ist keine Konfiguration nötig.

Theme der Einbettung

Diagramme und Tabellen verwenden die helle oder dunkle Variante ihres Themes. Mit options.variant als "auto" folgt die Einbettung deiner Seite: zuerst deren Theme-Schalter über data-theme oder data-bs-theme, eine dark-Klasse an html/body oder color-scheme, danach der Systemeinstellung. Beim Umschalten ändert sich das Diagramm live. Ohne Variante gilt die Standardvariante des Themes; "light" oder "dark" legen die Variante fest. Eine Live-Tabelle im Artikel kann die Seitenschrift übernehmen (options.font: "inherit"), eine Höhenbegrenzung (options.height), Suche (options.search) und Seitenaufteilung (options.pageSize) erhalten. Details und Format-/Zieloptionen stehen in der Spezifikationsreferenz.

Was eine Einbettung niemals tut

Diagrammdaten werden im Browser des Besuchers dargestellt. Einbettungen setzen keine Cookies und verfolgen keine Besucher. Das Element lädt seine Skripte und fragt lic.meikucharts.com nach Pro für die Website; dabei wird nur ihr Name übertragen. Hat die Website keinen Website-Pass, sendet eine Einbettung mit optionalem Lizenzattribut zusätzlich den öffentlichen Website-Schlüssel und den Hostnamen an meikucharts.com zur Lizenzprüfung, gewöhnlich einmal täglich. Keine der Prüfungen überträgt Diagrammdaten, Seiteninhalte oder Besuchercookies. Siehe Datenschutzerklärung.