Gráfico circular con jQuery

93

Quiero crear un gráfico circular en JavaScript. Al buscar encontré la API de Google Charts. Dado que estamos usando jQuery, descubrí que existe una integración de jQuery para Google Charts disponible.

Pero mi problema es que aquí los datos reales se envían al servidor de Google para crear los gráficos. ¿Existe alguna forma de evitar que los datos se envíen a Google? Me preocupa enviar mis datos a un tercero.

Arun P Johny
fuente

Respuestas:

48

jqPlot se ve bastante bien y es de código abierto.

Aquí hay un enlace a los ejemplos de jqPlot más impresionantes y actualizados .

Thomas Bratt
fuente
nota: en la mayoría de las versiones (también reciente en este momento) está usando una referencia $ fuera de una declaración (función ($) ..), por lo que podría entrar en conflicto con el prototipo o cualquier otra cosa
Mario Peshev
99

Flot

Limitaciones: líneas, puntos, áreas rellenas, barras, pastel y combinaciones de estos

Desde una perspectiva de interacción, Flot lo acercará lo más posible a los gráficos Flash como sea posible jQuery. Si bien la salida del gráfico es bastante elegante y de excelente apariencia, también puede interactuar con puntos de datos. Lo que quiero decir con esto es que puede tener la capacidad de desplazarse sobre un punto de datos y obtener comentarios visuales sobre el valor de ese punto en el gráfico.

La versión troncal de flot admite gráficos circulares.

Capacidad Flot Zoom.

Además de esto, también tiene la capacidad de seleccionar una parte del gráfico para recuperar los datos de una "zona" en particular. Como característica secundaria de esta "zonificación", también puede seleccionar un área en un gráfico y hacer zoom para ver los puntos de datos un poco más de cerca. Muy guay .


Minigráficos

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

Sparklines es mi mini herramienta de gráficos favorita. Realmente genial para gráficos de estilo de tablero (piense en el tablero de Google Analytics la próxima vez que inicie sesión). Debido a que son tan pequeños, se pueden incluir en línea (como en el ejemplo anterior). Otra buena idea que se puede utilizar en todos los complementos de gráficos son las capacidades de actualización automática. Su demostración de la velocidad del mouse le muestra el poder de los gráficos en vivo en su máxima expresión.


Gráfico de consulta 0.21

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

jQuery Chart 0.21 no es el complemento de gráficos más atractivo que existe, hay que decirlo. Tiene una funcionalidad bastante básica en lo que respecta a los gráficos que puede manejar, sin embargo, puede ser flexible si puede dedicar algo de tiempo y esfuerzo.

Agregar valores a un gráfico es relativamente simple:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Limitaciones: Bar, Line

jQchart es extraño, han incorporado transiciones de animación y funcionalidad de arrastrar / soltar en el gráfico, sin embargo, es un poco torpe y aparentemente inútil. Genera gráficos de buen aspecto si se CSSconfigura correctamente, pero hay mejores.


TufteGraph

Limitaciones: barra y barra apilada

Tuftegraph se vende a sí mismo como "bonitos gráficos de barras que le mostraría a su madre". Se acerca, Flot es más bonito, pero Tufte se presta a ser muy ligero. Aunque eso conlleva restricciones, hay pocas opciones para elegir, así que obtienes lo que te dan. Échale un vistazo para ver un gráfico de barras de ganancias rápidas.

Sorantis
fuente
Gracias por tu respuesta. Estoy revisando jqPlot ahora parece resolver mi problema. Pero todavía queda un problema, necesito que las leyendas del gráfico aparezcan en el gráfico que en el exterior.
Arun P Johny
7
Cada vez que veo una buena lista como esta, me encuentro deseando que cada elemento sea una respuesta separada para que puedan votarse de forma independiente. Sería mucho más eficiente simplemente usar la biblioteca con la puntuación más alta.
Jesse Aldridge
2
Entrando aquí como alguien que ha usado Flot y ha descubierto que es una buena biblioteca sólida.
Brighid McDonnell
grr probé flot pero lo abandoné porque no podía personalizar las etiquetas de los ejes
chiliNUT
Sorantis, el enlace al gráfico de consulta 0.21 está muerto.
jawo
5

Hay un montón de sugerencias geniales aquí, solo voy a lanzar ZingChart a la pila por si acaso . Recientemente lanzamos un contenedor jQuery para la biblioteca que facilita aún más la creación y personalización de gráficos. Los enlaces CDN se encuentran en la siguiente demostración.

¡Estoy en el equipo de ZingChart y estamos aquí para responder cualquier pregunta que puedan tener!

RockinSocks
fuente
4

Algunos otros que no se han mencionado:

Para mini tartas, líneas y barras, Peity es brillante, simple, diminuto, rápido, usa un marcado realmente elegante.

No estoy seguro de su relación con Flot (dado su nombre), pero Flotr2 es bastante bueno, sin duda hace mejores pasteles que Flot.

Bluff produce gráficos de líneas bonitos, pero tuve algunos problemas con sus pasteles.

No es lo que buscaba, pero otro producto comercial (muy parecido a Highcharts) es TeeChart .

Sincronía
fuente
4

Chart.js es bastante útil, ya que también admite muchos otros tipos de gráficos.

Se puede usar tanto con jQuery como sin él.

Pitón de diamante
fuente
1
Excelente biblioteca de gráficos circulares. Utilizo charts.js para gráficos circulares y morris.js para todo lo demás. morris.js es fantástico, excepto por esos estúpidos gráficos de f! & * # donut. Cuando quiero un gráfico circular real sin un agujero de rosquilla, no busco más allá de charts.js. Charts.js es probablemente una gran solución para otros tipos de gráficos también, pero simplemente no puedes superar la API de morris.js
chiliNUT
3

Hay un nuevo jugador en el campo, que ofrece gráficos de navegación avanzados que usan Canvas para animaciones y rendimiento súper suaves:

https://zoomcharts.com/

Ejemplo de gráficos:

gráfico circular interactivo

Documentación: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

¿Qué tiene de bueno esta lib?

  • Otros sectores se pueden ampliar
  • Pie ofrece un desglose de estructuras jerárquicas (ver ejemplo)
  • escriba su propio controlador de fuente de datos fácilmente o proporcione un archivo json simple
  • exportar imágenes de alta resolución fuera de la caja
  • soporte táctil completo , funciona sin problemas en iPad, iPhone, Android, etc.

ingrese la descripción de la imagen aquí

Los gráficos son gratuitos para uso no comercial, licencias comerciales y soporte técnico también disponibles.

También hay gráficos de tiempo interactivos y gráficos de red para que los utilice. ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

Los gráficos vienen con una amplia API y configuración, por lo que puede controlar todos los aspectos de los gráficos.

Jancha
fuente
¿Qué quieres decir? Ya tenemos la función de recorte de imágenes incorporada.
Jancha
0

Compruebe TeeChart para Javascript

  • Gratis para uso no comercial.

  • Incluye complementos para jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc ...

  • Demos interactivos aquí y aquí .

  • Algunas capturas de pantalla de algunas de las demostraciones:

TeeChart Javascript - Barras

TeeChart Javascript - Pie

TeeChart Javascript - Puntos

Yeray
fuente