Documentación · Insertar

Inserta un gráfico que siga siendo interactivo

Un script alojado, un elemento personalizado, sin compilación. El gráfico se dibuja, cambia de forma al cambiar su especificación e incluye su propia accesibilidad. Esta página describe el contrato completo. Para la versión breve, consulta Primeros pasos.

1 · Carga el elemento

El archivo es autónomo e incluye el motor: unos 30 KB con gzip. Se sirve desde este dominio con CORS abierto, por lo que la misma etiqueta funciona en cualquier origen. El cursor, las descripciones emergentes y la navegación con teclado llegan en un segundo archivo pequeño tras el primer dibujo (/v1/live-chart-interact.js). Una tabla en vivo carga otro archivo bajo demanda (/v1/live-chart-table.js), solo en páginas que muestran una tabla.

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

2 · Añade un gráfico con JSON como hijo

La forma habitual de empezar: la especificación va dentro del elemento y el código es un bloque HTML autónomo.

<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 · O pasa la especificación de otra forma

Tres entradas, el mismo resultado. Elige la que convenga a tu página. Un atributo spec con JSON sirve para plantillas generadas en el servidor:

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

La propiedad spec sirve para scripts: asigna un objeto, sin serialización. Cambiarla en un gráfico montado también inicia la transición:

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

El elemento vuelve a analizar cada cambio y el motor anima la transición de la forma anterior a la nueva, incluso entre tipos de gráfico. No hay una API de actualización aparte que aprender.

Tamaño

El elemento ocupa un bloque de ancho completo y 300 px de alto por defecto. Ajusta su tamaño como el de cualquier elemento: el lienzo sigue su recuadro y mantiene la nitidez en pantallas de alta densidad:

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

En páginas de terceros, el gráfico muestra una pequeña firma «Hecho con Meiku Charts» bajo el lienzo. Esa firma financia el archivo alojado gratuito. Es un enlace nofollow, según la regla de Google para enlaces de widgets; ocupa unos 16 px y nunca aparece en meikucharts.com ni en localhost durante el desarrollo.

Pro y la firma de las inserciones

Con Pro, todos los gráficos de los sitios de tu cuenta dejan de mostrar la firma. No tienes que cambiar tus páginas. Opcionalmente, añade license="mk_…" con la clave del sitio para que un gráfico nuevo aparezca sin firma desde su primera visita. Nunca pongas la clave Pro en el código de la página. Si Pro tiene sitios web, los creadores de un navegador con Pro activo incluyen la clave del sitio en el código copiado. Pro cubre 1 sitio web, incluidos sus subdominios; Team, hasta 10. Ambos permiten una firma propia o ninguna.

Si tu sitio usa Content-Security-Policy, añade https://lic.meikucharts.com a connect-src, y https://meikucharts.com si usas el atributo de licencia opcional. Sin ellos, los gráficos conservan la firma y siguen funcionando. Durante un fallo de red, una comprobación anterior correcta mantiene el gráfico sin firma hasta 7 días en ese navegador; un visitante nuevo ve la firma. Intentar ocultar la firma Free la restaura y añade una marca meikucharts.com dentro del gráfico. Consulta la configuración en Cómo activar Pro.

Estados para estilos y scripts

El elemento refleja el estado del motor en un atributo: animating mientras dibuja o cambia de forma, idle al terminar. Nuestras pruebas esperan a state="idle"; tu página puede hacer lo mismo o aplicar CSS según el estado:

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

Una especificación que no se puede analizar no lanza excepciones: el gráfico muestra un breve mensaje estructurado y la propiedad error devuelve la misma lista {path, message, hint} descrita en la referencia de especificación.

Accesibilidad incluida

Cada gráfico incluye una tabla oculta con los valores originales para lectores de pantalla, un aria-label que lo identifica y navegación con teclado: Tabulador hasta el lienzo, flechas entre marcas y Escape para salir, con un anillo de foco visible. Las descripciones emergentes del cursor también están disponibles con teclado. No necesitas configurar nada.

Tema de la inserción

Gráficos y tablas usan la variante clara u oscura de su tema. Con options.variant en "auto", la inserción sigue tu página: primero su selector mediante data-theme o data-bs-theme, una clase dark en html/body o color-scheme; después la preferencia del sistema del visitante. Cambia en vivo cuando cambia el selector. Si omites la variante, se usa la propia del tema. Fijar "light" o "dark" conserva esa variante. Una tabla en vivo también puede heredar la fuente de la página (options.font: "inherit"), limitar su altura (options.height), incluir búsqueda (options.search) y páginas (options.pageSize). Consulta los detalles y las opciones de formato y objetivo en la referencia de especificación.

Qué no hace una inserción

Los datos del gráfico se dibujan en el navegador del visitante. Las inserciones no usan cookies ni rastrean a los lectores. El elemento carga sus scripts y pregunta a lic.meikucharts.com si el sitio tiene Pro, enviando solo su nombre. Si el sitio no tiene pase, una inserción con el atributo de licencia opcional también envía la clave pública del sitio y el nombre del host a meikucharts.com para comprobar la licencia, normalmente una vez al día. Ninguna comprobación envía datos del gráfico, contenido de la página ni cookies del visitante. Consulta la política de privacidad.