Su estructura de archivos debe verse así:

├── 404.html ├── crossdomain.xml ├── css │ ├── main.css └── normalize.css ├── favicon.ico ├── img ├── index.html ├── js │ ├── main.js │ ├── plugins.js └── └── proveedor ├── qu jquery-1.10.1.min.js iz modernizr-2.6.2.min.js └── robots. TXT

Nota: esto no incluye algunos de los archivos incluidos en H5BP que no usaremos.

Paleta de color

Antes de entrar en la codificación del sitio, comencemos configurando una paleta de colores que utilizaremos en todo el diseño. Al hacer esto, podemos establecer una futura "guía de estilo" de clases; Esta es una práctica común para básicamente cualquier diseño dado.

Si está creando el tablero de mandos teniendo en cuenta una marca en particular, comience utilizando los colores de la marca. Hoy vamos a definir dos colores principales y dos colores auxiliares. También usaremos tonos o versiones difuminadas de estos colores..

• azul oscuro: # 637b85
• verde: # 2c9c69
• amarillo: # dbba34
• rojo: # c62f29

También usaremos un tono más claro del azul oscuro., # d0dde3. Por último, utilizaremos colores en escala de grises..

Fundamentos de ChartJS

ChartJS usa el elemento canvas. El elemento de lienzo proporciona una interfaz solo para JavaScript para dibujar píxeles en un área de rectángulo dada. A menudo se compara con SVG, que ofrece una solución basada en el nodo DOM para crear gráficos vectoriales en el navegador. Sin embargo, los píxeles dibujados en el elemento del lienzo no se guardan en la memoria y, por lo tanto, no responden a eventos de JavaScript.

Pero basta con la charla técnica. ¿Cómo empezamos rápidamente con ChartJS??

Afortunadamente, la página de inicio de ChartJS tiene muchos ejemplos para que podamos comenzar rápidamente. El patrón básico es crear el elemento de lienzo en HTML, seleccionarlo con JavaScript y crear el gráfico mientras se pasan los datos a partir de los cuales se crea el gráfico..

El ejemplo anterior supondría que había definido 'datos' y 'opciones' como objetos y produciría un gráfico de líneas en consecuencia.

En nuestro ejemplo, usaremos el gráfico de anillos, el gráfico de líneas y el gráfico de radar. Estas gráficas representarán diferentes métricas orientadas al negocio, pero, por supuesto, puede tomar esto y adaptarlo a sus necesidades..

Marca de página

Empecemos definiendo algunos HTML básicos para el diseño de nuestra página..

Aquí, podemos ver que tenemos una sección básica de encabezado, medio y pie de página. Estamos utilizando la clase .wrapper y la clase .push para crear un pie de página adhesivo (consulte aquí para obtener más información). Primero, crearemos nuestro diseño para que sea compatible con dispositivos móviles y para ampliarlo a partir de ahí. Hay algunos trucos que haremos en el camino, pero esta estructura hará mucho del trabajo por nosotros..

Antes de que vayamos demasiado lejos ...

Tenga en cuenta que el lienzo no se reproduce muy bien con las consultas de medios. Para este tutorial, crearemos una solución para permitir que los gráficos se vuelvan a dibujar en diferentes tamaños en el JavaScript.

Dentro de nuestro archivo main.js, necesitaremos tener una función de tamaño activada por el cambio de tamaño de la ventana. También necesitaremos una función "redibujar" para disparar después de que se active la función de redimensionamiento. Finalmente, cuando volvemos a dibujar los gráficos, no queremos que se animen, como si fuera la primera vez que se dibujan..

