Come personalizzare i grafici

Puoi utilizzare Google Chart Tools con l'impostazione predefinita: tutta la personalizzazione è facoltativa e la configurazione di base è pronta per il lancio. Tuttavia, i grafici possono essere facilmente personalizzabili nel caso in cui la tua pagina web adotta uno stile non corrispondente ai valori predefiniti forniti. Ogni grafico mostra una serie di opzioni che personalizzano il suo aspetto. Queste opzioni sono espresse come coppie nome:valore nell'oggetto opzioni passato nel metodo draw() di un grafico.

In genere, i grafici supportano opzioni personalizzate appropriate per tale visualizzazione. Ad esempio, il grafico a tabella supporta un'opzione sortColumn per specificare la colonna di ordinamento predefinita, mentre la visualizzazione grafico a torta supporta un'opzione colors che consente di specificare i colori della sezione. La documentazione di ogni grafico deve descrivere le opzioni supportate.

Passerai le opzioni sotto forma di secondo parametro facoltativo al metodo draw() del grafico descritto in precedenza. Puoi specificare le opzioni creando un oggetto con proprietà specifiche per ogni grafico.

L'esempio seguente mostra la creazione di un oggetto opzioni che specifica tutte queste proprietà:

var options = {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};

chart.draw(data, options);

Ecco il grafico creato da questo codice.

Puoi anche specificare le opzioni letteralmente nel metodo draw():

chart.draw(data, {
  width: 400,
  height: 240,
  title: 'Toppings I Like On My Pizza',
  colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
  is3D: true
});

Ecco il grafico creato da questo codice.

Scopri di più