Trazado de jquery usando fórmula. Gráfico circular con jQuery. Crear gráficos de líneas

Hay ocasiones en las que es necesario presentar cierto tipo de información en una página de destino y en un sitio web en general. Con esta biblioteca puedes crear gráficos y diagramas para el sitio; no es tan difícil como parece. Debe resolverlo una vez (los ejemplos de este artículo lo ayudarán). Luego simplemente ingresa tus datos y disfruta de los hermosos y animados gráficos. Cosas así siempre llaman la atención.

Esta no es la única forma de hacer que su página de destino o sitio web sea especial. A continuación se muestran algunos efectos interesantes, que se puede aplicar fácilmente a sus proyectos:

Los 3 ejemplos de gráficos animados se pueden ver a continuación:

Descargar

¿Cómo utilizar hermosos gráficos para tus propios fines?

Quiero decir de inmediato que estos gráficos también son adaptativos. Ahora bien, esto es importante, ya que los usuarios que acceden al sitio desde dispositivos móviles, es cada vez más cada hora.

Estos hermosos gráficos se crean usando la biblioteca: Chartista.js.

Y con la aplicación “cobran vida” y llaman la atención. ¡Ahora imagina la reacción de los visitantes cuando ven esto en una página de destino normal! Después de todo, no sorprenderá a nadie, pero estos elementos siempre mejorarán la calidad del sitio.

Primero, repasemos los pasos que le ayudarán a conectarse. esta biblioteca, luego mostraré algunos ejemplos y hablaré de todas las funciones de esta biblioteca. Pero les advierto de inmediato que es simplemente imposible considerar absolutamente todas las funciones en un artículo.

Etapa 1. Conectamos los estilos y scripts necesarios.

Puedes descargar archivos de estilo y script y colocarlos en tu hosting, pero es mucho más conveniente simplemente insertar 2 líneas en el HTML y conectar todo lo que necesitas:

Esto es suficiente para crear su primer gráfico o tabla hermosa. Queda un último paso.

Etapa 3. Establecer valores de gráfico (JS)

Para empezar, daré inmediatamente. código completo, que crea un gráfico como este:

Y aquí está el código en sí:

CÓDIGO JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12

new Chartist.Line (".chart1", (etiquetas: [ "Día 1", "Día 2", "Día 3", "Día 4", "Día 5"], serie: [ [ 12, 9, 3, 8, 4], [2, 1, 4.7, 5.5, 8]]), (fullWidth: verdadero, chartPadding: (derecha: 50)));

Repasemos cada línea para que comprenda completamente este pequeño script JS. Y si comprende de qué es responsable cada línea, puede cambiar cualquier valor según sus necesidades.

• Línea 1: en esta línea, observe el valor entre las comillas simples. Aquí indicamos el bloque en el que tendremos una gráfica o diagrama.
• Línea 2: separada por comas en comillas simples Anotamos los nombres de una división a lo largo del eje X.
• Líneas 3 a 6: aquí configura los valores del eje Y para cada línea del gráfico. Una línea de valores por corchetes(en este script las líneas 4 y 5) corresponden a una línea.
• Línea 8: al especificar el valor verdadero, estiramos el gráfico a todo el ancho del "bloque principal".
• Líneas 9 a 11 - conjunto relleno bien. Esto se hace para que la descripción de las divisiones a lo largo del eje X no se corte y se coloque en un solo bloque.

Si sigues todos los pasos anteriores, obtendrás un hermoso gráfico. Ya sólo queda entrar. valores requeridos. Pero este gráfico no se diferencia de todos los demás que se pueden ver en Internet. Vea a continuación cómo puede agregar singularidad a este gráfico, después de lo cual llamará la atención.

Ejemplo 1. Gráfico animado

Pero, ¿cómo crear un gráfico como el de la imagen de arriba (la imagen está animada, si no tienes animación, entonces espera hasta que se cargue) arriba?

Para hacer esto, sólo necesita agregar algunas propiedades de los elementos en el gráfico terminado. Dado que todo el gráfico consta de elementos SVG, entonces sólo tenemos que decidir cuál queremos animar.