(function () // configura la variable de tiempo de espera var t; // configura la función de tamaño, // con un argumento que le dice al gráfico que animar o no el tamaño de la función (animar) // Si estamos cambiando el tamaño, no No quiero que los gráficos se dibujen en cada evento de cambio de tamaño. // Esto borra el tiempo de espera para que solo ejecutemos la función de tamaño // cuando hayamos terminado de cambiar el tamaño de la ventana clearTimeout (t); // Esto restablecerá el tiempo de espera justo después de borrarlo . t = setTimeout (function () $ ("lienzo"). each (function (i, el) // Establece la altura y el ancho del elemento del lienzo a la altura y el ancho de su padre. // El elemento padre es el div. canvas-container $ (el) .attr ("width": $ (el) .parent (). width (), "height": $ (el) .parent (). outerHeight ());); // kickoff the redraw function, que construye todos los gráficos. redraw (animate); // recorre los widgets y encuentra el más alto, y configúralos todos a esa altura. var m = 0; // tenemos que elimine primero cualquier configuración de altura en línea para que obtengamos la altura automática. $ (". widget"). altura (""); $ (". widget"). each (function (i, el) m = Math.max (m, $ (el) .height ());); $ (". widget"). altura (m); , 100); // el tiempo de espera debe ejecutarse después de 100 milisegundos $ (ventana) .on ('redimensionar', tamaño); función redibujar (animación) var opciones = ; if (! animation) options.animation = false;  else options.animation = true;  //… // el resto de nuestro dibujo gráfico se realizará aquí //… tamaño (); // esto inicia el primer dibujo; Tenga en cuenta que la primera llamada a tamaño animará los gráficos en.

Si esto parece un poco intimidante, ¡no te preocupes! Haga una pregunta en los comentarios, y nosotros y la comunidad de Tuts + lo ayudaremos a comprender completamente.!

Algunos CSS para que comencemos

Queremos configurar algunas estructuras básicas de CSS para que podamos comenzar. HTML5 Boilerplate, por supuesto, incluye normalizar y algunos otros valores predeterminados que puede cambiar, pero por el bien del tutorial, escribiremos nuestro CSS después de la línea "Estilos personalizados del autor".

html, cuerpo altura: 100%;  body font-family: 'Source Sans Pro', sans-serif; color: # 666; botón / * * / .button cursor: puntero; texto-decoración: ninguno; tamaño de letra: 0.6em; peso de la fuente: 400; transformación de texto: mayúsculas; pantalla: bloque en línea; relleno: 4px 6px; margen: 0 10px; posición: relativa; fondo: #ccc; color: #fff; box-shadow: 0 0 2px rgba (0,0,0,0.1); fondo: rgb (190,190,190); / * Navegadores antiguos * / fondo: -moz-lineal-gradiente (arriba, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linear, left top, left inferior, color-stop (0%, rgba (190,190,190,1)), color-stop (100%, rgba (170,170,170,1 ))); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Chrome10 +, Safari5.1 + * / background: -o-gradiente lineal (arriba, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (top, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * IE10 + * / background: gradiente lineal (hacia abajo, rgba (190,190,190,1) 0%, rgba (170,170,170,1) 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# bebebe", endColorstr = "# aaaaaa", GradientType = 0); / * IE6-9 * / .button: hover background: # 637b85;  / * Estilos de encabezado * / header text-align: center; fondo: # 637b85; color: #fff; margen inferior: 40px;  encabezado span font-weight: 200;  header .button font-size: 0.2em; arriba: -6px;  / * varios contenedores * / .container ancho: 200px; margen: 0 auto;  .canvas-container min-height: 300px; Altura máxima: 600 px; posición: relativa;  .widget posición: relativo; margen inferior: 80px; fondo: #efefef; relleno: 12px; margen inferior: 30px; -webkit-box-dimensionamiento: cuadro de borde; -mano-caja de tamaño: cuadro de borde; tamaño de caja: caja de borde; 

Aquí, definimos el CSS necesario para el pie de página adhesivo, así como una clase de botón, una clase de contenedor autocentrado, una clase para contener nuestros elementos de lienzo dentro de nuestros widgets y nuestros propios widgets. También necesitaremos agregar la fuente de Google que estamos definiendo para el cuerpo al incluir esto en nuestra etiqueta principal.

El gráfico de anillos

Los gráficos de anillos son muy parecidos a los gráficos circulares, excepto que tienen parte del recorte del medio. De manera predeterminada, ChartJS define que el 50% del área del gráfico debe omitirse; Nos quedaremos con este predeterminado. El código para crear el gráfico de anillos se muestra a continuación..

var data = [value: 20, color: "# 637b85", value: 30, color: "# 2c9c69", value: 40, color: "# dbba34", value: 10, color: "# c62f29"]; var canvas = document.getElementById ("hours"); var ctx = canvas.getContext ("2d"); nuevo gráfico (ctx) .Doughnut (datos);

Aquí puede ver que hemos definido los datos y colores de nuestro gráfico de anillos. Esto es todo lo que se necesita para hacer que el gráfico de rosquilla funcione. Sin embargo, ¿qué representan cada una de las secciones? Desafortunadamente, ChartJS aún no tiene una manera fácil de definir etiquetas para el gráfico de anillos; sin embargo, podemos hacer nuestra propia leyenda para describir cada una de las diferentes secciones. Modifique el código html del widget de anillo para incluir lo siguiente.

Usamos estos li por sus clases muy simplemente en el CSS, aprovechando la pseudo-clase ': before'.

.chart-legend ul list-style: none; ancho: 100%; margen: 30px auto 0;  .chart-legend li text-indent: 16px; altura de línea: 24px; posición: relativa; peso de la fuente: 200; bloqueo de pantalla; flotador izquierdo; ancho: 50%; tamaño de letra: 0.8em;  .chart-legend li: before display: block; ancho: 10px; altura: 16px; posición: absoluta; izquierda: 0; superior: 3px; contenido: "";  .ship: antes de background-color: # 637b85;  .rework: antes de background-color: # 2c9c69;  .admin: antes de background-color: # dbba34;  .prod: antes de background-color: # c62f29; 

A continuación, queremos tener un buen "pulgar hacia arriba" en el centro de la dona. Esto involucra algunos trucos de CSS, incluida una versión de Ol 'Padded Box de Uncle Dave para que el círculo responda. Usaremos el intervalo con la clase de .status para lograr este círculo. Agregue las siguientes reglas a main.css:

.widget.doughnut .status display: block; posición: absoluta; superior: 50%; izquierda: 50%; ancho: 30%; altura: 0; relleno superior: 12%; Relleno inferior: 18%; color: # 444; margen superior: -15%; margen izquierdo: -15%; tamaño de letra: 1.4em; peso de la fuente: 700; text-align: center; radio del borde: 50%; color de fondo: #aaa; Imagen de fondo: url (datos: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAF8AAABkCAQAAABK + + CQQAAAACXBIWXMAAFKnAABSpwHUSB cAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8 / L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N + + QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9 / NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A / hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V / pHDBYY1hrFGNuayJsym740u2C + 02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT // ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs + ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK / cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta + x / + 5Em0mzJ / + DGJ / t8AyNmf2zvs9JmHt6vvmC pYtEFrcu + bYsc / m9lSGrTq9xWbtvveWGbZtMNm / ZarJt + w6rnft3u + 45uy9s / 4ODOYd + Hmk / Jn58xUnrU + fOJJ / 9dX7SRe1LR68kXv13fc5Nm1t379TfU75 / 4mHeY7En + 59lvhB5efB1 / lv5dxc + NH0y / fzq64Lv4T8Ffp360 / rP8f9 / AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA + f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAUYSURBVHja1JxdTBxVFMd / O7vssgvLtxIQKrSVQluNiqVp0xAepKSpiaFKVEyMD2oQNGisifFJ06TRN2xjS2Js0geNHy9am5q0wRhNLNZUwI9aQmtDMbUtSFsKLOyye3xgl8KyHwM7uzv3vwkk99yZ + TF759xzzz0DQko / z8kl8ckt + U26pEEciZ4vtfAu6ZE7GpUjcr9K + EUyIEs1JC2irf6MGqmUi5ywlvUcpnX1J0wtvhvXsrZC3qNeDfwcnBFa7 + FtclXAz8cRsb2BJhXwS7FHbHfwJBnmx6 + IatlCmdnxtRj4JdSYHd9JeVSbg01mx8 + jJIbV9INnDcUxrMWrYUkl / kbcMawOs + PXYYlhtZh78BRSG9M + S8DM + JupimkfNTd + U8yRD1fMPHhK2B3TPsegmfEfizMtjZsZv5QXscbscZ5hs + JrtPFInD6nuG1W / D10xPHqY5xc5bmTvjx / VIYlnj4VuxkzDZo0y99x4SekyYyJEqd0yqjE15fiNB9 + kXwoHh3wt2Sn + dJUZfKF + SIPA ++ ThV8sX4s + JTDuk4VvlwOiV8fElci1kuH3G3leZ88ZjjKd2Ixo / IL8hTix5R2d5btEJ3SjVUuD7r5fccNc + BZayNPZ9wrfJh5OGavKOHH9Yp1hyGz4u1mru + 9PeM2Fn0eL7oyBl3NGxOJGakecbMJSpzlmLnw7z0bYPYkmG5mJX9JmIP4Wdq6gt4smJsnEjg0NKxpa8LeFAH4C + PEx wwyzeLjNNB68SJijE6PgrRzipRUdMctsENoS / BD8GYplAvjxM8csk9xknBEG + J4 / F2WEDIt06uSapEL / yFuSbXTIZpNuSZW8clDcxuLv0LWuMko + 2T + / OjbG82TSTlEKc9U2XuUp48Z + s9yWVOu8bDDm7hfzBtmkWht4BZtmwMTXznbSoSfYmrjfb + QT7iI96k4Uv5LPqCNdupQYfj6HeJr0yWsLBlsFOCKGuoKHceaihMf7aSGdGrQI1NHJwxFLVQCm6KWL35e1V7CPZ + Jk7ZOr / 2hH6mUwro / tk5qFHE65VMhmeVn6JCDplF / eFStyUlfnriD + JumXYbkuc5JuHZcCwcY2XV / UVnKYAOysIZ / 06yr7GAdN53zpWigkEsygs / StZLFowVxyz5eVaaipB + cnS1Xxc + ggS1182MUelfEz6aRCXXx4iHaV8TVaVcaHTJXx / RxVGf8b3lcX / 2fe5Lqq + Bd5jQuq + n0P79CrbtAwwPGQ71Tz7ntVxl8bKuZWE788tPWtJr7G4 / M7Y6o6zu08oDJ + IbtUxodtZKqM78KqMv6PTKmL388Rdcf + ZfZyUVX8ETroUXXaGqYtFLCphz9KJycWT79qqZtjS6MHlTRNz9IMt1r4PqbCYze1ZFEZXwvfClQLX8L3dtTCH + Wayvifh7 / dpen + 2qI8PClUDweXD55JXYdOBVMTPm7iTwv8r7zO1fBGG6dp1HHwGSYAGKKZKqqpYT1lFET5txHG6xfaIhQmYJF6PorzJi3008pfS1qsuCmmgmpqqOJe7iYracMqwAn2Rn4lM1SSURu1JHeK03wQ6S9feBacFFHOfWykmkpKyDW0NneMwxyIVu88X89jpwA7lmU75haEmagFMcuVQR6lrKOaGtZRSBZOHGRgW6iOXYmP9 / AVP / AxvdGfNkuS9vituMnBTS755JNHAfnkkUM22WSThQM7GWSQgQ0IIAQQfMwwzQ3GGOEC5 / Idy / hiXeb / AQDtquZeJxF4 YgAAAABJRU5ErkJggg ==); repetición de fondo: no repetición; tamaño de fondo: 30%; posición de fondo: centro; 

Quizás el elemento más deslumbrante que se destaca aquí es el uso del URI de datos para la imagen de fondo. Esto nos permite evitar una solicitud HTTP adicional, y es sintácticamente sinónimo de usar una url de http real. También estamos configurando este elemento para que se coloque absolutamente dentro de su elemento .widget, que previamente configuramos como posición relativa.

Sigamos adelante y configuremos la tipografía del widget. Solo usamos elementos h3 y p dentro del widget; Aquí está el css que acompaña.

.widget p margin-top: 0; text-align: center;  .widget h3 margen: -12px 0 12px -12px; relleno: 12px; ancho: 100%; text-align: center; color: # 627b86; línea de altura: 2em; fondo: # d0dde3; 

El margen y las reglas de relleno en el elemento h3 permiten que el elemento se extienda hasta el borde del elemento del widget sobre la parte superior del relleno de 12px del widget. También establecemos el margen superior en 0 en el elemento p para que se ajuste más al encabezado del widget.

El gráfico de líneas

Una de las características más útiles de ChartJS es que algunos de los gráficos permiten múltiples conjuntos de datos. Estos conjuntos de datos se dibujarán en el mismo gráfico de forma secuencial, lo que permitirá comparar un conjunto de datos con otro. Un ejemplo perfecto de esto es útil en los gráficos de líneas. Usaremos dos conjuntos de datos para explorar esta funcionalidad..

var data = labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], conjuntos de datos: [fillColor: "rgba (99,123,133,0.4)" , strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", datos: [65,54,30,81,56,55,40],  fillColor: "rgba (219,186,52,0.4)", strokeColor: "rgba (220,220,220,1)", pointColor: "rgba (220,220,220,1)", pointStrokeColor: "#fff", datos: [20,60,42 , 58,31,21,50],] var canvas = document.getElementById ("envíos"); var ctx = canvas.getContext ("2d"); nuevo gráfico (ctx) .Line (datos, opciones);

Algunas cosas a tener en cuenta en este nuevo código: primero, estamos reutilizando las variables que usamos para construir el gráfico de anillos. Esto es completamente válido en JavaScript, y en realidad reduce ligeramente la memoria utilizada por el script en general. Sin embargo, esto puede causar confusión en el futuro, y si planea adaptar este código para usarlo en producción, puede ser más efectivo usar nuevas variables para cada nuevo gráfico que cree..

A continuación, el gráfico de líneas admite etiquetas. Esto es importante, ya que nos permite evitar la creación de leyendas basadas en HTML. Sin embargo, también es importante que los puntos de datos se alineen con las etiquetas dadas. En este ejemplo, nuestro primer punto de datos en el primer conjunto de datos, 65, coincide con "Mon" en las etiquetas.

Por último, nuestros fillColors para estos conjuntos de datos son versiones RGBa de los colores que definimos anteriormente (azul oscuro y amarillo). Encontramos los valores RGB ingresando los colores en el selector de color de Photoshop, pero esto se puede hacer usando cualquiera de una serie de herramientas de selección de colores..

También agregaremos un marcado para unos pocos botones y un rango legible. La última línea del widget html se parece a la siguiente.

Podemos pulir el HTML adicional y ayudar a los usuarios a conectar las fechas con el siguiente CSS:

.widget.line p span color: # dbba34;  .widget.line p strong color: # 637b85; peso de la fuente: 400; 

Gráfico de radar

Los gráficos de radar son útiles para destilar una selección de variables en un gráfico de fácil lectura para obtener una percepción general de la interacción entre las diferentes variables. En nuestro ejemplo, por ejemplo, exploraremos la idea de servicio al cliente, en función del número de veces que se mencionan ciertas palabras clave. En un gráfico de radar, los puntos trazados crearán una forma. Esa forma nos puede dar una idea general de la efectividad del servicio al cliente.

¡A ver cómo se crea esto! Una vez más, reutilizaremos nuestras variables de antes..

var data = labels: ["Helpful", "Friendly", "Kind", "Rude", "Slow", "Frustrating"], conjuntos de datos: [fillColor: "rgba (220,220,220,0.5)", strokeColor: " # 637b85 ", pointColor:" # dbba34 ", pointStrokeColor:" # 637b85 ", datos: [65,59,90,81,30,56]] var canvas = document.getElementById (" department "); var ctx = canvas.getContext ("2d"); nuevo gráfico (ctx) .Radar (datos, opciones);

Y el HTML que lo acompaña se verá como el siguiente:

Intuitivamente, podemos entender que una forma que está más arriba y hacia la derecha será mejor que una forma que está más abajo y hacia la izquierda. Sin embargo, no perdemos los datos específicos disponibles para nosotros dentro del gráfico en un nivel granular de variable única. En este caso, la palabra "grosero" se menciona a menudo, pero el sentido general de servicio al cliente parece positivo basado en otras palabras clave.

Haciéndolo todo sensible

Ya hemos configurado nuestros elementos de lienzo para responder con el JavaScript que usamos para responder al cambio de tamaño de la ventana. Ahora, necesitamos hacer que nuestro CSS responda usando consultas de medios. Aquí está el css que usaremos para hacer esto..

Pantalla de solo media y (ancho mínimo: 300 px) .container ancho: 300 px; margen: 0 auto;  pantalla solo @media y (min-width: 600px) .container width: 580px; margen: 0 auto;  .third float: left; ancho: 47.5%; margen izquierdo: 5%;  .third: first-child margin-left: 0;  .third: last-child display: block; ancho: 100%; margen izquierdo: 0;  pantalla solo para @media y (min-width: 960px) .container width: 940px;  .third float: left; ancho: 30%; margen izquierdo: 2,5%; margen derecho: 2,5%;  .third: first-child margin-left: 0;  .third: último hijo margen derecho: 0; margen izquierdo: 2,5%; ancho: 30%;  pantalla solo @media y (min-width: 1140px) .container width: 1120px;  pantalla solo @media y (min-width: 1360px) .container width: 1300px; 

Lo primero que debe notarse sobre este CSS es que todas las consultas de medios están basadas únicamente en el ancho mínimo. Esto significa que estamos diseñando desde las pantallas de menor ancho y agregando nuevas reglas a medida que avanzamos. Nuestro diseño no requiere muchos cambios en cada punto de interrupción, pero este patrón es la mejor práctica en diseños de todas las escalas.

Podemos ver algunos cambios básicos de diseño en cada punto de interrupción, incluido el ancho del elemento contenedor principal, así como nuestro tratamiento de la tercera clase, que utilizamos en cada uno de los widgets. Por debajo de 400, apilamos todos los widgets uno encima del otro. Entre 400 y 600, hacemos las dos primeras columnas de ancho medio de widgets, y el tercer widget (el gráfico de radar) de ancho completo. Finalmente, por encima de 960, utilizamos tres columnas en línea..

Conclusión

Este tutorial lo ha guiado a través de los pasos básicos para crear un panel con ChartJS. Los conceptos fundamentales que se describen aquí deberían ayudarlo a crear proyectos más complejos utilizando ChartJS, y también debería alentarlo a pensar en un diseño receptivo desde la perspectiva de abajo hacia arriba..

¿Qué experiencias has tenido con las bibliotecas de gráficos? ¿Utiliza SVG o lienzo para graficar datos? ¿Qué cosas desearías que hiciera ChartJS si no? Añade tus comentarios a continuación!

Aprender JavaScript: la guía completa

Hemos creado una guía completa para ayudarlo a aprender JavaScript, ya sea que esté comenzando a trabajar como desarrollador web o si desea explorar temas más avanzados..