2012-01-13 11 views
7

Ho recentemente abbandonato l'uso di Graphael e il pacchetto di estensioni Ico. Penso che sia ancora una grande libreria, ha solo bisogno di una documentazione migliore e di una API appropriata prima che possa essere ampiamente adottata.Grafico a linee Google: trascinare per regolare il valore

Ho convertito le aree con grafici per utilizzare Google Charts e non riesco a trovare un modo per fare una particolare funzione che ho usato per Graphael: trascinare il supporto. Uno dei miei line charts deve essere modificabile, ovvero i singoli punti sulla linea possono essere trascinati su e giù per regolare il valore.

Ho cercato di trovare un evento o un modo per allegare un evento nell'API senza molto successo. Qualcuno è riuscito a fare qualcosa del genere?

È presumibilmente possibile creare grafici personalizzati: sarebbe possibile farlo in questo modo?

MODIFICA: Sembra che non sia realmente possibile o che sia incredibilmente difficile collegarsi all'API di Google o emettere SVG. Essere in un iframe e nessun codice sorgente disponibile lo rende un'opzione sempre meno attraente.

Da allora ho iniziato a sperimentare con Highcharts. Sono stato in grado di fare tutto ciò che fa il motore di Google e posso giocare con il grafico dopo che è stato reso. Dato che il codice sorgente è fornito, rende più facile capire certe cose. Sembra anche funzionare un po 'più veloce della soluzione di Google poiché utilizza il percorso quando si esegue un grafico a linee anziché singoli elementi del cerchio SVG.

Il problema che sto affrontando ora ha a che fare con l'elemento SVG Path - non c'è un singolo punto su cui impostare il trascinamento. Quindi per usare jQuery.draggable si deve iniettare un cerchio SVG o un altro elemento nella stessa posizione del frammento del percorso SVG che si lega al trascinamento. Quindi è necessario risolvere quanto segue: - come posizionare l'elemento creato per correggere la posizione? - come spostare l'elemento quando il grafico viene ridimensionato (modifica del valore min o max su ciascun asse)? - come convertire la nuova posizione in un valore, ridimensionato per i dati di serie forniti?

Qualcuno ha avuto abbastanza esperienza approfondita con Highcharts per giocherellare con questi? Cercherò di fornire un esempio JSfiddle quando possibile.

+0

Ho provato con jQuery e ascolto per mousedown/mouseup sul contenitore (div) tenendo premuto il grafico, ma conteneva Google Grafico sopprime il bubbling degli eventi ... Forse c'è un modo per permettere agli eventi di ribollire sul grafico? –

+0

Questo potrebbe funzionare se solo uno fosse in grado di indicare a Google Grafici di rappresentare invece di