Class LineChartBuilder

LineChartBuilder

Compilateur pour les graphiques linéaires. Pour en savoir plus, consultez la documentation Google Charts.

Voici un exemple montrant comment créer un graphique en courbes. 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%3AG5' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=2&headers=-1';

const chartBuilder = Charts.newLineChart()
                         .setTitle('Yearly Rainfall')
                         .setXAxisTitle('Month')
                         .setYAxisTitle('Rainfall (in)')
                         .setDimensions(600, 500)
                         .setCurveStyle(Charts.CurveStyle.SMOOTH)
                         .setPointStyle(Charts.PointStyle.MEDIUM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

Méthodes

Méthode	Type renvoyé	Brève description
build()	Chart	Crée le graphique.
reverseCategories()	LineChartBuilder	Inverse l'ordre de tracé des séries sur l'axe du domaine.
setBackgroundColor(cssValue)	LineChartBuilder	Définit la couleur de l'arrière-plan du graphique.
setColors(cssValues)	LineChartBuilder	Définit les couleurs des lignes du graphique.
setCurveStyle(style)	LineChartBuilder	Définit le style à utiliser pour les courbes du graphique.
setDataSourceUrl(url)	LineChartBuilder	Dé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)	LineChartBuilder	Définit le tableau de données à utiliser pour le graphique à l'aide d'un DataTableBuilder.
setDataTable(table)	LineChartBuilder	Définit le tableau de données contenant les lignes du graphique, ainsi que les libellés de l'axe X.
setDataViewDefinition(dataViewDefinition)	LineChartBuilder	Définit la définition de la vue de données à utiliser pour le graphique.
setDimensions(width, height)	LineChartBuilder	Définit les dimensions du graphique.
setLegendPosition(position)	LineChartBuilder	Définit la position de la légende par rapport au graphique.
setLegendTextStyle(textStyle)	LineChartBuilder	Définit le style du texte de la légende du graphique.
setOption(option, value)	LineChartBuilder	Définit les options avancées de ce graphique.
setPointStyle(style)	LineChartBuilder	Définit le style des points de la ligne.
setRange(start, end)	LineChartBuilder	Définit la plage du graphique.
setTitle(chartTitle)	LineChartBuilder	Définit le titre du graphique.
setTitleTextStyle(textStyle)	LineChartBuilder	Définit le style du texte du titre du graphique.
setXAxisTextStyle(textStyle)	LineChartBuilder	Définit le style du texte de l'axe horizontal.
setXAxisTitle(title)	LineChartBuilder	Ajoute un titre à l'axe horizontal.
setXAxisTitleTextStyle(textStyle)	LineChartBuilder	Définit le style du texte du titre de l'axe horizontal.
setYAxisTextStyle(textStyle)	LineChartBuilder	Définit le style du texte de l'axe vertical.
setYAxisTitle(title)	LineChartBuilder	Ajoute un titre à l'axe vertical.
setYAxisTitleTextStyle(textStyle)	LineChartBuilder	Définit le style du texte du titre de l'axe vertical.
useLogScale()	LineChartBuilder	Convertit l'axe de plage en échelle logarithmique (toutes les valeurs doivent être positives).

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

LineChartBuilder : 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

Nom	Type	Description
cssValue	String	Valeur CSS de la couleur (par exemple, "blue" ou "#00f").

Renvois

LineChartBuilder : 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

Nom	Type	Description
cssValues	String[]	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

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

---

setCurveStyle(style)

Définit le style à utiliser pour les courbes du graphique. Consultez CurveStyle pour connaître les styles de courbes autorisés.

// Creates a line chart builder and curves the lines in the chart.
const builder = Charts.newLineChart();
builder.setCurveStyle(Charts.CurveStyle.SMOOTH);

Paramètres

Nom	Type	Description
style	CurveStyle	Style des courbes du graphique.

Renvois

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

Voir aussi

• CurveStyle

---

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

Nom	Type	Description
url	String	URL de la source de données, y compris les paramètres de requête.

Renvois

LineChartBuilder : 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

Nom	Type	Description
tableBuilder	DataTableBuilder	Un 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

LineChartBuilder : 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

