Google Charts - Guide rapide
Google Chartsest une bibliothèque de graphiques purement basée sur JavaScript destinée à améliorer les applications Web en ajoutant des fonctionnalités de création de graphiques interactives. Il prend en charge un large éventail de graphiques. Les graphiques sont dessinés à l'aide de SVG dans les navigateurs standard tels que Chrome, Firefox, Safari, Internet Explorer (IE). Dans l'ancien IE 6, VML est utilisé pour dessiner les graphiques.
traits
Voici les principales caractéristiques de la bibliothèque Google Charts.
Compatability - Fonctionne parfaitement sur tous les principaux navigateurs et plates-formes mobiles comme Android et iOS.
Multitouch Support- Prend en charge le multitouch sur les plates-formes à écran tactile comme Android et iOS. Idéal pour les smartphones / tablettes iPhone / iPad et Android.
Free to Use - Open source et est gratuit à utiliser à des fins non commerciales.
Lightweight - La bibliothèque principale loader.js, est une bibliothèque extrêmement légère.
Simple Configurations - Utilise json pour définir diverses configurations des graphiques et très facile à apprendre et à utiliser.
Dynamic - Permet de modifier le graphique même après la génération du graphique.
Multiple axes- Non limité aux axes x, y. Prend en charge plusieurs axes sur les graphiques.
Configurable tooltips- L'info-bulle survient lorsqu'un utilisateur survole n'importe quel point d'un graphique. googlecharts fournit un formateur intégré d'info-bulle ou un formateur de rappel pour contrôler l'info-bulle par programmation.
DateTime support- Manipulez la date et l'heure spécialement. Fournit de nombreux contrôles intégrés sur les catégories par date.
Print - Imprimer le graphique en utilisant la page Web.
External data- Prend en charge le chargement dynamique des données à partir du serveur. Fournit un contrôle sur les données à l'aide des fonctions de rappel.
Text Rotation - Prend en charge la rotation des étiquettes dans n'importe quelle direction.
Types de graphiques pris en charge
La bibliothèque Google Charts fournit les types de graphiques suivants:
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Line Charts Utilisé pour dessiner des graphiques basés sur des lignes / splines. |
| 2 | Area Charts Utilisé pour dessiner des graphiques par zone. |
| 3 | Pie Charts Utilisé pour dessiner des graphiques à secteurs. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Utilisé pour dessiner des graphiques dispersés. |
| 5 | Bubble Charts Utilisé pour dessiner des graphiques à bulles. |
| 6 | Dynamic Charts Utilisé pour dessiner des graphiques dynamiques où l'utilisateur peut modifier les graphiques. |
| sept | Combinations Utilisé pour dessiner des combinaisons de divers graphiques. |
| 8 | 3D Charts Utilisé pour dessiner des graphiques 3D. |
| 9 | Angular Gauges Utilisé pour dessiner des graphiques de type de compteur de vitesse. |
| dix | Heat Maps Utilisé pour dessiner des cartes thermiques. |
| 11 | Tree Maps Utilisé pour dessiner des cartes d'arbre. |
Dans les prochains chapitres, nous allons discuter de chaque type de graphiques mentionnés ci-dessus en détail avec des exemples.
Licence
Google Charts est open source et est gratuit. Suivez le lien: Conditions d'utilisation .
Dans ce chapitre, nous expliquerons comment configurer la bibliothèque Google Charts à utiliser dans le développement d'applications Web.
Installer Google Charts
Il existe deux façons d'utiliser Google Charts.
Download - Téléchargez-le localement depuis https://developers.google.com/chart et utilisez-le.
CDN access- Vous avez également accès à un CDN. Le CDN vous donnera accès dans le monde entier à des centres de données régionaux qui, dans ce cas, hébergent Google Charthttps://www.gstatic.com/charts.
Utilisation du graphique Google téléchargé
Incluez le fichier JavaScript googlecharts dans la page HTML à l'aide du script suivant -
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Utiliser CDN
Nous utilisons les versions CDN de la bibliothèque Google Chart tout au long de ce didacticiel.
Incluez le fichier JavaScript Google Chart dans la page HTML à l'aide du script suivant -
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>Dans ce chapitre, nous présenterons la configuration requise pour dessiner un graphique à l'aide de l'API Google Chart.
Étape 1: créer une page HTML
Créez une page HTML avec les bibliothèques Google Chart.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Ici containerdiv est utilisé pour contenir le graphique dessiné à l'aide de la bibliothèque Google Chart. Ici, nous chargeons la dernière version de l'API corecharts à l'aide de la méthode google.charts.load.
Étape 2: créer des configurations
La bibliothèque Google Chart utilise des configurations très simples utilisant la syntaxe json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Ici, les données représentent les données json et les options représentent la configuration utilisée par la bibliothèque Google Chart pour dessiner un graphique avec le conteneur div à l'aide de la méthode draw (). Nous allons maintenant configurer les différents paramètres pour créer la chaîne json requise.
Titre
Configurez les options du graphique.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};DataTable
Configurez les données à afficher sur le graphique. DataTable est une collection structurée de table spéciale qui contient les données du graphique. Les colonnes de la table de données représentent les légendes et les lignes représentent les données correspondantes. La méthode addColumn () est utilisée pour ajouter une colonne où le premier paramètre représente le type de données et le second paramètre représente la légende. La méthode addRows () est utilisée pour ajouter des lignes en conséquence.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Étape 3: dessinez le graphique
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Exemple
Voici l'exemple complet -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Le code suivant appelle la fonction drawChart pour dessiner un graphique lorsque la bibliothèque Google Chart est complètement chargée.
google.charts.setOnLoadCallback(drawChart);Résultat
Vérifiez le résultat.
Les graphiques en aires sont utilisés pour dessiner des graphiques en zones. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des zones.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Zone de base
Graphique à aires de base |
| 2 | Zone avec des valeurs négatives
Graphique en aires ayant des valeurs négatives. |
| 3 | Zone empilée
Graphique ayant des zones empilées les unes sur les autres. |
| 4 | Zone de pourcentage
Graphique avec données en pourcentage. |
| 5 | Zone avec des points manquants
Graphique avec des points manquants dans les données. |
| 6 | Axes inversés
Zone utilisant des axes inversés. |
Les graphiques à barres sont utilisés pour dessiner des graphiques à barres. Dans cette section, nous allons discuter des types suivants de graphiques à barres.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Barre de base
Graphique à barres de base |
| 2 | Graphique à barres groupées
Graphique à barres groupées. |
| 3 | Barre empilée
Diagramme à barres ayant des barres empilées les unes sur les autres. |
| 4 | Barre empilée négative
Graphique à barres avec pile négative. |
| 5 | Barre empilée en pourcentage
Graphique à barres avec des données en pourcentage. |
| 6 | Diagramme à barres des matériaux
Un graphique à barres inspiré du Material Design. |
| sept | Graphique à barres avec étiquettes de données
Diagramme à barres avec étiquettes de données. |
Les graphiques à bulles sont utilisés pour dessiner des graphiques à bulles. Dans cette section, nous allons discuter des types suivants de graphiques à bulles.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Bulle de base
Graphique à bulles de base. |
| 2 | Graphique à bulles avec étiquettes de données
Graphique à bulles avec étiquettes de données. |
Les graphiques de calendrier sont utilisés pour dessiner des activités sur une longue période de temps comme des mois ou des années. Dans cette section, nous allons discuter des types suivants de graphiques basés sur un calendrier.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Calendrier de base
Graphique de base du calendrier. |
| 2 | Calendrier avec des couleurs personnalisées
Tableau de calendrier personnalisé. |
Les graphiques en chandeliers sont utilisés pour afficher la valeur d'ouverture et de clôture sur un écart de valeur et sont normalement utilisés pour représenter les actions. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des chandeliers.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Chandelier basique
Graphique de base en chandelier. |
| 2 | Bougeoir aux couleurs personnalisées
Tableau de chandelier personnalisé. |
Les graphiques à colonnes sont utilisés pour dessiner des graphiques basés sur des colonnes. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des colonnes.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Colonne de base
Graphique à colonnes de base. |
| 2 | Colonne groupée
Graphique à colonnes groupées. |
| 3 | Colonne empilée
Diagramme à colonnes ayant des colonnes empilées les unes sur les autres. |
| 4 | Colonne empilée négative
Histogramme avec pile négative. |
| 5 | Colonne empilée en pourcentage
Graphique à colonnes avec des données en pourcentage. |
| 6 | Diagramme à colonnes des matériaux
Un histogramme inspiré du Material Design. |
| sept | Graphique à colonnes avec étiquettes de données
Graphique à colonnes avec étiquettes de données. |
Le graphique combiné permet de rendre chaque série comme un type de marqueur différent de la liste suivante: ligne, zone, barres, chandeliers et zone en escalier. Pour attribuer un type de marqueur par défaut aux séries, utilisez la propriété seriesType. La propriété Series doit être utilisée pour spécifier les propriétés de chaque série individuellement. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé ComboChart classe pour afficher le graphique basé sur les combinaisons.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Exemple
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.
Un histogramme est un graphique qui regroupe les données numériques dans des compartiments, affichant les compartiments sous forme de colonnes segmentées. Ils sont utilisés pour décrire la distribution d'un ensemble de données comme la fréquence à laquelle les valeurs tombent dans des plages. Google Charts choisit automatiquement le nombre de buckets pour vous. Tous les compartiments sont de largeur égale et ont une hauteur proportionnelle au nombre de points de données dans le compartiment. Les histogrammes sont similaires aux histogrammes sous d'autres aspects. Dans cette section, nous allons discuter des types suivants de graphiques basés sur un histogramme.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Histogramme de base
Diagramme d'histogramme de base. |
| 2 | Contrôle de la couleur
Couleur personnalisée du graphique d'histrogramme. |
| 3 | Contrôle des godets
Seaux personnalisés de graphique d'histrogramme. |
| 4 | Série multiple
Diagramme d'histrogramme ayant plusieurs séries. |
Les graphiques linéaires sont utilisés pour dessiner des graphiques linéaires. Dans cette section, nous allons discuter des types suivants de graphiques basés sur des lignes.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Ligne de base
Graphique linéaire de base. |
| 2 | Avec des points visibles
Graphique avec points de données visibles. |
| 3 | Couleur de fond personnalisable
Graphique avec couleur d'arrière-plan personnalisée. |
| 4 | Couleur de ligne personnalisable
Graphique avec couleur de ligne personnalisée. |
| 5 | Étiquettes d'axe et de graduation personnalisables
Graphique avec axe personnalisé et étiquettes de graduation. |
| 6 | Réticule
Graphiques linéaires montrant des réticules au point de données lors de la sélection. |
| sept | Style de ligne personnalisable
Graphique avec couleur de ligne personnalisée. |
| 8 | Graphiques linéaires avec lignes courbes
Graphique avec des lignes courbes lisses. |
| 9 | Graphique de ligne de matériau
Un graphique linéaire inspiré de Material Design. |
| dix | Top X Line Chart
Un graphique en courbes inspiré de Material Design avec l'axe X en haut du graphique. |
Un graphique Google Map utilise l'API Google Maps pour afficher la carte. Les valeurs de données sont affichées sous forme de marqueurs sur la carte. Les valeurs de données peuvent être des coordonnées (paires lat-long) ou des adresses réelles. La carte sera mise à l'échelle en conséquence de manière à inclure tous les points identifiés.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Carte de base
Google Map de base. |
| 2 | Carte utilisant la latitude / longitude
Carte avec des emplacements spécifiés en utilisant la latitude et la longitude. |
| 3 | Personnalisation des marqueurs
Marqueurs personnalisés dans la carte. |
L'organigramme permet de rendre une hiérarchie de nœuds, utilisée pour décrire les relations supérieurs / subordonnés dans une organisation. Par exemple, un arbre généalogique est un type d'organigramme. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé OrgChart classe pour afficher le diagramme basé sur l'organisation.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Exemple
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.
Les graphiques à secteurs sont utilisés pour dessiner des graphiques à secteurs. Dans cette section, nous allons discuter des types suivants de graphiques à secteurs.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Tarte de base
Graphique à secteurs de base. |
| 2 | Graphique en anneau
Graphique en anneau. |
| 3 | Graphique à secteurs 3D
Camembert 3D. |
| 4 | Diagramme à secteurs avec tranches éclatées
Camembert avec des tranches éclatées. |
Un graphique sankey est un outil de visualisation utilisé pour représenter un flux d'un ensemble de valeurs à un autre. Les objets connectés sont appelés nœuds et les connexions sont appelées liens. Les sankeys sont utilisés pour montrer un mappage plusieurs à plusieurs entre deux domaines ou plusieurs chemins à travers un ensemble d'étapes.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Graphique de Sankey de base
Graphique Sankey de base. |
| 2 | Graphique Sankey à plusieurs niveaux
Graphique de Sankey à plusieurs niveaux. |
| 3 | Personnalisation du diagramme de Sankey
Graphique de Sankey personnalisé. |
Les graphiques Sankey, les graphiques en nuage de points, les graphiques en aires étagées, le tableau, les chronologies, l'arborescence, les courbes de tendance sont utilisés pour dessiner des graphiques en nuage de points. Dans cette section, nous allons discuter des types suivants de graphiques à nuage de points.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Scatter de base
Diagramme de dispersion de base. |
| 2 | Diagramme de dispersion des matériaux
Tableau de dispersion des matériaux. |
| 3 | Diagramme de dispersion sur deux axes Y
Diagramme de dispersion des matériaux à double axe Y. |
| 4 | Graphique de dispersion de l'axe X supérieur
Diagramme de dispersion des matériaux avec l'axe X en haut. |
Un graphique en aires échelonnées est un diagramme en aires basé sur des étapes. Nous allons discuter des types suivants de graphiques en aires échelonnés.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Graphique en étapes de base
Graphique de base en escalier. |
| 2 | Graphique en escalier empilé
Graphique à aires étagées empilées. |
| 3 | Graphique en étapes 100% empilé
100% graphique à aires étagées empilées. |
Le graphique de tableau aide à rendre un tableau qui peut être trié et paginé. Les cellules de tableau peuvent être formatées à l'aide de chaînes de format ou en insérant directement du HTML en tant que valeurs de cellule. Les valeurs numériques sont alignées à droite par défaut; Les valeurs booléennes sont affichées sous forme de coches ou de croix. Les utilisateurs peuvent sélectionner des lignes uniques avec le clavier ou la souris. Les en-têtes de colonne peuvent être utilisés pour le tri. La ligne d'en-tête reste fixe pendant le défilement. La table déclenche les événements correspondant à l'interaction de l'utilisateur. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé Table classe pour afficher le graphique basé sur une table.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Exemple
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.
Les chronologies décrivent comment un ensemble de ressources est utilisé au fil du temps. Nous allons discuter des types suivants de graphiques chronologiques.
| N ° Sr. | Type de graphique / description |
|---|---|
| 1 | Tableau des délais de base
Tableau des délais de base |
| 2 | Graphique chronologique avec étiquettes de données
Graphique chronologique avec étiquettes de données |
| 3 | Graphique chronologique sans étiquette de ligne
Graphique chronologique sans étiquette de ligne |
| 4 | Coloration du graphique chronologique
Tableau des délais personnalisés |
TreeMap est une représentation visuelle d'une arborescence de données, où chaque nœud peut avoir zéro ou plusieurs enfants et un parent (à l'exception de la racine). Chaque nœud est affiché sous forme de rectangle, peut être dimensionné et coloré en fonction des valeurs que nous attribuons. Les tailles et les couleurs sont évaluées par rapport à tous les autres nœuds du graphique. Voici un exemple de graphique treemap. Nous avons déjà vu la configuration utilisée pour dessiner ce graphique dans le chapitre Syntaxe de configuration de Google Charts . Alors, voyons l'exemple complet.
Configurations
Nous avons utilisé TreeMap classe pour afficher le diagramme de treemap.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Exemple
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Résultat
Vérifiez le résultat.
Une courbe de tendance est une ligne superposée sur un graphique pour révéler la direction générale des données. Les graphiques Google peuvent générer automatiquement des courbes de tendance pour les graphiques Sankey, les graphiques à dispersion, les graphiques à aires en escalier, les tableaux, les chronologies, l'arborescence, les courbes de tendance, les graphiques à barres, les graphiques en colonnes et les graphiques en courbes. Nous allons discuter des types de graphiques de courbes de tendance suivants.
| N ° Sr. | Type et description du graphique |
|---|---|
| 1 | Graphique des lignes de tendance de base
Graphique des courbes de tendance de base. |
| 2 | Graphique des courbes de tendance exponentielles
Graphique des courbes de tendance exponentielles. |
| 3 | Graphique des courbes de tendance polynomiales
Graphique des courbes de tendance polynomiales. |