Erste Schritte in weniger als einer Minute.

Drei Schritte: Datei einbinden, Diagramm einsetzen, Daten ändern. Das Diagramm unten zeigt dieselben Werte wie Schritt 2, von der echten Engine gezeichnet – kein Screenshot.

1. 1. Datei einbinden

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

   Kopieren

   Eine gehostete Datei von meikucharts.com, ohne Build-Schritt.

2. 2. Diagramm einsetzen

   <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>

   Kopieren

   Eine JSON-Spezifikation direkt im Markup. Kein Build-Schritt nötig.

3. 3. Daten ändern – das Diagramm bewegt sich

   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
           ]
         }
       ]
     }
   };

   Kopieren

   Setze .spec im Code, und das Diagramm geht fließend in die neue Form über.

Ein Skript · keine Laufzeitabhängigkeiten · Meiku-Charts-Lizenz – Live-Beispiele aller Typen unter Beispiele, den vollständigen Vertrag findest du in der Doku.