Gráficos React con datos JSON
xarts monta gráficos en React a partir de una spec JSON nativa. El flujo consiste en elegir un preset, adaptar sus datos, preparar la composición y renderizar el componente. La misma spec también puede producir un SVG para documentos.
Empieza por un contrato completo
Un preset contiene un ejemplo válido de una familia. Es el punto de partida para entender sus datos, sus opciones de presentación y las relaciones que exige. El selector del editor permite explorar las piezas antes de integrarlas.
La spec identifica su contrato con version y family. Las claves de datos dependen de la familia: algunas utilizan filas; otras, nodos y enlaces, actividades o geometrías. No se puede intercambiar el bloque de datos de cualquier gráfico con el de otro manteniendo el resto de la configuración.
Qué controla cada parte de la spec
| Parte | Responsabilidad |
|---|---|
| Datos y relaciones | Valores, categorías y referencias que necesita la familia. |
| Cálculo y disposición | Reglas para transformar los datos en posiciones y marcas. |
| Documento | Título, subtítulo, fuente, notas y descripción alternativa. |
| Presentación | Tema, dimensiones, idioma y estrategia de fuentes. |
| Salida | Nombre del archivo y opciones de la exportación SVG. |
Prepara y monta la composición
En la documentación del SDK encontrarás los imports y ejemplos ejecutables de la entrega actual para React, Node.js y TypeScript. Utiliza esos ejemplos como referencia de la API y consulta la sección de compatibilidad antes de incorporar el paquete a tu proyecto.
La preparación valida la spec. Una referencia inexistente, un dato incompatible o una combinación de opciones no admitida puede impedir la generación. En una aplicación conviene mostrar ese error y conservar la última composición válida, como hace el editor público.
Opciones cerradas y contenido libre
Un enum expresa una lista finita de opciones, como una orientación o un modo de etiqueta. Un campo de título o de fuente es texto libre. En el editor, los primeros se presentan con selectores; los segundos permanecen editables. Además, algunas opciones dependen de otras: un perfil concreto puede exigir una orientación determinada.
La validación de la familia sigue siendo necesaria aunque el formulario ofrezca selectores. El conjunto de datos también interviene en los cálculos, y una combinación que funciona para una muestra puede necesitar otros ajustes al cambiar su estructura.
React y SVG comparten el origen
React permite integrar el gráfico en la interfaz y utilizar la interacción admitida por la familia. SVG entrega una figura vectorial. Compartir la spec ayuda a mantener la misma información en una aplicación y en su informe, aunque cada contexto tenga un tamaño y una forma de interacción distintos.
Para trabajar con la salida de documento, sigue la guía de gráficos SVG para informes. Para evaluar la integración, consulta la licencia publicada o solicita acceso al SDK.