M谩s

    Creaci贸n de su primer gr谩fico de JavaScript interactivo

    - Advertisement -

    Los datos est谩n a nuestro alrededor y su visualizaci贸n ya se ha convertido en una parte esencial de nuestras vidas. Los gr谩ficos, infograf铆as, mapas y tableros tienen una gran demanda hoy en d铆a porque nos presentan informaci贸n de una manera que se puede interpretar f谩cilmente.

    Lo bueno es que la creaci贸n de gr谩ficos no requiere grandes habilidades o conocimientos especiales por parte de desarrolladores web, dise帽adores o cualquier otra persona. En este art铆culo, le mostraremos los conceptos b谩sicos y le explicaremos c贸mo manejar la visualizaci贸n de datos interactivos usando JavaScript y HTML5, con facilidad.

    Comenzaremos creando un gr谩fico de barras de una sola serie para que pueda comprender los conceptos b谩sicos. Luego, le mostraremos una forma r谩pida de crear gr谩ficos de barras apiladas y de series m煤ltiples. Los gr谩ficos de barras son una forma popular de presentar datos en estos d铆as, y la l贸gica de desarrollo utilizada se puede traducir f谩cilmente a otros tipos de gr谩ficos.

    El cuadro final ser谩 este gr谩fico de barras 100% apiladas:

    ver la pluma Final (t铆tulo). Gr谩fico de barras 100% apilado personalizado por Rusl谩n (@ruslankorsar) en C贸digoPen.

    Hoy hay muchas bibliotecas de gr谩ficos de JavaScript; algunos de ellos son absolutamente gratuitos, como D3 y Gr谩ficos de Google mientras que otros requieren pagos por uso comercial. En mi opini贸n, los m谩s completos y s贸lidos de ellos son amCharts, Cualquier gr谩ficoy Gr谩ficos altos.

    Para este tutorial, he decidido usar Cualquier gr谩fico. Sin embargo, el proceso es muy similar para todas las bibliotecas, especialmente si est谩 haciendo algo simple. AnyChart tiene una amplia documentaci贸n y Referencia de la API as铆 como una gran variedad de tipos de gr谩ficos admitidos y demostraciones en el c贸digo de juegospor lo que es una buena opci贸n para principiantes.

    Para su comodidad, todos los ejemplos ilustrados en el tutorial est谩n disponibles en esta colecci贸n en CodePen y puede explorarse all铆 mismo o exportarse a archivos ZIP con archivos de demostraci贸n CSS/HTML/JavaScript.

    Gr谩ficos JS en 3 sencillos pasos

    El proceso de creaci贸n de un gr谩fico de JavaScript b谩sico para su sitio web o aplicaci贸n consta de los siguientes tres pasos:

  • Prepare sus datos;
  • Conecte la biblioteca;
  • Escribe un c贸digo sencillo.
  • 1. Preparaci贸n de datos

    As铆 como un gran barco quiere aguas profundas, un gr谩fico simple quiere datos simples. Por supuesto, si tiene una gran cantidad de datos o su estructura no es obvia, primero debe prepararlos.

    Al crear la mayor铆a de los tipos de gr谩ficos populares, solo necesitamos los campos X e Y. Sin embargo, los gr谩ficos de barras pueden ser a煤n m谩s simples porque a menudo sucede que solo se usa el campo Y, y un 铆ndice, o un n煤mero de elemento, se toma como X. Ese es el caso cuando usamos una matriz de datos de JavaScript, por ejemplo:

        // 5 data points = 5 categories for a single series
            var data = [19, 24, 30, 34, 42];
        // Y is these values; X is item numbers [0,1,2,3,4,5]
    

    Si usa JSON/XML para transferir datos, sus datos podr铆an tener el siguiente aspecto.

        [{
            'x': 'Product A',
            'value': 19
        },{
            'x': 'Product B',
            'value': 24
        }...]
    

    En t茅rminos generales, hay muchas formas de trabajar con datos, y los desarrolladores de software de visualizaci贸n suelen describir todas o muchas de ellas en los documentos. Con eso en mente, recomiendo revisar el secci贸n relevante de la documentaci贸n de su biblioteca de gr谩ficos.

    2. Obtener una biblioteca de gr谩ficos

    La biblioteca que usa es obviamente un ingrediente vital aqu铆. Si va a usar gr谩ficos localmente, deber铆a ser razonable descargar el paquete binario y mant茅ngalo cerca.

    Sin embargo, si necesita gr谩ficos para una aplicaci贸n web o una p谩gina en un sitio web, entonces un CDN puede ser una mejor opci贸n. Cargar谩 los archivos desde el servidor m谩s cercano a su cliente, brind谩ndole una carga de p谩gina m谩s r谩pida y un mejor rendimiento.

    <script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
    

    3. Escribir un c贸digo HTML/JavaScript simple

    Cuando nuestros datos y la biblioteca est茅n listos, podemos comenzar a escribir el c贸digo para dibujar nuestro gr谩fico.

    鉂 Tambi茅n te interesa:C贸mo dise帽ar una p谩gina web MVPC贸mo dise帽ar una p谩gina web MVP

    a) Primero, necesitamos crear un contenedor de gr谩fico en la p谩gina. La mejor manera es usar un

    elemento y establezca su ID:
        <div id="container"></div>
    

    b) Despu茅s de eso, incluyamos nuestros datos:

    var data = [
            {x: 'DVD player', y: 19},
            {x: 'Home theater system', y: 24},
            {x: 'Karaoke player', y: 30},
            {x: 'Projector', y: 34},
            {x: 'TV receiver', y: 42}
        ];
    

    c) Luego, especificamos qu茅 tipo de gr谩fico queremos llamando a la funci贸n constructora correspondiente:

        var chart = anychart.bar();
    

    d) Para que las cosas sean m谩s claras para los espectadores, quiero darle un t铆tulo al gr谩fico:

        chart.title('Product Sales');
    

    e) Ahora, vamos a crear una serie:

        chart.addSeries(data);
        // or we can specify a simple dataset within the method:
        chart.addSeries([19, 24, 30, 34, 42]);
    

    f) Nuestro gr谩fico debe colocarse en un contenedor, por lo que estamos especificando el que acabamos de crear:

        chart.container('container');
    

    g) Todo parece estar bien, as铆 que podemos dibujar nuestro gr谩fico ahora:

        chart.draw();

    As铆 es como se ve el resultado:

    El siguiente es el c贸digo completo para su conveniencia:

    <html>
    <head>
        <script src="//cdn.anychart.com/js/latest/anychart.min.js" type="text/javascript"></script>
        <script>
    anychart.onDocumentLoad(function() {
        var data = [
            {x: 'DVD player', y: 19},
            {x: 'Home theater system', y: 24},
            {x: 'Karaoke player', y: 30},
            {x: 'Projector', y: 34},
            {x: 'TV receiver', y: 42}
        ]; 
        var chart = anychart.bar();
        chart.title('Product Sales');
        chart.addSeries(data);
        chart.container('container');
        chart.draw();
    });
        </script>
    </head>
        <body>
            <div id="container"></div>
        </body>
    </html>
    

    Parece bastante sencillo, 驴no? Y ahora podemos comparar convenientemente las ventas totales por categor铆a.

    Creaci贸n de gr谩ficos de barras apiladas y de series m煤ltiples

    Ahora que hemos aprendido los conceptos b谩sicos de los gr谩ficos con JavaScript, podemos proceder a crear un gr谩fico un poco m谩s complejo que muestre m谩s informaci贸n. Como dije anteriormente, le mostrar茅 una manera f谩cil de hacer un gr谩fico de barras de varias series y luego uno apilado.

    B谩sicamente, los procedimientos son bastante similares. Como siempre, todo comienza con los datos.

    Datos de una tabla

    En el contexto del gr谩fico de barras anterior, ten铆amos una variable (la serie de datos de ventas de productos) y varias categor铆as (tipos de productos). Para mostrar adicionalmente la composici贸n de cada valor, que es la esencia de los gr谩ficos de barras apiladas, necesitamos datos m谩s detallados.

    Para ello, podemos utilizar datos que ya se muestran en la p谩gina. Por ejemplo, si ya tiene una tabla HTML, puede crear f谩cilmente un gr谩fico basado en ella. Si utiliza AnyChart M贸dulo adaptador de datos todo lo que necesita es especificar esa tabla como fuente de datos.

    1) Obtenga el adaptador de datos:

        <script src="https://cdn.anychart.com/js/latest/data-adapter.min.js"></script>
    

    2) Prepare los datos de la tabla:

        var tableData = anychart.data.parseHtmlTable('#tableWithData');
    

    3) Cree un gr谩fico y especifique la fuente de datos:

        var chart = anychart.bar();
        chart.data(tableData);
    

    El resultado inmediato es un gr谩fico de barras de varias series que nos permite, por ejemplo, comparar r谩pidamente el rendimiento de cada producto dentro de cada categor铆a.

    2-multi-series-bar-chart

    Cambiar el tipo de serie

    Todos los detalles necesarios, incluidos los datos, ya est谩n especificados. Ahora podemos cambiar el tipo de serie y obtener un gr谩fico de barras apiladas a partir de ese convencional de varias series. No es dif铆cil en absoluto, ya que solo necesita una l铆nea de c贸digo para apilar los valores:

    鉂 Tambi茅n te interesa:C贸mo se ve el dise帽o web centrado en el clienteC贸mo se ve el dise帽o web centrado en el cliente
        chart.yScale().stackMode('values');
    

    隆Voila!

    Gr谩fico de 3 barras apiladas

    Acabamos de crear un gr谩fico de barras apiladas sobre la marcha sin cambiar realmente la configuraci贸n de esa serie m煤ltiple. Como resultado, no solo estamos listos ahora para comparar las ventas totales por categor铆a como con el gr谩fico de barras de una sola serie del comienzo del art铆culo, sino que tambi茅n podemos identificar qu茅 producto es responsable de hacer que una categor铆a sea m谩s peque帽a o m谩s grande que otras. .

    Dado que acordamos de antemano que nuestro objetivo final es un gr谩fico de barras 100% apiladas, cambiemos el modo para obtenerlo:

        chart.yScale().stackMode('percent');
    

    gr谩fico de barras apiladas del 4 por ciento

    Es un gr谩fico de barras 100 % apiladas, que le permite resaltar las relaciones de parte a todo y evaluar la contribuci贸n de cada producto al total de la categor铆a.

    Personalizaci贸n del dise帽o

    El dise帽o es muy importante en la visualizaci贸n de datos, para atraer la atenci贸n, mejorar la claridad y mantener la integridad visual dentro de su proyecto web. Afortunadamente, con esta biblioteca de gr谩ficos, la personalizaci贸n es bastante simple.

    Agregar texto

    Para mayor claridad, puede proporcionar su visualizaci贸n con textos adicionales. Por ejemplo, le dar茅 un t铆tulo al eje vertical y agregar茅 una etiqueta de gr谩fico temporalmente:

        chart.xAxis().title('Products');
        chart.label({text: 'Classified!'});
    

    Gr谩fico de barras apiladas al 5 por ciento con texto

    Ajustes de color

    Puede agregar color a trav茅s de una paleta (gr谩fico.paleta()) y cambiar la configuraci贸n de fondo (gr谩fico.fondo()) entre otras cosas. O puedes usar un tema:

        <script src="//cdn.anychart.com/themes/latest/wines.min.js" type="text/javascript"></script>
    

    Luego debemos especificarlo en la configuraci贸n del gr谩fico:

        anychart.theme(anychart.themes.wines);
    

    6

    Interactividad de gr谩ficos

    Hacer un gr谩fico de JavaScript al menos un poco interactivo no es gran cosa.

    Probablemente, el enfoque m谩s b谩sico consiste en habilitar el estado de desplazamiento sobre los puntos de datos, para que cambien de color o agreguen o modifiquen marcadores. El estado de selecci贸n determina c贸mo se ve cada punto despu茅s de hacer clic.

    De manera predeterminada, se incluye una interactividad simple basada en pasar el mouse y seleccionar, por lo que en este momento no agregaremos nada al ejemplo anterior. Vuelva a 茅l para explorar la interactividad b谩sica, si lo desea.

    Vale la pena hablar sobre el elemento de informaci贸n sobre herramientas, que puede flotar cuando se pasa el cursor sobre un punto. Siempre trato de hacer un buen uso de la informaci贸n sobre herramientas haciendo que muestren informaci贸n 煤til sobre a qu茅 serie pertenece un punto, qu茅 valor representa, etc. Puede ajustar f谩cilmente la informaci贸n sobre herramientas para mostrar cualquier cosa. Estamos introduciendo la informaci贸n sobre herramientas y especificando qu茅 mostrar en ella:

        var tooltip = chart.tooltip();
        tooltip.displayMode('union');
        tooltip.textFormatter('{%SeriesName}: {%Value} ({%YPercentOfCategory}%)');
    

    Aqu铆 est谩 el resultado:

    7

    Esto es solo un breve vistazo a las opciones de personalizaci贸n, entrar en detalles ser铆a un art铆culo completo en s铆 mismo. Por ahora, le sugiero que lea el secci贸n de interactividad de la documentaci贸n para m谩s informaci贸n.

    Conclusi贸n

    Como puede ver, no es dif铆cil crear gr谩ficos interactivos con JavaScript. Adem谩s, puedes encontrar todos los ejemplos del tutorial en mi colecci贸n en CodePen y util铆celos f谩cilmente en su trabajo. Simplemente copie el c贸digo, cambie mis datos por los suyos y ponga en marcha su proyecto r谩pidamente.

    鉂 Tambi茅n te interesa:Mercenarios del marketingC贸mo Utilizar la API de WhatsApp para Negocios en PHP

    Recuerde siempre consultar la documentaci贸n y/o la referencia de la API, as铆 como prestar atenci贸n a las demostraciones de la biblioteca que est谩 utilizando, como esta galer铆a de AnyChart. Por lo general, no es complicado ver si hay algo parecido a lo que necesita, encontrar un ejemplo que se ajuste mejor, hacer algunas enmiendas simples y luego usarlo de la manera que lo necesita.

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.