Grafici a barre

Il grafico a barre è una soluzione ottimale per esporre dei dati evidenziando le quantità e non l'incidenza che queste hanno su un totale. Ne sono un esempio le moltitudini di grafici che (più o meno attendibilmente) mostrano la distribuzione dei programmatori tra i vari linguaggi.

La creazione di questa tipologia di grafici passa attraverso alcuni step. Prima di tutto bisogna rendere le dimensioni del canvas maggiori di quelle del grafico così da poter inserire delle scritte ai lati di quest'ultimo. Questo introduce una differenza: il canvas rappresenta l'intera area di disegno, il grafico la parte del canvas che contiene il disegno. Successivamente bisogna calcolare le dimensioni degli elementi rapportandole a quelle del grafico e calcolarne la posizione. Il passo seguente è disegnare le righe che compongo la griglia e il valore che queste rappresentano.

Esaminiamo singolarmente le operazioni:

In questo snippet viene preso lo stesso DataReader dell'esempio precedente e per ogni riga:

• Viene calcolata l'altezza del rettangolo (itemHeight), che rappresenta l'elemento, in rapporto alla grandezza del grafico.
• Viene calcolata la posizione calcolando l'asse x in base al numero di elementi già inseriti e la distanza tra essi, e l'asse y togliendo all'altezza del grafico l'altezza calcolata del rettangolo e la distanza dal bordo della bitmap. Questo perché l'asse y si calcola partendo dal concetto che il valore 0 rappresenta il punto più in alto nella bitmap.

In questa seconda porzione di codice vengono disegnate le righe che compongono la griglia e il valore che esse rappresentano. Viene preso un valore come intervallo (rowInterval), convertito in rapporto al grafico, trovata la sua coordinata y e disegnata una linea.

Per fare questo vengono utilizzati 2 nuovi metodi della classe Graphics:

• DrawLine serve per disegnare una riga da un punto ad un altro. L'overload che è stato utilizzato accetta in input un oggetto Pen con il colore della riga e le coordinate del prime del secondo punto da unire.
• DrawString è utilizzato per disegnare una stringa. Questo overload prende la stringa da disegnare, il font, il colore, e le coordinate del punto in alto a sinistra da cui inizia la stringa.

Qui vengono disegnati i rettangoli precedentemente salvati ed infine viene disegnato il rettangolo che delimita l'area del grafico.

Anche in questo caso vengono introdotti 2 nuovi metodi della classe Graphics: DrawRectangle e FillRectangle .

• Il primo serve per disegnare un rettangolo. Come parametri di input questo accetta un oggetto Pen con cui disegnare i lati, le coordinate del punto in alto a sinistra del rettangolo e la sua larghezza e altezza.
• Il secondo serve per riempire un rettangolo con un colore. Come parametri di input questo accetta un oggetto Brush, e un oggetto Rectangle o RectangleF contenente i dati del rettangolo.

Così come per le torte, e per ogni grafico in generale, si ha un miglior impatto visivo quando si ha a che fare con immagini 3D. Fortunatamente, la traslazione per ottenere questo effetto con un istogramma è molto più semplice rispetto ad una torta.

Infatti basta definire una profondità e disegnare i rettangoli. Per quanto riguarda l'area del grafico si devono disegnare nella parte bassa e in quella sinistra 2 rettangoli spostati in basso così da dare l'effetto di profondità, mentre per i rettangoli degli elementi si parte dal fatto di dover dare l'effetto all'utente che quello che sia disegnato sia un poligono e che la sua visione sia dalla destra e dall'alto. Partendo da questi concetti è chiaro che le facce da disegnare sono quella frontale, quella di destra e quella superiore. Gli step da seguire, in questo caso, differiscono di poco rispetto a quelli in 2D. Per prima cosa si crea e riempie l'area intorno al grafico per dare l'effetto di profondità, poi si disegnano le righe che creano la griglia, si definiscono i bordi delle aree per il 3D intorno al grafico e infine si disegnano gli elementi in 3D.

In questo caso esaminiamo le operazioni passo per passo senza l'ausilio del codice.

Per disegnare l'area per l'effetto 3D intorno al grafico, si creano 2 parallelepipedi, uno sulla sinistra e in basso, che costituiscono la faccia di sinistra e quella inferiore. Le righe che compongono la griglia vengono disegnate in 2 fasi, prima viene creata la parte "piatta" (ovvero la stessa per il grafico in 2D), e poi quella nel parallelepipedo di sinistra seguendo la sua stessa inclinazione. Inoltre anche il valore della riga viene disegnato più in basso allineandosi alle righe del parallelepipedo. A questo punto si disegnano i bordi dei parallelepipedi precedentemente creati, questa operazione non viene eseguita prima poiché disegnando la griglia i bordi sarebbero stati soprascritti. L'ultimo passo è quello di disegnare i rettangoli. Come detto in precedenza, le facce da disegnare sono 3, quella frontale, quella di destra, e quella superiore. Prima viene disegnata quella frontale facendola partire dal punto più basso del parallelepipedo inferiore, poi quella di destra che da il vero effetto di profondità occupando l'intera larghezza del parallelepipedo (per dare un maggior risalto al 3D, viene anche scurito il colore di questa faccia), infine quella superiore che funziona da collegamento tra le altre 2 (anche in questo caso il colore viene scurito).

Attenzione: Questo articolo contiene un allegato

Contenuti dell'articolo

• Pagina 1
  • La base di lavoro
  • Grafici a torta
• Pagina 2
  • Grafici a barre
• Pagina 3
  • Grafici a linee
  • Aggiungere una legenda
  • Conclusioni
  • Approfondimenti