Compilateur pour les graphiques en courbes. 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. |
reverse | Line | Inverse le dessin des séries sur l'axe des domaines. |
set | Line | Définit la couleur d'arrière-plan du graphique. |
set | Line | Définit les couleurs des lignes du graphique. |
set | Line | Définit le style à utiliser pour les courbes du graphique. |
set | Line | Définit l'URL de la source de données utilisée pour extraire des données à partir d'une source externe, telle que Google Sheets. |
set | Line | Définit le tableau de données à utiliser pour le graphique à l'aide d'un DataTableBuilder. |
set | Line | Définit le tableau de données contenant les lignes du graphique, ainsi que les libellés de l'axe des abscisses. |
set | Line | Définit la définition de la vue de données à utiliser pour le graphique. |
set | Line | Définit les dimensions du graphique. |
set | Line | Définit la position de la légende par rapport au graphique. |
set | Line | Définit le style de texte de la légende du graphique. |
set | Line | Définit les options avancées de ce graphique. |
set | Line | Définit le style des points de la ligne. |
set | Line | Définit la plage du graphique. |
set | Line | Définit le titre du graphique. |
set | Line | Définit le style de texte du titre du graphique. |
set | Line | Définit le style de texte de l'axe horizontal. |
set | Line | Ajoute un titre à l'axe horizontal. |
set | Line | Définit le style de texte du titre de l'axe horizontal. |
set | Line | Définit le style de texte de l'axe vertical. |
set | Line | Ajoute un titre à l'axe vertical. |
set | Line | Définit le style du texte du titre de l'axe vertical. |
use | Line | Convertit l'axe des valeurs en échelle logarithmique (toutes les valeurs doivent être positives). |
Documentation détaillée
build()
Crée le graphique.
Renvois
Chart
: objet graphique pouvant être intégré à des documents, à des éléments d'interface utilisateur ou utilisé comme image statique.
reverse Categories()
Inverse le dessin des séries sur l'axe des domaines. Pour les graphiques à plage verticale (comme les graphiques en courbes, en aires ou à colonnes), cela signifie que l'axe horizontal est dessiné de droite à gauche. Pour les graphiques à plage horizontale (comme les graphiques en barres), cela signifie que l'axe vertical est dessiné de haut en bas. Pour les graphiques à secteurs, cela signifie que les segments 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
Line
: ce compilateur est utile pour le chaînage.
set Background Color(cssValue)
Définit la couleur d'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 |
---|---|---|
css | String | Valeur CSS de la couleur (par exemple, "blue" ou "#00f" ). |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set Colors(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 |
---|---|---|
css | String[] | Tableau de valeurs CSS de couleur, telles que ["red", "#acf"] . L'élément n du tableau représente la couleur de la ligne n du graphique. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set Curve Style(style)
Définit le style à utiliser pour les courbes du graphique. Consultez Curve
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 | Curve | Style des courbes du graphique. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
Voir aussi
set Data Source Url(url)
Définit l'URL de la source de données utilisée pour extraire des données à partir d'une source externe, telle que Google Sheets. Si une URL de source de données et une DataTable sont fournies, l'URL de la 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
Line
: ce compilateur est utile pour le chaînage.
set Data Table(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 |
---|---|---|
table | Data | Un outil de création de tableaux de données. Une nouvelle table de données est créée instantanément dans le cadre de cet appel. Par conséquent, toute autre mise à jour du générateur ne sera pas reflétée dans le graphique. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set Data Table(table)
Définit le tableau de données contenant les lignes du graphique, ainsi que les libellés de l'axe des abscisses. La première colonne doit être une chaîne et contenir les libellés de l'axe horizontal. Un nombre illimité de colonnes peut suivre, toutes doivent être numériques. Chaque colonne s'affiche sur une ligne distincte.
Paramètres
Nom | Type | Description |
---|---|---|
table | Data | Tableau de données à utiliser pour le graphique. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set Data View Definition(dataViewDefinition)
Définit la définition de la vue de données à utiliser pour le graphique.
Paramètres
Nom | Type | Description |
---|---|---|
data | Data | Objet de définition de la 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
Line
: ce compilateur est utile pour le chaînage.
set Dimensions(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
Line
: ce compilateur est utile pour le chaînage.
set Legend Position(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
Line
: ce compilateur est utile pour le chaînage.
set Legend Text Style(textStyle)
Définit le style de 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 |
---|---|---|
text | Text | Style de texte à utiliser pour la légende du graphique. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set Option(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 donnée 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
Line
: ce compilateur est utile pour le chaînage.
set Point Style(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 | Point | Style à utiliser pour les points de la ligne. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
Voir aussi
set Range(start, end)
Définit la plage du graphique.
Si des points de données se trouvent en dehors de la plage, la plage est étendue pour les inclure.
Paramètres
Nom | Type | Description |
---|---|---|
start | Number | Valeur de la ligne de grille la plus basse de l'axe des plages. |
end | Number | Valeur de la ligne de grille la plus élevée de l'axe des valeurs. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set Title(chartTitle)
Définit le titre du graphique. Le titre s'affiche centré 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 |
---|---|---|
chart | String | le titre du graphique. |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set TitleTextStyle(textStyle)
Définit le style de 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 |
---|---|---|
text | Text | Style de texte à utiliser pour le titre du graphique. Vous pouvez créer un objet Text en appelant Charts.newTextStyle() . |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set XAxis Text Style(textStyle)
Définit le style de 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 |
---|---|---|
text | Text | Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet Text en appelant Charts.newTextStyle() . |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set XAxis Title(title)
Ajoute un titre à l'axe horizontal. Le titre est centré et apparaît sous les libellés de valeur des axes.
// 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
Line
: ce compilateur est utile pour le chaînage.
set XAxis TitleTextStyle(textStyle)
Définit le style de 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 |
---|---|---|
text | Text | Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet Text en appelant Charts.newTextStyle() . |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set YAxis Text Style(textStyle)
Définit le style de 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 |
---|---|---|
text | Text | Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet Text en appelant Charts.newTextStyle() . |
Renvois
Line
: ce compilateur est utile pour le chaînage.
set YAxis Title(title)
Ajoute un titre à l'axe vertical. Le titre est centré et apparaît à gauche des libellés de valeur.
// 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
Line
: ce compilateur est utile pour le chaînage.
set YAxis TitleTextStyle(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 |
---|---|---|
text | Text | Style de texte à utiliser pour le titre de l'axe horizontal. Vous pouvez créer un objet Text en appelant Charts.newTextStyle() . |
Renvois
Line
: ce compilateur est utile pour le chaînage.
use Log Scale()
Convertit l'axe des valeurs en échelle logarithmique (toutes les valeurs doivent être positives). L'axe des valeurs est l'axe vertical pour les graphiques verticaux (comme les graphiques en courbes, en aires ou en colonnes) et l'axe horizontal pour les graphiques horizontaux (comme les graphiques à barres).
Renvois
Line
: ce compilateur est utile pour le chaînage.