13
¿Cómo puedo crear un gráfico circular con CSS como el siguiente?Cómo hacer un gráfico circular en CSS
A
Respuesta
11
¡Oh! ¿Has visto Google Chart Tools?
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Esto es estúpido fácil de implementar, pero mi problema es la parte "API externa". Si Google decide puede esto o google, ¡adiós gráfico! Pero en cuanto a la belleza y la selección de otros gráficos, google charts es un buen hallazgo.
+0
Creo que puede descargar la API google.visualization de la página [Referencia de la API de visualización de Google] (https://developers.google.com/chart/interactive/docs/reference), sin embargo, los términos del servicio no le permiten descargar y guardar o alojar el google.load o google. código de visualización. –
0
Por lo que yo soy consciente de que esto no es (aún) es posible con CSS3. Sin embargo, el nuevo elemento html5 canvas proporciona todo lo que desea. Se puede acceder y usar fácilmente sobre javascript. Se puede encontrar un pequeño tutorial sobre el uso básico here.
Otra pregunta sobre stackoverflow fue sobre el mismo tema. Ver "HTML5 Canvas pie chart". (Hay "Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts" en la primera respuesta a un tutorial sobre gráficos circulares usando elementos de lienzo)
0
Estaba buscando formas de construir estos pasteles, ya sea a través de CSS puro o incluso usando algo de Javascript. Hoy encontré un artículo en SmashingMagazine que apunta a un talk from Lea Verou donde ella totalmente clava el tema. Realmente, ¡realmente vale la pena el reloj!
Cuestiones relacionadas
- 1. Cómo hacer un fondo circular usando css?
- 2. ¿Cómo escoger colores para un gráfico circular?
- 3. Dibujar gráfico circular en Android?
- 4. cómo hacer que Google gráfico circular fondo api transperent
- 5. Hacer un gráfico Gráfico en C#
- 6. ¿Cómo dibujar un gráfico circular manualmente en Android?
- 7. Highcharts: Actualizando un gráfico circular con setData()
- 8. mostrar números en el gráfico circular
- 9. achartengine Android gráfico circular sencilla
- 10. ¿Cómo hacer un UIPickerView circular (iPhone/iPad)?
- 11. ¿Cómo puedo agregar un gráfico circular a mi aplicación winforms?
- 12. etiquetas superpuestas en el gráfico circular flot
- 13. Cómo mostrar información sobre herramientas en el gráfico circular jqplot
- 14. Cómo hacer una Div circular en Chrome?
- 15. ¿Cómo hacer un desplazamiento circular de cadenas en bash?
- 16. Segmento circular con CSS/CSS3
- 17. ¿Cómo puedo cambiar los colores de mi gráfico circular Highcharts?
- 18. Highcharts - etiquetas dentro y fuera de un gráfico circular
- 19. Cómo reducir el tamaño del gráfico circular KendoUI?
- 20. Cómo crear barra de progreso circular (gráfico circular) como indicador - Android
- 21. evento, haga clic en gráfico circular en el androide
- 22. Cómo dibujar un sector circular en un lienzo html5?
- 23. Cómo mostrar los valores dentro del sector del gráfico circular
- 24. ¿Deseas repartir una parte del gráfico circular en d3?
- 25. ¿Cómo hacer un PDF de un guión gráfico en Xcode?
- 26. Color de fondo para el gráfico circular de Jqplot
- 27. Cómo modificar el tamaño de las etiquetas en un gráfico circular en el pitón
- 28. g.raphael.js efecto de degradado en el gráfico circular
- 29. Quitar hover tooltip del gráfico circular de Google Visualization (gráfico principal)
- 30. Cómo tener un TextView circular
FYI: su 'cuadro circular' se llama ** Gráfico circular **: o) – balexandre
1. http://www.htmldrive.net/items/show/751/Pure-CSS3-Pie-Charts-effect 2. http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/ 3. http://elisabethrobson.com/?p=867 (** usando HTML5 Canvas **) 4 .usted también puede usar HTML5 y jQuery, [LINK] (http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/) –