Class PieChartBuilder

PieChartBuilder

Compilateur pour les graphiques circulaires. Pour en savoir plus, consultez la documentation Google Charts.

Voici un exemple montrant comment créer un graphique à secteurs. Les données sont importées à partir d'une feuille de calcul Google. 

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AB8' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=3&headers=-1';

const chartBuilder = Charts.newPieChart()
                         .setTitle('World Population by Continent')
                         .setDimensions(600, 500)
                         .set3D()
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

Méthodes

MéthodeType renvoyéBrève description
build()ChartCrée le graphique.
reverseCategories()PieChartBuilderInverse l'ordre de tracé des séries sur l'axe du domaine.
set3D()PieChartBuilderDéfinit le graphique sur trois dimensions.
setBackgroundColor(cssValue)PieChartBuilderDéfinit la couleur de l'arrière-plan du graphique.
setColors(cssValues)PieChartBuilderDéfinit les couleurs des lignes du graphique.
setDataSourceUrl(url)PieChartBuilderDéfinit l'URL de la source de données utilisée pour extraire les données d'une source externe, comme Google Sheets.
setDataTable(tableBuilder)PieChartBuilderDéfinit le tableau de données à utiliser pour le graphique à l'aide d'un DataTableBuilder.
setDataTable(table)PieChartBuilderDéfinit le tableau de données contenant les lignes du graphique, ainsi que les libellés de l'axe X.
setDataViewDefinition(dataViewDefinition)PieChartBuilderDéfinit la définition de la vue de données à utiliser pour le graphique.
setDimensions(width, height)PieChartBuilderDéfinit les dimensions du graphique.
setLegendPosition(position)PieChartBuilderDéfinit la position de la légende par rapport au graphique.
setLegendTextStyle(textStyle)PieChartBuilderDéfinit le style du texte de la légende du graphique.
setOption(option, value)PieChartBuilderDéfinit les options avancées de ce graphique.
setTitle(chartTitle)PieChartBuilderDéfinit le titre du graphique.
setTitleTextStyle(textStyle)PieChartBuilderDéfinit le style du texte du titre du graphique.

Documentation détaillée

build()

Crée le graphique.

Renvois

Chart : objet Chart, qui peut être intégré dans des documents ou des éléments d'UI, ou utilisé comme image statique.

reverseCategories()

Inverse l'ordre de tracé des séries sur l'axe du domaine. Pour les graphiques à plage verticale (comme les graphiques en courbes, en aires ou à colonnes), cela signifie que l'axe horizontal est tracé de droite à gauche. Pour les graphiques à plage horizontale (comme les graphiques à barres), cela signifie que l'axe vertical est tracé de haut en bas. Pour les graphiques à secteurs, cela signifie que les secteurs sont dessinés dans le sens inverse des aiguilles d'une montre. 

// Creates a pie chart builder and sets drawing of the slices in a
// counter-clockwise manner.
const builder = Charts.newPieChart();
builder.reverseCategories();

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

set3D()

Définit le graphique sur trois dimensions.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setBackgroundColor(cssValue)

Définit la couleur de l'arrière-plan du graphique. 

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

Paramètres

NomTypeDescription
cssValueStringValeur CSS de la couleur (par exemple, "blue" ou "#00f").

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setColors(cssValues)

Définit les couleurs des lignes du graphique. 

// Creates a line chart builder and sets the first two lines to be drawn in
// green and red, respectively.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

Paramètres

NomTypeDescription
cssValuesString[]Tableau de valeurs CSS de couleur, tel que ["red", "#acf"]. Le nième élément du tableau représente la couleur de la nième ligne du graphique.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setDataSourceUrl(url)

Définit l'URL de la source de données utilisée pour extraire les données d'une source externe, comme Google Sheets. Si une URL de source de données et un DataTable sont fournis, l'URL de source de données est ignorée.

Pour en savoir plus sur l'interrogation des sources de données, consultez la documentation Google Charts.

Paramètres

NomTypeDescription
urlStringURL de la source de données, y compris les paramètres de requête.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setDataTable(tableBuilder)

Définit le tableau de données à utiliser pour le graphique à l'aide d'un DataTableBuilder. Il s'agit d'une méthode pratique pour définir le tableau de données sans avoir à appeler build().

Paramètres

NomTypeDescription
tableBuilderDataTableBuilderUn outil de création de tableaux de données. Une table de données est créée instantanément lors de cet appel. Par conséquent, les modifications apportées ultérieurement au générateur ne seront pas reflétées dans le graphique.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setDataTable(table)

Définit le tableau de données contenant les lignes du graphique, ainsi que les libellés de l'axe X. La première colonne doit être une chaîne et contenir les libellés de l'axe horizontal. Vous pouvez ajouter autant de colonnes que vous le souhaitez, mais elles doivent toutes être numériques. Chaque colonne s'affiche sur une ligne distincte.

Paramètres

NomTypeDescription
tableDataTableSourceTable de données à utiliser pour le graphique.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setDataViewDefinition(dataViewDefinition)

Définit la définition de la vue de données à utiliser pour le graphique.

Paramètres

NomTypeDescription
dataViewDefinitionDataViewDefinitionObjet de définition de vue de données qui définit la vue à dériver de la source de données donnée pour le dessin du graphique.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setDimensions(width, height)

Définit les dimensions du graphique.

Paramètres

NomTypeDescription
widthIntegerLargeur du graphique, en pixels.
heightIntegerHauteur du graphique, en pixels.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setLegendPosition(position)

Définit la position de la légende par rapport au graphique. Par défaut, aucune légende n'est affichée. 

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

Paramètres

NomTypeDescription
positionPositionPosition de la légende.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setLegendTextStyle(textStyle)

Définit le style du texte de la légende du graphique. 

// Creates a line chart builder and sets it up for a  blue, 26-point legend.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

Paramètres

NomTypeDescription
textStyleTextStyleStyle de texte à utiliser pour la légende du graphique.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setOption(option, value)

Définit les options avancées de ce graphique. Consultez les options disponibles pour ce graphique. Cette méthode n'a aucun effet si l'option fournie n'est pas valide. 

// Build a pie chart with a pretty legend.
const builder = Charts.newPieChart();
builder.setOption('legend', {textStyle: {color: 'blue', fontSize: 16}});
const chart = builder.build();

Paramètres

NomTypeDescription
optionStringOption à définir.
valueObjectValeur à définir.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setTitle(chartTitle)

Définit le titre du graphique. Le titre s'affiche au centre, au-dessus du graphique. 

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

Paramètres

NomTypeDescription
chartTitleStringle titre du graphique.

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.

setTitleTextStyle(textStyle)

Définit le style du texte du titre du graphique. 

// Creates a line chart builder and sets it up for a  blue, 26-point title.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setTitleTextStyle(style);

Paramètres

NomTypeDescription
textStyleTextStyleStyle de texte à utiliser pour le titre du graphique. Vous pouvez créer un objet TextStyleBuilder en appelant Charts.newTextStyle().

Renvois

PieChartBuilder : ce générateur, utile pour le chaînage.