Empieza en menos de un minuto.

Tres pasos: carga el archivo, añade el gráfico y cambia sus datos. El gráfico de abajo muestra los valores del paso 2, dibujados por el motor real; no es una captura de pantalla.

1. 1. Carga el archivo

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

   Copiar

   Un archivo alojado en meikucharts.com, sin paso de compilación.

2. 2. Añade el gráfico

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

   Copiar

   Una especificación JSON directamente en el marcado. Sin compilación.

3. 3. Cambia los datos y el gráfico se mueve

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

   Copiar

   Asigna .spec desde tu código y el gráfico cambia con una transición fluida.

Un script · sin dependencias de ejecución · Licencia de Meiku Charts. Mira todos los tipos en Ejemplos y el contrato completo en la documentación.