Visualizzazione di un array multidimensionale in un grafico a barre (in JavaScript)?

Question

E 'possibile che qualcuno mi desse alcune indicazioni su come visualizzare un array multidimensionale, sotto forma di un grafico a barre?

La matrice è multidimensionale, con tre elementi in ogni parte -. E gli elementi sono determinati da un modulo HTML

Quindi, se è possibile visualizzare questo tipo di matrice, sotto forma di un grafico a barre in Javascript su un sito HTML standard, mi farebbe piacere un po 'di aiuto!

Grazie

Answer 1

Flot e milkChart . Il primo si estende jQuery , quest'ultima MooTools . Entrambi utilizzano la href="http://en.wikipedia.org/wiki/Canvas_%28HTML_element%29" rel="nofollow noreferrer"> tela elemento nel tuo profilo StackOverflow per vederlo in uso. Ho usato Flot (non hanno provato MilkChart) in un progetto prima e durante il modo di passare i dati in esso può sembrare un po 'poco intuitivo in un primo momento, ci si accorge che in realtà è abbastanza potente per una soluzione di rilevamento non Flash . Flot definisce anche eventi personalizzati che è possibile utilizzare per definire le interazioni grafico. Flot supporta accatastati grafici a barre con un plugin, e credo che si può fare in cluster grafici a barre con esso pure.

Si può sempre andare con un qualche tipo di soluzione grafica dichiarativa utilizzando elementi div le barre in un grafico, ma non è così facile e coerente tutti i browser come disegnare i grafici con la tela.

Se siete diffidenti di una di queste soluzioni è possibile inviare i dati a un servizio per restituire un'immagine statica. Il Google Charting API supporta raggruppate grafici a barre, oppure si potrebbe usare un po ' servizio che ospitano da soli.

La mia raccomandazione è la prima soluzione che utilizza la tela HTML, in particolare facendo leva Flot dal momento che è la libreria che ho più esperienza con e posso garantire per. Forse qualcun altro ha alcuni commenti su MilkChart.

Modifica

Un'altra libreria ho dimenticato di menzionare è PlotKit che si estende MochiKit . Non ho usato, ma a quanto pare non solo supporta la creazione di grafici utilizzando l'elemento canvas ma supporta anche la creazione di grafici utilizzando SVG . Scalable Vector Graphics offrono un'altra opzione grafica dichiarativa di là di violazione al sistema una soluzione utilizzando HTML, tuttavia io non sono sicuro di come crossbrowser uno SVG soluzione basata sarebbe (in particolare in IE).

Modifica

Qui è un plugin jQuery che traccia utilizzando elementi div. Io personalmente non mi piace questa opzione perché penso che sia più complesso e meno facilmente configurabile rispetto ad alcune delle altre opzioni. Mi sento come l'utilizzo di elementi HTML per creare grafici complessi dichiarativi (mentre impressionante) è una sorta di una soluzione violato e che, nella mia esperienza, causare problemi a un certo punto.

Answer 2

In base alla documentazione, sia Flot e MilkChart funzionano solo in IE se è installato l'estensione excanvas.

Per una maggiore portabilità, vi suggerisco di verificare la Google API di visualizzazione che è incredibilmente semplice da usare e ha molte possibilità di visualizzazione differenti. Visualizzazioni sono resi sia come elementi flash (interattivo) o come immagini normali (statico).