Un aggiornamento sulla YUI 3 Charts »Blog Yahoo! User Interface (YUIBlog)

Un aggiornamento sulla YUI 3 Charts

18 Febbraio 2010 alle 10:47 pm Bridges Tripp | In Development | 11 commenti

YUI 3 Grafici in azione.

Oggi, abbiamo controllato nel nostro lavoro-to-date sulla prossima generazione dei grafici YUI. È possibile trovare questo pre-alpha del codice, insieme ad alcuni esempi, nella directory sandbox della testa 3 YUI su GitHub . Questa prima release è una anteprima di dove stiamo andando con i grafici di YUI, nessun aspetto di questa implementazione è completa, e non è adatto per l'uso in produzione, a questo punto, ma dà un senso di dove stiamo andando - ed è una possibilità per noi il check-in con gli sviluppatori interessati e condividere il nostro progresso. (Se avete bisogno di una soluzione production-ready grafici oggi, controlla YUI 2 Charts .)

Per questa versione, abbiamo creato una solida base per costruire la funzionalità delle Charts, e abbiamo incluso un tipo semplice grafico per dimostrare la flessibilità della nostra architettura. In particolare:

YUI 3 grafici sono ora completamente modulare. I singoli sottocomponenti di un grafico, come un asse, o un LineGraph, ora sono loro proprie classi che è possibile gestire e aggiornare singolarmente.
La modularità del componente grafico all'interno del Flash Player (il nostro motore di rendering attuale di scelta) è completamente parallelo nella confezione JavaScript. Dal punto lo sviluppatore JS di vista, si lavora con un insieme di componenti JS, con tutte le chiamate di metodo, visualizzare le modifiche degli elenchi e delle assegnazioni di proprietà senza soluzione di continuità trasmessi Flash e ritorno. (Questa astrazione sarà ancora più cruciale quando ci spostiamo di là di un singolo motore di rendering).
I grafici ora supportano lo styling ogni singolo elemento - dalla rotazione di etichette e tipi di font (! Senza bisogno di font incorporati), per il colore e il numero di segni di graduazione.
A causa della nuova modularità, funzioni come il più assi e più grafici indipendenti sono ora inclusi.
In aggiunta al grafico molto avanzato, abbiamo redatto un involucro di zucchero chiamato SimpleChart, che consente di creare rapidamente grafici con due righe di codice.

Ora che la fondazione è a posto, il nostro prossimo passo è quello di continuare a costruire la funzionalità Charts. Se siete interessati a quello che sarà, un'occhiata al nostro discorso da YUIConf 2009, dove abbiamo descritto i nostri grandi progetti per l'architettura e le caratteristiche del pacchetto Charts .

Puoi iniziare a giocare immediatamente con i grafici: il componente, insieme con alcuni esempi molto ben informato, si trova nel 3 YUI sandbox. Per iniziare, scaricare l'ultimo YUI 3 Build da GitHub , cadere nella directory principale del web, e passare alla sandbox/chart/tests directory. Tenete a mente che questa non è una versione confezionata. Per questo motivo, l'API che usiamo è solo un abbozzo di ciò che la API finale sarà ed è quindi sicuro di cambiare, ma ci piacerebbe sentire i vostri pensieri e commenti su dove il progetto è diretto .

Abbiamo pubblicato l'esempio di corrente impostato sul YUIBlog così (in esecuzione build 1828) - sentitevi liberi di scegliere attraverso se siete interessati a vedere lavori in corso in azione:

Tripp-Ponti e Allen Rabinovich, YUI ingegneri del team

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

11 commenti

