Gráfico circular con jQuery

Question

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

Pero mi problema es que aquí 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.

Answer 1

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 .

Answer 2

Flot

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

Desde una perspectiva de interacción, Flot con mucho le acercará lo más posible a los gráficos Flash como puede obtener con jQuery . Si bien la salida del gráfico es bastante elegante y de excelente aspecto, 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 de Flot Zoom.

Además de esto, también tiene la capacidad de seleccionar un fragmento del gráfico para recuperar los datos de una zona & # 8220; zona & # 8221 ;. Como característica secundaria de esta & # 8220; zonificación & # 8221 ;, 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 genial .

---

Sparklines

Limitaciones: Pie, Línea, Barra, Combinación

Sparklines es mi mini herramienta gráfica 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 usar en todos los complementos de gráficos es la capacidad de actualizació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 complemento de gráficos más bonito que hay que decir. Es bastante básico en funcionalidad cuando se trata de los gráficos que puede manejar, sin embargo, puede ser flexible si puede dedicarle un poco 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: barra, línea

jQchart es extraño, han incorporado transmisiones de animación y funcionalidad de arrastrar / soltar en el gráfico, sin embargo, es un poco torpe & # 8211; y aparentemente sin sentido. Genera gráficos bonitos si obtiene la configuración CSS correcta, pero hay mejores por ahí.

---

TufteGraph

Limitaciones: barra y barra apilada

Tuftegraph se vende como & # 8220; bonitos gráficos de barras que le mostrarías a tu madre & # 8221 ;. Se acerca, Flot es más bonita, pero Tufte se presta para ser muy ligero. Aunque con eso viene restricciones & # 8211; 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.

Answer 3

Toneladas de sugerencias geniales aquí, simplemente arrojarán ZingChart a la pila en buena medida. Recientemente lanzamos un jQuery wrapper para la biblioteca que facilita aún más la creación y personalizar gráficos. Los enlaces de CDN se encuentran 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>

Answer 4

Algunos otros que no se han mencionado:

Para mini pasteles, líneas y barras, Peity es brillante, simple, pequeño, rápido, utiliza marcado muy elegante.

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

Bluff produce gráficos lineales atractivos, pero tuve algunos problemas con sus tartas.

No es lo que buscaba, pero otro producto comercial (como Highcharts) es TeeChart .

Answer 5

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

https://zoomcharts.com/

Ejemplo de gráficos:

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

Lo bueno de esta lib:

• Otras rebanadas se pueden expandir
• Pie ofrece desglose de estructuras jerárquicas (ver ejemplo)
• escriba fácilmente su propio controlador de fuente de datos o proporcione un archivo json simple
• exportar imágenes de alta resolución fuera de la caja
Soporte
• full touch , 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 hay gráficos de tiempo interactivos y gráficos de red para que los use.

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

Answer 6

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.

Answer 7

Verifique TeeChart para Javascript

• Gratis para uso no comercial.

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

• Demos interactivas aquí y aquí .

• Algunas capturas de pantalla de algunas de las demostraciones: