Personnaliser des graphiques

Vous pouvez utiliser les outils de création de graphiques Google avec leur paramètre par défaut. La personnalisation est facultative et la configuration de base est prête pour le lancement. Toutefois, vous pouvez facilement personnaliser les graphiques au cas où votre page Web adopterait un style incompatible avec les valeurs par défaut fournies. Chaque graphique propose différentes options permettant de personnaliser son apparence. Ces options sont exprimées sous forme de paires nom:valeur dans l'objet d'options transmis à la méthode draw() d'un graphique.

Les graphiques sont généralement compatibles avec les options personnalisées appropriées pour cette visualisation. Par exemple, le graphique de table accepte une option sortColumn pour spécifier la colonne de tri par défaut, et la visualisation de graphique à secteurs accepte une option colors qui vous permet de spécifier des couleurs de tranche. La documentation de chaque graphique doit décrire les options qu'il accepte.

Vous transmettez vos options en tant que deuxième paramètre facultatif à la méthode draw() du graphique décrite précédemment. Pour spécifier des options, créez un objet avec des propriétés spécifiques à chaque graphique.

L'exemple suivant illustre la création d'un objet d'options qui spécifie toutes ces propriétés:

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

chart.draw(data, options);

Voici le graphique créé par ce code.

Vous pouvez également spécifier des options littéralement dans la méthode draw():

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

Voici le graphique créé par ce code.

En savoir plus