Crea gráficos interactivos en IONIC 2

Sep 13, 2025

Cómo

[dieciséis]

Cuando trabaja en un equipo pequeño, tiende a ser difícil escribir y mantener un código separado para Android, iOS y Windows. Ahí es donde los marcos híbridos como IONIC entran en la imagen. No solo nos permiten escribir una sola pieza de código que se puede usar en las tres plataformas, pero significa que podemos hacerlo usando nuestra pila de tecnología existente.

En este tutorial, exploraremos cómo abordar una tarea común como la visualización de datos en IONIC 2, uno de los marcos de aplicación híbrida más prometedores que existen. Utilizaré la biblioteca de gráficos de JavaScript FusionCharts (FusionCharts.com), para este proyecto, ya que ofrece una gran biblioteca de más de 90 gráficos, es compatible con cada dispositivo y navegador, y es muy fácil de trabajar.

Configuración iónico 2

Para desarrollar aplicaciones con IONIC 2, necesita Nede.js versión 4+ y NPM que se ejecuta en su sistema operativo. Puede descargar el paquete node.js de nodejs.org/en/download y las NPM se instalarán junto con ella. Si ya tiene una versión diferente de NOde.js en funcionamiento y también desea ejecutar la versión 4+, puede hacerlo a través de Manager de la versión del nodo .

A continuación, debe instalar IONIC 2 BETA usando NPM. Para hacer esto, correr NPM install -g iónico @ beta en su terminal de una cuenta de usuario con privilegios de root (estamos instalando el módulo globalmente). Para simular la aplicación iónica, estamos creando en múltiples plataformas, necesitamos un módulo de nodo más: Córdoba . Puede instalar esto globalmente usando NPM install -g Córdova .

Ahora estamos listos para crear nuestra primera aplicación iónica. Sin embargo, con esta configuración, solo podremos ver la aplicación en un navegador. Para simular la aplicación para un dispositivo IOS o Android, necesitamos construir ese módulo de plataforma en particular a Córdoba. En este tutorial estaremos construyendo el módulo IOS, por lo que debe correr Plataforma iónica Añadir iOS .

Finalmente, necesitas instalar Xcode. Encontrarás instrucciones para esto. aquí .

Creando una aplicación IONIC 2

En este tutorial, vamos a crear una aplicación IONIC 2 llamada 'Gráficos'. Crearemos una carpeta de 'gráficos' en su directorio de trabajo actual y bootstrap la aplicación con una aplicación de muestra. La aplicación de muestra contendrá una página básica, como se describe aquí.

Para crear esta aplicación, ejecute Gráficos de inicio iónico --v2 en el directorio de trabajo actual ( gráficos es el nombre de la aplicación y --v2 Le dice a IONIC que queremos crear una aplicación iónica 2). En ejecución de este comando, un gráficos La carpeta se creará en el directorio de trabajo actual. Para probar la aplicación en el navegador, navegue a la gráficos carpeta y correr servir iónico . Esto lanzará la aplicación en su navegador predeterminado.

Añadiendo una nueva página

Ahora vamos a agregar una página / componente a la gráficos Aplicación que creará cuadros de JavaScript. Primero, solo agregaremos una página HTML simple con 'Hello World' en ella.

En IONIC 2, se pueden agregar páginas a la aplicación iónica usando el @Página Decorador (un módulo iónico basado en componentes angulares 2), que tiene acceso a la funcionalidad iónica completa. Una página desnuda se requiere un archivo HTML de la plantilla (que contiene la marca) y un archivo JavaScript (que contiene la lógica necesaria). Puedes encontrar más detalles sobre las páginas iónicas. aquí .

Para crear la página, agregaremos. Donut-Chart.js y Donut-Chart.html archivos a la Gráficos / Aplicación / Páginas Donut-Chart directorio. En el archivo HTML, podemos agregar el código para la navegación de la aplicación y un simple encabezado de 'Hello World':

 & lt; Ion-NavBAR * NavBAR & GT;
& lt; botón menuoggle & gt;
  & lt; Ion-icon Name = "Menu" & GT; / Ion-Icon & GT;
& lt; / Button & GT;
& lt; ion-title & gt; hola iónico & lt; / ion-title & gt;
& lt; / Ion-NavBAR & GT;

& lt; ion-content & gt;
  & lt; h1 & gt; hola world & lt; / div & gt;
& lt; / ion-content & gt;

En el archivo JavaScript, realicamos referencia al archivo HTML creado como la plantilla para este componente. Dado que aún no estamos haciendo nada de lujo, podemos agregar un constructor vacío Fábrica .

 Importar {Página} de 'iónico-angular';

@Página({
  Templateurl: 'Build / Pages / Pie-Chart / Pie-Chart.html'
})

Clase de exportación Classpage {
  constructor () {
  }
}

Acabamos de crear un componente independiente; Ahora necesitamos vincular esto a la aplicación principal. Para hacer esto, debemos hacer referencia al componente que hemos creado en el app.js archivo en la carpeta de la aplicación y use el componente en el páginas Propiedad del constructor de componentes de la aplicación.

 Importar {Chartspage} de './pages/donut-chart/donut-chart'