Fintanto che il flash è necessario, sarò riluttante a usarlo. In attesa di vedere il motore di rendering SVG.
Raph
Commento di raphael - 18 Febbraio 2010 #
Stiamo già usando i YUI2 grafici, ma devo seconda raphael - flash-free mode (o, meglio ancora, fallback intelligente a lampeggiare) sarebbe un grande incentivo per l'aggiornamento.
Commento di TJP - 18 febbraio 2010 #
Capiamo la necessità e la domanda di motori di rendering diversi flash. Per questo motivo abbiamo progettato la nostra architettura di essere agnostico tecnologia. Il nostro motore di rendering primo è il flash, ma, in definitiva, abbiamo in programma di avere una API compatibile con motori di rendering multipli.
-Tripp
Commento di Tripp - 18 Febbraio 2010 #
1 per il flash-free per favore. HTML5 Canvas FTW.
Commento di Tom Green - 19 febbraio 2010 #
Ciao,
Appena visto il video e ha avuto un breve esplorazione del codice ... guardando bene.
Sono anche un fan tela-non-flash (stampa, e abbiamo una pagina di esportazione di funzionare Word che possa gestire le immagini).
Quello che non ero sicuro dal video o il codice (perché non ho speso abbastanza a lungo a guardare il secondo!) È dove la matematica accade. Ad esempio, fare il min / max calcoli accadere in js o actionscript? Avrei pensato meglio in js, in quanto presumibilmente l'oggetto asse js può puntare a un renderer tela, senza il renderer tela dover implementare anche gli stessi calcoli. In generale, il codice ActionScript può essere il più leggero possibile e il js facendo il duro lavoro?
E come le cose si sdraiati, sarebbe utile per le persone come me che potrebbero fare un certo lavoro su un renderer tela di avere alcuni documenti sul API actionscript così come il js, quindi sappiamo cosa implementare e cosa vuol dire fare .
Grazie,
Opaco
Commento di Matt Parker - 23 Marzo 2010 #
Matt,
La matematica si verifica nello strato Actionscript. Mentre Flash è il motore, ha senso perché per fare il sollevamento di carichi pesanti. Uno dei più grandi successi di prestazioni è la comunicazione tra js e flash. Inoltre, questa architettura permette anche il livello di flash per essere autonome per l'uso in applicazioni flash e ambienti senza javascript. Quando costruiamo il motore di rendering js, sarà js solo e avrà le proprie classi parallele per i calcoli. Sarò sicuro di ottenere AS docs fuori con il mio prossimo aggiornamento.
Grazie,
Tripp
Commento di Tripp - 23 Mar 2010 #
Hi Tripp,
Prendo le prestazioni e punti standalone. Ma come questo (potrei anche provare a farlo): un plugin per Statistiche DataSource, che calcolare varie statistiche su richiesta per i diversi campi del datasource. Così si otterrebbe qualcosa di simile:
myDs.plug (Y.Plugin.Stats);
var = minimo myDs.stats.min ("anno");
var massimo = myDs.stats.max ("prezzo");
var = media myDs.stats.mean ("volume");
(Sto facendo di un API mentre scrivo!)
Vedo che essendo in genere più utili (ad esempio, voler aggiungere righe di riepilogo a un datatable), ma mette anche le statistiche, che sono proprietà dei dati, con i dati, piuttosto che il renderer.
Forse entrambi non sarebbe male ...
Opaco
Commento di Matt Parker - 24 Mar 2010 #
Matt,
Fate alcuni punti molto buoni e sono d'accordo che queste proprietà appartengono a livello dei dati. Attualmente, l'applicazione flash ha un proprio livello di dati che gestisce tali compiti. Quando costruiamo il motore js, è strato di dati sarà in js. Ciò non significa che non sarà in grado di utilizzare DataSource in un'applicazione con un grafico, significa solo che il grafico avrà la propria copia dei dati nello strato Actionscript.
Grazie,
Tripp
Commento di Tripp - 25 marzo 2010 #
Dalle ultime due settimane avevo lavorato su YUI 2 grafici.
Una cosa che ho sentito manca è l'interattività. Gli utenti dovrebbero essere in grado di aggiungere o rimuovere una parte del grafico (ad esempio, per un grafico combinatorio con una linea e un grafico a barre sarebbe bello se il grafico a linee potrebbe essere nascosto o rimossa quando l'utente fa clic su di esso). Inoltre, se folto gruppo di dati viene visualizzato come un punto sul grafico, l'utente dovrebbe essere in grado di vedere la tabella dettagliata per quel punto, cliccando su questo punto e così via ...
Avete piani per includere queste caratteristiche nel vostro futuro lavoro.
Si prega di dirigermi alla sezione relativa codice di esempio se si sa come il raggiungimento di tali funzioni utilizzando YUI.
Grazie
Commento di Durga - 8 Luglio 2010 #
L'interattività è limitata nella Tabella 2 YUI. È possibile, tuttavia, nascondere / mostrare una serie. Ecco un esempio in cui viene fatto qualcosa di simile:
http://developer.yahoo.com/yui/examples/charts/charts-hideseries.html
La Carta YUI3 è stato sviluppato con l'interattività in mente. Il disegno è modulare e tutti i componenti saranno esposti allo sviluppatore.
Tripp
Commento di Tripp - 8 Luglio 2010 #
Grazie Tripp,
Per il mio progetto attuale, vogliamo che i risultati simili ma non mediante le apposite caselle. Invece, usando listener di eventi per la serie (o grafico) stessa.
-Durga
Commento di Durga - 9 Luglio 2010 #

Siamo spiacenti, il commento forma è chiusa in questo momento.

Yahoo! User Interface Blog (YUIBlog)