13
Come posso creare un grafico a torta con CSS come quello qui sotto?Come creare un grafico a torta nei CSS
A
risposta
11
Oh mio! Hai visto Google Chart Tools?
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart
Questo è stupido facile da implementare, ma il mio problema con esso è la parte "api esterna". Se Google decide di fare questo o Google va giù, ciao ciao grafico! Ma per quanto riguarda la bellezza e la selezione di altri grafici, Google Maps è una scoperta interessante.
+0
Credo che tu possa scaricare l'API google.visualization da la pagina [Riferimento API di visualizzazione di Google] (https://developers.google.com/chart/interactive/docs/reference), tuttavia i Termini di servizio non ti consentono di scaricare, salvare o ospitare google.load o google. codice di visualizzazione. –
0
Per quanto io sappia questo non è (ancora) possibile con CSS3. Tuttavia, il nuovo elemento html5 canvas fornisce tutto ciò che desideri. Può essere facilmente accessibile e utilizzato su javascript. Un piccolo tutorial sull'uso di base può essere trovato here.
Un'altra domanda sullo stackoverflow era sullo stesso argomento. Vedi "HTML5 Canvas pie chart". (C'è "Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts" nella prima risposta a un tutorial sui grafici a torta che utilizzano elementi canvas)
0
Ero alla ricerca di modi per costruire queste torte, sia tramite puro CSS che utilizzando anche Javascript. Oggi ho trovato un articolo su SmashingMagazine che punta a uno talk from Lea Verou dove lei completamente inchioda il soggetto. Ne vale davvero la pena!
Problemi correlati
- 1. Come creare un grafico a torta per aggregare l'origine dati?
- 2. Come si crea un grafico a torta usando Bokeh?
- 3. Come ottenere la percentuale nei tooltip di un grafico a torta nvd3?
- 4. Come disabilitare la legenda interattiva di un grafico a torta nei grafici dell'interfaccia utente di Kendo?
- 5. Grafico a torta JqPlot - Cambia colori fetta di torta
- 6. Come modificare un grafico a torta creato da GNUPlot
- 7. Come posso aggiungere un grafico a torta all'applicazione Winforms?
- 8. Come percentuale e conteggio nel grafico a torta SSRS
- 9. Etichette sovrapposte nel grafico a torta
- 10. Grafico a ciambella Highcharts senza torta interna?
- 11. Grafico a torta reattivo con NVD3
- 12. Supporta il grafico a torta 3D?
- 13. JasperReport Esempio di grafico a torta
- 14. Soglia etichetta grafico a torta Highcharts
- 15. etichette sovrapposte nel grafico a torta flot
- 16. Visualizzazione Legenda del grafico a torta Google
- 17. Creare un pulsante a larghezza fissa nei CSS
- 18. Highcharts: aggiornamento di un grafico a torta con setData()
- 19. Come creare barra di avanzamento circolare (grafico a torta) come indicatore - Android
- 20. Come disegnare torta come grafico in Android
- 21. impossibile completare il cerchio di un grafico a torta
- 22. Creazione di un grafico a torta in C#
- 23. Highcharts - etichette all'interno e all'esterno di un grafico a torta
- 24. Come creare un'animazione a luminescenza pulsante nei CSS?
- 25. R: Grafico a torta con percentuale come etichette utilizzando ggplot2
- 26. Come mostrare il grafico a torta in Android
- 27. Come visualizzare i suggerimenti sul grafico a torta jqplot
- 28. Come creare un grafico a nastro?
- 29. Come ridurre la dimensione del grafico a torta KendoUI?
- 30. Il grafico a torta Highcharts modifica dinamicamente la dimensione
FYI: il tuo 'cerchio grafico' è chiamato a ** Grafico a torta **: 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 (** utilizzando HTML5 Canvas **) 4 . puoi utilizzare anche HTML5 e jQuery, [LINK] (http://www.elated.com/articles/snazzy-animated-pie-chart-html5-jquery/) –