Nom	Type	Description
table	DataTableSource	Table de données à utiliser pour le graphique.

Renvois

LineChartBuilder : 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

Nom	Type	Description
dataViewDefinition	DataViewDefinition	Objet 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

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

---

setDimensions(width, height)

Définit les dimensions du graphique.

Paramètres

Nom	Type	Description
width	Integer	Largeur du graphique, en pixels.
height	Integer	Hauteur du graphique, en pixels.

Renvois

LineChartBuilder : 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

Nom	Type	Description
position	Position	Position de la légende.

Renvois

LineChartBuilder : 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

Nom	Type	Description
textStyle	TextStyle	Style de texte à utiliser pour la légende du graphique.

Renvois

LineChartBuilder : 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 line chart with a 1-second animation duration.
const builder = Charts.newLineChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

Paramètres

Nom	Type	Description
option	String	Option à définir.
value	Object	Valeur à définir.

Renvois

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

---

setPointStyle(style)

Définit le style des points de la ligne. Par défaut, les points n'ont pas de style particulier et seule la ligne est visible.

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

Paramètres

Nom	Type	Description
style	PointStyle	Style à utiliser pour les points de la ligne.

Renvois

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

Voir aussi

• PointStyle

---

setRange(start, end)

Définit la plage du graphique.

Si des points de données se trouvent en dehors de la plage, celle-ci est élargie pour les inclure.

Paramètres

Nom	Type	Description
start	Number	Valeur de la ligne de grille la plus basse de l'axe de plage.
end	Number	Valeur de la ligne de grille la plus élevée de l'axe de plage.

Renvois

LineChartBuilder : 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

Nom	Type	Description
chartTitle	String	le titre du graphique.

Renvois

LineChartBuilder : 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

Nom	Type	Description
textStyle	TextStyle	Style de texte à utiliser pour le titre du graphique. Vous pouvez créer un objet TextStyleBuilder en appelant Charts.newTextStyle().

Renvois

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

---

setXAxisTextStyle(textStyle)

Définit le style du texte de l'axe horizontal.

// Creates a line chart builder and sets the X-axis text style to blue, 18-point
// font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);

Paramètres

Nom	Type	Description
textStyle	TextStyle	Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet TextStyleBuilder en appelant Charts.newTextStyle().

Renvois

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

---

setXAxisTitle(title)

Ajoute un titre à l'axe horizontal. Le titre est centré et s'affiche sous les libellés des valeurs de l'axe.

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

Paramètres

Nom	Type	Description
title	String	Titre de l'axe X.

Renvois

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

---

setXAxisTitleTextStyle(textStyle)

Définit le style du texte du titre de l'axe horizontal.

// Creates a line chart builder and sets the X-axis title text style to blue,
// 18-point font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

Paramètres

Nom	Type	Description
textStyle	TextStyle	Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet TextStyleBuilder en appelant Charts.newTextStyle().

Renvois

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

---

setYAxisTextStyle(textStyle)

Définit le style du texte de l'axe vertical.

// Creates a line chart builder and sets the Y-axis text style to blue, 18-point
// font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);

Paramètres

Nom	Type	Description
textStyle	TextStyle	Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet TextStyleBuilder en appelant Charts.newTextStyle().

Renvois

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

---

setYAxisTitle(title)

Ajoute un titre à l'axe vertical. Le titre est centré et apparaît à gauche des libellés de valeurs.

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

Paramètres

Nom	Type	Description
title	String	Titre de l'axe Y.

Renvois

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

---

setYAxisTitleTextStyle(textStyle)

Définit le style du texte du titre de l'axe vertical.

// Creates a line chart builder and sets the Y-axis title text style to blue,
// 18-point font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

Paramètres

Nom	Type	Description
textStyle	TextStyle	Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet TextStyleBuilder en appelant Charts.newTextStyle().

Renvois

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

---

useLogScale()

Convertit l'axe de plage en échelle logarithmique (toutes les valeurs doivent être positives). L'axe de plage est l'axe vertical pour les graphiques verticaux (comme les graphiques en courbes, en aires ou à colonnes) et l'axe horizontal pour les graphiques horizontaux (comme les graphiques à barres).

Renvois

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