constructor (aplicación, plataforma, menú) {
    // Constructor de aplicaciones predeterminado
    esta.app = aplicación;
    esta.platform = plataforma;
    este.Menu = menú;
    esto.initializevp ();
    // Establece las páginas de nuestra aplicación: estamos agregando la tabla de donas aquí
    esto.pages = [
      {Título: 'Bienvenido', componente: helloionicio},
      {Título: 'Donut Chart', Componente: Chartspage}
    ];

    // Hola HELOIONIGPAGE la página raíz (o primera): Paso predeterminado
    esta.rootpage = helloionicpage;
}

Después de realizar estos cambios, la aplicación iónica en el navegador debe volver a cargar automáticamente (o usar el servicio iónico desde el terminal nuevamente). Ahora, un nuevo enlace debe ser visible en el menú lateral de la aplicación, y al hacer clic en que debe ver 'Hello World' escrito en la pantalla.

Creando una tabla de javascript

Ahora es el momento de modificar nuestra página 'Hello World' para crear un gráfico de donas. Para poder usar la biblioteca FusionCharts, necesitamos incluir primero el fusioncharts.js y fusioncharts.charts.js archivos en el www / index.html expediente.

Sugerencia rápida: si ambos archivos están en la misma carpeta, luego agregando fusioncharts.js será suficiente, ya que esto incluirá automáticamente fusioncharts.charts.js .

 & lt; Script Type = "Text / Javascript" src = "ruta / to / fouscharts.js" & gt; / script & gt;

Ahora modificaremos el HTML desde el paso anterior para crear un contenedor de gráfico:

 & lt; div id = "gráfico-contenedor" & gt; & lt; / div & gt;

En el constructor en Donut-Chart.js , que creamos anteriormente, debemos agregar el siguiente código para crear la tabla dentro del contenedor de la tabla:

 FusionCharts.ready (Función () {
  var revenuechart = nuevas fusioncharts ({
    Tipo: 'DoughNut2D',
    Renderat: 'TRABAJA-CONTENEDOR',
    Ancho: '100%',
    Altura: '450',
    DataFormat: 'JSON',
    fuente de datos: {
      "gráfico": {
        "Leyenda": "Dividir de ingresos por categorías de productos",
        "Subcaption": "El año pasado",
        "Numberprefix": "$",
        "Palettecolor": "# 0075C2, # 1Aaf5D, # F2C500, # F45B00, # 8E0000",
        // Más atributos de la tabla
      },
      "datos": [{
          "Etiqueta": "Comida",
          "Valor": "28504"
        } // Más datos
      ]
    }
  }).hacer();
});

En este Código estamos creando una nueva tabla a través del constructor FusionCharts. Las propiedades utilizadas se explican brevemente a continuación:

escribe Define el tipo de gráfico.

renderizado Es la identificación del contenedor donde queremos hacer la tabla.

ancho y altura Se utilizan para establecer las dimensiones del gráfico.

formato de datos es el formato en el que vamos a alimentar los datos del gráfico (puede usar JSON, así como XML)

fuente de datos Contiene los cosméticos del gráfico dentro de las fusioncarts. gráfico objeto y los datos reales a traze dentro del datos formación

Aunque he mostrado solo cuatro atributos en el gráfico Objeto, hay más de cien otros que puede usar para mejorar el diseño de su tabla. Puedes leer más sobre eso aquí .

Una vez que se agrega este código, ejecute servir iónico para relanzar la aplicación. Debe ver un enlace de 'gráfico de donas' en su menú lateral. Si siguió todos mis pasos correctamente, cuando haga clic en ese enlace, ¡debe ver una tabla de donas! Si no, por favor, consulte el código en el Github repo para este proyecto Para ver dónde saliste mal.

Nota: Después de comprobarlo en el navegador, use emule iónico iOS Para cargar su aplicación en el simulador de iOS.

Resumiendo

Our doughnut chart representing the revenue split of a hypothetical company by product categories

Como acaba de ver, no es difícil comenzar con la visualización de datos en IONIC 2. Aunque acabo de hacer un simple carta de donas para demostrar el proceso, es posible crear gráficos complejos con múltiples conjuntos de datos utilizando el mismo proceso.Lo único que necesita para averiguar es el formato en el que FusionCharts acepta los datos para ese tipo de carta en particular.Una vez que pueda hacerlo, podrá hacer cualquier tabla de la biblioteca.

Si necesita ayuda con este tema o si tiene alguna pregunta sobre el contenido de este tutorial, siéntase libre de atraparme en Twitter .Siempre estoy feliz de ayudar!

Este artículo apareció originalmente en revista neta emisión 283; cómpralo aquí .

Crea gráficos interactivos en IONIC 2

Configuración iónico 2

Creando una aplicación IONIC 2

Añadiendo una nueva página

Creando una tabla de javascript

Resumiendo

Cómo - Artículos más populares

Composición en la animación: aprenda lo básico

La guía esencial para el preesportamiento en el arte

Configuración de privacidad de Facebook: Cómo mantener su perfil privado

Crea una página de destino de WebGL 3D

Cómo resolver una cara para la animación

Crea texturas fantasmales con técnicas mixtas

Diseñe gráficos SVG en su navegador

Los secretos de cumplir un resumen de diseño creativo

Categorías