javascript - sparkline - Gráfico circular con jQuery
sparklines js (7)
Quiero crear un gráfico circular en JavaScript. Al buscar encontré la API de Google Charts. Dado que estamos usando jQuery, encontré que hay una integración de jQuery disponible para Google Charts .
Pero mi problema es que los datos reales se envían al servidor de Google para crear los gráficos. ¿Hay alguna manera de evitar que los datos se envíen a Google? Me preocupa enviar mis datos a un tercero.
Flot
Limitaciones: líneas, puntos, áreas rellenas, barras, pastel y combinaciones de estos
Desde una perspectiva de interacción, Flot de lejos lo acercará lo más posible a la creación de gráficos Flash, como puede obtener con jQuery . Si bien la salida del gráfico es bastante hábil y de gran apariencia, también puede interactuar con los puntos de datos. Lo que quiero decir con esto es que puede tener la capacidad de desplazarse sobre un punto de datos y obtener retroalimentación visual sobre el valor de ese punto en el gráfico.
La versión troncal de flot admite gráficos circulares.
Flot Zoom capacidad.
Además de esto, también tiene la capacidad de seleccionar un fragmento del gráfico para recuperar datos de una "zona" en particular. Como una característica secundaria de esta "zonificación", también puede seleccionar un área en un gráfico y hacer un acercamiento para ver los puntos de datos un poco más de cerca. Muy bueno
Sparklines
Limitaciones: Pie, línea, barra, combinación
Sparklines es mi herramienta favorita de mini gráficos por ahí. Muy bueno para los gráficos de estilo del tablero de instrumentos (piense en el tablero de Google Analytics la próxima vez que inicie sesión). Debido a que son muy pequeños, se pueden incluir en la línea (como en el ejemplo anterior). Otra buena idea que se puede utilizar en todos los complementos de gráficos es la capacidad de renovación automática. Su demo de Mouse-Speed le muestra el poder de los gráficos en vivo en su mejor momento.
Gráfico de consulta 0.21
Limitaciones: área, línea, barra y combinaciones de estos
jQuery Chart 0.21 no es el plugin de gráficos más bonito que hay que decir. Es bastante básico en funcionalidad cuando se trata de gráficos que puede manejar, sin embargo, puede ser flexible si puede dedicarle tiempo y esfuerzo.
Agregar valores en 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 la tabla, sin embargo es un poco torpe, y aparentemente sin sentido. Genera gráficos agradables si consigues la configuración de CSS correcta, pero hay mejores por ahí.
TufteGraph
Limitaciones: barra y barra apilada
Tuftegraph se vende como "bonitos gráficos de barras que le mostrarías a tu madre". Se acerca, Flot es más bonito, pero Tufte se presta a ser muy liviano. Aunque con eso vienen restricciones, hay pocas opciones para elegir, por lo que obtienes lo que te dan. Compruébelo para obtener un gráfico de barras de ganancia rápida.
Algunos otros que no han sido mencionados:
Para mini pasteles, líneas y barras, Peity es brillante, simple, pequeño, 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 agradables, pero tuve algunos problemas con sus pasteles.
No es lo que buscaba, pero otro producto comercial (muy parecido a Highcharts) es TeeChart .
Hay un nuevo jugador en el campo, que ofrece gráficos HTMl5 interactivos avanzados:
http://datavisualizationsoftwarelab.com/en/products/pie-chart/
Ejemplo de gráficos:
http://datavisualizationsoftwarelab.com/en/products/pie-chart/
Documentación: http://developers.dvsl.co/en/pie-chart/
Lo bueno de esta lib:
- Otros sectores se pueden expandir
- Pie ofrece detalles para estructuras jerárquicas (ver ejemplo)
- escriba su propio controlador de origen 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.
Los gráficos son gratuitos para uso no comercial, licencias comerciales y soporte técnico disponibles también.
También los gráficos de tiempo interactivos y diagramas de red están ahí para que los use.
Los gráficos incluyen una amplia API y configuración, por lo que puede controlar todos los aspectos de los gráficos.
Toneladas de grandes sugerencias aquí, simplemente lanzarán a ZingChart a la pila para una buena medida. 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 están en la demostración a continuación.
¡Estoy en el equipo de ZingChart y estamos aquí para responder cualquier pregunta que puedan tener!
$(''#pie-chart'').zingchart({
"data": {
"type": "pie",
"legend": {},
"series": [{
"values": [5]
}, {
"values": [10]
}, {
"values": [15]
}]
}
});
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>
<div id="pie-chart"></div>
Chart.js es bastante útil, y admite muchos otros tipos de gráficos también.
Se puede usar tanto con jQuery como sin él.