Para animar dos líneas como lo hice en este ejemplo, necesitas agregar el siguiente código CSS a tu hoja de estilo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/*Gráfico #1*/ .chart1 .ct-chart .ct-series .ct-series-a .ct-line ( trazo: #F04D3A ; ancho de trazo: 5px ; trazo-dasharray: 5px 5px ; animación: dashoffset- siete lineales infinitos de 200 ms; /*Color de los puntos de la primera línea*/.chart1 .ct-chart .ct-series .ct-series-a .ct-point( trazo: #B22819 ; ) .chart1 .ct-chart .ct-series .ct-series-b .ct-line ( trazo: #4DB543; ancho de trazo: 5 px; trazo-dasharray: 5 px 5 px; animación: desplazamiento de guión 200 ms lineal infinito; /*Color de puntos de la segunda línea*/.chart1 .ct-chart .ct-series .ct-series-b .ct-point( trazo: #0FB500 ; ) /*Animación del movimiento de puntos discontinuos*/@keyframes dashoffset ( 0% ( trazo-dashoffset: 7px ; ) 100% ( trazo-dashoffset: 0px ; ) )

No escribo aquí la parte JS, es muy similar en cada uno de los ejemplos. Si estudió detenidamente la descripción del código JS anterior, donde analicé todo literalmente línea por línea, tampoco le resultará difícil comprenderlo aquí.

Ejemplo 2. Animación de resaltar la línea principal en el gráfico.

Hay animación aquí (en la imagen de arriba). Si no lo ves, quizás tu imagen simplemente no se haya cargado, solo espera.

Este manera genial mostrar cambios y llamar la atención sobre una línea específica en el gráfico. Todo se hace en CSS3. Se utilizó el siguiente código de animación:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

/*Gráfico #2*/ /*Color, grosor y estilo de la primera línea*/.chart2 .ct-chart .ct-series .ct-series-a .ct-line ( trazo: #949494 ; ancho de trazo: 5px ; ) .chart2 .ct-chart .ct-series .ct-series-a . punto-ct (trazo: #656565;) /*Color, grosor y estilo de la segunda línea*/.chart2 .ct-chart .ct-series .ct-series-b .ct-line (trazo: #6765B5; ancho de trazo: 5px; animación: ancho-pulso 2s infinito;) .chart2 .ct-chart .ct- serie .ct-series-b .ct-point( trazo: #403CB5 ; ) /*Color, grosor y estilo de la tercera línea*/.chart2 .ct-chart .ct-series .ct-series-c .ct-line (trazo: #949494; ancho de trazo: 5px;) /*Color del punto de la tercera línea del gráfico*/.chart2 .ct-chart .ct-series .ct-series-c .ct-point( trazo: #656565 ; ) /*Animación ondulada para resaltar una línea en un gráfico*/@keyframes ancho-pulso (0% (ancho de trazo: 6px; trazo: #403CB5;) 50% (ancho de trazo: 14px; trazo: #E40DE4;) 100% (ancho de trazo: 6px; trazo: #403CB5; ) )

Ejemplo 3. Animación en dos direcciones.

Bueno, el último ejemplo con animación CSS3 es la animación en un gráfico en dos direcciones.

Para este efecto necesitas usar el siguiente código CSS y animación:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

/*Gráfico #3*/ /*Color, grosor y estilo de la segunda línea*/.chart3 .ct-chart .ct-series .ct-series-b .ct-line (trazo: #E44A4A; ancho de trazo: 5px; trazo-dasharray: 30px 5px; trazo-linecap: redondo; animación: dasharray-locura 10s infinito lineal; /*Color del punto de la segunda línea del gráfico*/.chart3 .ct-chart .ct-series .ct-series-b .ct-point( trazo: #E40D0D ; ) /*Color, grosor y estilo de la primera línea*/.chart3 .ct-chart .ct-series .ct-series-a .ct-line (trazo: #949494; ancho de trazo: 5px;) /*Color del punto de la primera línea del gráfico*/.chart3 .ct-chart .ct-series .ct-series-a .ct-point( trazo: #656565 ; ) /*Animación en dos direcciones en el gráfico*/ @keyframes dasharray-locura ( 0% (trazo-dasharray: 7px 2px;) 80% (trazo-dasharray: 7px 100px; ancho de trazo: 10px) 100% (trazo-dasharray: 7px 2px;))

Con estos ejemplos quería mostrar que crear un gráfico bonito y, lo más importante, llamativo es realmente sencillo. Sólo necesitas conocer al menos los conceptos básicos de la animación CSS3. Puedes leer sobre esto en el siguiente enlace.

• Traducción

Es casi imposible imaginar un tablero sin cuadros y gráficos. Muestran estadísticas complejas de forma rápida y eficiente. Además, buen diagrama también mejora diseño general su sitio.

En este artículo te mostraré algunos de los mejor JavaScript bibliotecas para crear diagramas/esquemas (y tablas dinámicas). Estas bibliotecas le ayudarán a crear gráficos hermosos y personalizables para sus proyectos futuros.

Aunque la mayoría de las bibliotecas son gratuitas y redistribuibles, algunas de ellas tienen versiones pagas con funciones adicionales.

D3.js: documentos centrados en datos

Hoy en día, cuando pensamos en gráficos, lo primero que nos viene a la mente es D3.js. fuente abierta proyecto, D3.js, sin duda, da mucho características útiles, del que carecen la mayoría de las bibliotecas existentes. Funciones como “ Entra y Exit”, transiciones potentes y una sintaxis similar a jQuery o Prototype la convierten en una de las mejores bibliotecas de JavaScript para crear gráficos y tablas. En D3.js se generan usando HTML, SVG y CSS.

A diferencia de muchas otras bibliotecas de JavaScript, D3.js no viene con gráficos prediseñados listos para usar. Sin embargo, puedes echar un vistazo a la lista de gráficos creados con D3.js para tener una idea general.

D3.js no funciona correctamente con navegadores antiguos como IE8. Pero siempre puedes usar complementos como el complemento aight para compatibilidad entre navegadores.

D3.js se ha utilizado ampliamente en sitios web como NYTimes, Uber y Weather.com.

Gráficos de Google

Gráficos de Google - biblioteca de javascript, que utilizo habitualmente para crear gráficos de forma sencilla y sencilla. Proporciona una variedad de gráficos prediseñados, como gráficos de barras combinados, gráficos de barras, gráficos de calendario, gráficos circulares, gráficos geográficos, etc.

Los gráficos de Google también tienen muchos ajustes de configuración que ayuda a cambiar apariencia gráficos. Los gráficos se generan utilizando HTML5/SVG para garantizar la compatibilidad entre navegadores y la portabilidad entre plataformas para iPhone, iPad y Android. También contiene VML para admitir versiones anteriores de IE.

HighchartsJS

Highcharts JS es otro muy biblioteca popular para trazar gráficos. Terminado un gran número animaciones de varios tipos que pueden atraer mucha atención a su sitio. Al igual que otras bibliotecas, HighchartsJS contiene muchos gráficos creados previamente: spline, forma, combinación, columna, histograma, circular, dispersión, etc.

Una de las mayores ventajas de usar HighchartsJS es su compatibilidad con navegadores más antiguos como Explorador de Internet 6. Navegadores estándar use SVG para representar gráficos. En IE heredado, los gráficos se crean mediante VML.

Aunque HighchartsJS es gratuito para uso personal, necesita comprar una licencia para uso comercial.

Gráficos de fusión

Fusioncharts es una de las bibliotecas de JavaScript más antiguas, lanzada por primera vez en 2002. Los gráficos se generan utilizando HTML5/SVG y VML para una mejor portabilidad y compatibilidad.

A diferencia de muchas bibliotecas, Fusioncharts ofrece la posibilidad de analizar tanto datos JSON y XML. También puedes exportar estos gráficos a 3 diferentes formatos: PNG, JPG y PDF.

Fusioncharts es altamente compatible con navegadores más antiguos como IE6. Y por esta razón, se ha convertido en una de las bibliotecas preferidas de muchas organizaciones comerciales.

Puede utilizar la versión con marca de agua de Fusioncharts de forma gratuita en proyectos personales y comerciales. Sin embargo, es necesario adquirir una licencia para deshacerse de la marca de agua.

flotar

Flot es una biblioteca de JavaScript para JQuery que le permite crear gráficos/cuadros. Una de las bibliotecas de diagramas más antiguas y populares.

Flot admite gráficos de barras, gráficos de dispersión, gráficos de barras, gráficos de columnas y cualquier combinación de estos tipos de gráficos. También compatible con navegadores más antiguos como IE 6 y Firefox 2.

Flot es completamente gratuito y se proporciona soporte comercial previa solicitud especial al desarrollador. Aquí hay una lista de ejemplos con gráficos creados en Flot.

amGráficos

amCharts es sin duda una de las bibliotecas de gráficos más atractivas que existen. Está completamente dividido en 3 tipos independientes: gráficos de JavaScript, gráficos de mapas (amMaps) y gráficos de acciones.

AmMaps es mi favorito de los tres anteriores. Proporciona funciones como mapas de calor, dibujar líneas, agregar texto al mapa, cargar íconos o fotos a parte superior su mapa, cambiar la escala, etc.
amCharts usa SVG para representar gráficos que solo funciona en navegadores modernos. Es posible que los gráficos no se muestren correctamente en IE inferiores a la versión 9.

EJS Chart se proporciona de forma gratuita y versiones pagas. Versión gratuita tiene una limitación que no le permite utilizar más de 1 gráfico por página y más de dos secuencias (numéricas) por gráfico. Consulte los detalles de precios.

uvGráficos

uvCharts: biblioteca JavaScript con código abierto código fuente, se afirma que hay más de 100 opciones de configuración. Ella tiene 12 gráficos. varios estándares Recién sacado de la caja.

UvCharts se basa en la biblioteca D3.js. Este proyecto promete eliminar todos los matices complejos de la codificación D3.js y proporcionar una fácil implementación de gráficos. vista estándar. uvCharts se genera utilizando SVG, HTML y CSS.

Conclusión

Ahora la elección de la mejor biblioteca de diagramas para sus proyectos futuros depende de usted. Desarrolladores que necesitan control total En lugar de gráficos, definitivamente elegirán D3.js. Casi todas las bibliotecas anteriores tienen un buen soporte en los foros de Stackoverflow.

Espero que hayas disfrutado de este artículo. Que tenga un buen día.

Etiquetas: Agregar etiquetas

En términos de interacción, la Flota sin duda te acercará a gráficos flash, lo más parecido posible a jQuery. Si bien la salida del gráfico es bastante elegante y atractiva, también puedes interactuar con los puntos de datos. Lo que quiero decir es que puedes pasar el cursor sobre un punto de datos y obtener una imagen comentario del valor de este punto en el gráfico.

La versión de flota de Trunk admite gráficos circulares.

Posibilidad de escalar flota.

Además, también tiene la opción de seleccionar una porción del gráfico para devolver datos para una "zona" específica. Como función adicional Para esta "zonificación" también puede seleccionar un área en el gráfico y acercarla para ver los puntos de datos un poco más de cerca. Muy guay.

Minigráficos

Restricciones: circular, línea, barra, combinación

Sparklines es mi mini herramienta de gráficos favorita. Realmente excelente para gráficos de estilo tablero (piense en tablero herramientas de google Analítica cuando próxima entrada al sistema). Como son tan pequeños, se pueden incluir en una cadena (como en el ejemplo anterior). Otra buena idea que pueden utilizar todos los complementos de gráficos es la capacidad de actualización automática. Su demostración Mouse-Speed ​​​​le muestra el poder de los gráficos en vivo en su máxima expresión.

Solicitar diagrama 0.21

Restricciones: Área, Línea, Barra y combinaciones de estas

El diagrama jQuery 0.21 no es el más buen complemento para construir diagramas, se debe indicar allí. Tiene una funcionalidad bastante básica en lo que respecta a los gráficos que puede manejar, sin embargo, puede ser flexible si le dedicas algo de tiempo y esfuerzo.

Agregar valores a un gráfico es relativamente simple:

ChartAdd(( "etiqueta": "Clientes potenciales", "tipo": "Línea", "color": "#008800", "valores": ["100","124","222","44"," 123","23","99"] ));

jQchart

Límites: barra, línea

jQchart es extraño, tienen transistores animados incorporados y funcionalidad de arrastrar y soltar en el gráfico, sin embargo, es un poco torpe y aparentemente inútil. Genera gráficos atractivos si utilizas el CSS correctamente, pero hay cosas mejores por ahí.

TufteGraph

Limitaciones: barra y barra apilada

Tuftegraph se promociona como "hermosos gráficos de barras que le mostrarás a tu madre". Se está acercando, la Flota es más bonita, pero Tufte se hace muy ligero. Aunque esto pone fin a las limitaciones, hay varias opciones para elegir, por lo que obtendrá lo que especifique. Mira la tarjeta de ganancia rápida.

Uso graficos y tablas tiene muy amplia aplicación. Con su ayuda, puede mostrar mucha información de una forma conveniente y comprensible y, por lo tanto, comprenderla y comprenderla rápidamente.

Hay varias formas de agregar un gráfico o tabla a una página web. La primera, en la que probablemente ya habrás pensado, es dibujarla en cualquier editor gráfico. Pero esto no es lo más conveniente y opción rápida. Es mucho más fácil y rápido hacer un gráfico en JavaScript, donde tienes que especificar todo. parámetros requeridos, verlo y colocarlo en la página.

En este artículo te contamos sobre 10 servicios y herramientas, que te ayudará a crear gráficos y tablas en JavaScript. Encontrarás otros métodos de creación en la sección “”.

Bluff
Para dibujar un gráfico de líneas usando este servicio, solo necesita copiar algunas líneas de código, configurar parámetros requeridos y agregar texto. El código es tan simple y claro que podrás descifrarlo en tan solo unos segundos.

Con PlotKit puedes crear cuadros y gráficos que se mostrarán correctamente en todos los navegadores. En el sitio encontrará documentación, ejemplos de tipos de gráficos y guía rápida(con una descripción de todos los parámetros y configuraciones) para comenzar rápidamente.

Este servicio le permite crear excelentes funciones visuales. Ingrese una ecuación, por ejemplo 2*sin(4*x)^(x+4), presione “Enter” y la función estará lista. Después de eso, todo lo que tienes que hacer es copiar la URL y pegarla en tu página.

La herramienta más poderosa para crear tablas, gráficos y diagramas usando jQuery. En el sitio encontrará ejemplos de todo tipo de gráficos, así como descripción detallada parámetros y pasos de configuración.

flotar
Biblioteca de gráficos jQuery de Google. No es necesario escribir nada más sobre esto, ya todo está claro (: Pero aún notamos que el servicio ofrece una gran cantidad hermosos ejemplos con una configuración flexible y sencilla.

Le permite crear gráficos y tablas de histogramas de datos. Para construir, debe ingresar los datos necesarios y hacer clic en el botón "Calcular". Luego copie el código y descárguelo. guión pequeño. Si lo desea, todos los datos se pueden ingresar en el propio código.

El servicio proporciona 6 tipos de gráficos (gráfico circular, gráfico de líneas, gráfico dinámico y 3 tipos de histogramas). Hay una descripción de las configuraciones, parámetros y ejemplos detallados todo tipo de diagramas.

Rafael
Raphaël es una pequeña biblioteca de JavaScript que facilita mucho la creación de gráficos y tablas. Esto es lo mas poderosa herramienta de todos los presentados en esta revisión. Le resultará más fácil ver usted mismo las capacidades de la biblioteca que leer una descripción de sus capacidades.

trazador
Biblioteca para crear diagramas en Mootools. Gran herramienta, que presenta información de una manera hermosa y comprensible. Y para configurarlo sólo necesitas cambiar o agregar valores.

Las capacidades de este servicio le permiten crear gráficos 3D. Entre las funcionalidades cabe destacar. fácil configuración, trabajo rapido guión y la capacidad de construir gráficos de cosenos y senos.