Présentation
Certains graphiques Google, tels que les graphiques en aires, en courbes et combinés, comportent des lignes qui relient des points de données. Vous pouvez personnaliser la couleur, l'épaisseur et le tiret des lignes à l'aide des techniques présentées sur cette page.
Modification de la couleur
Vous pouvez modifier la couleur des lignes qui relient des points de données dans Google Charts de deux manières différentes: avec l'option colors
pour modifier la palette du graphique ou avec l'option series
pour spécifier la couleur d'une série particulière.
Dans le graphique suivant, nous définissons explicitement la couleur de chaque série.
var options = { legend: 'none', series: { 0: { color: '#e2431e' }, 1: { color: '#e7711b' }, 2: { color: '#f1ca3a' }, 3: { color: '#6f9654' }, 4: { color: '#1c91c0' }, 5: { color: '#43459d' }, } };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', series: { 0: { color: '#e2431e' }, 1: { color: '#e7711b' }, 2: { color: '#f1ca3a' }, 3: { color: '#6f9654' }, 4: { color: '#1c91c0' }, 5: { color: '#43459d' }, } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Au-dessus, les couleurs sont spécifiées par une valeur hexadécimale (par exemple, '#e2431e'
ou '#f00'
pour un rouge saturé), mais peut également être spécifié par un nom en anglais. L'exemple suivant illustre cela et montre comment contrôler les couleurs en corrigeant la palette du graphique avec l'option colors
, plutôt que de définir les couleurs de chaque série. Toutefois, si vous corrigez la palette et que votre palette comporte plus de séries que de couleurs, les couleurs seront réutilisées: si votre palette se compose de rouge et de bleu, la moitié de la série sera rouge et l'autre moitié bleue.
var options = { legend: 'none', colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray'] };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', colors: ['black', 'blue', 'red', 'green', 'yellow', 'gray'] }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Modifier l'épaisseur
Vous pouvez contrôler l'épaisseur des lignes à l'aide de l'option lineWidth
:
var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, lineWidth: 10, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, lineWidth: 10, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Pour contrôler l'épaisseur d'une série, utilisez l'option series
:
var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, series: { 0: { lineWidth: 1 }, 1: { lineWidth: 2 }, 2: { lineWidth: 4 }, 3: { lineWidth: 8 }, 4: { lineWidth: 16 }, 5: { lineWidth: 24 } }, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', '1', '2', '3', '4', '5', '6'], [1, 2, 3, 4, 5, 6, 7], [2, 3, 4, 5, 6, 7, 8], [3, 4, 5, 6, 7, 8, 9], [4, 5, 6, 7, 8, 9, 10], [5, 6, 7, 8, 9, 10, 11], [6, 7, 8, 9, 10, 11, 12] ]); var options = { legend: 'none', hAxis: { maxValue: 7 }, vAxis: { maxValue: 13 }, series: { 0: { lineWidth: 1 }, 1: { lineWidth: 2 }, 2: { lineWidth: 4 }, 3: { lineWidth: 8 }, 4: { lineWidth: 16 }, 5: { lineWidth: 24 } }, colors: ['#e2431e', '#d3362d', '#e7711b', '#e49307', '#e49307', '#b9c246'] }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Lignes en pointillés
De nombreux styles de lignes en pointillé sont possibles via l'option lineDashStyle
, qui accepte un tableau de nombres. Le premier nombre indique la longueur d'un tiret, et le second indique l'espace suivant. S'il existe un troisième nombre, il s'agit de la longueur du tiret suivant, et un quatrième nombre, s'il est présent, correspond à la longueur du suivant.
Lorsque le graphique est tracé, ces longueurs sont répétées. Ainsi, [4,
4]
signifie une succession de tirets et de longueurs de quatre longueurs. [5, 1, 3]
signifie un tiret de 5 longueurs, un écart de 1 longueur, un tiret de 3 longueurs, un écart de 5 longueurs, etc. Voici quelques exemples :
var options = { hAxis: { maxValue: 10 }, vAxis: { maxValue: 18 }, chartArea: { width: 380 }, lineWidth: 4, series: { 0: { lineDashStyle: [1, 1] }, 1: { lineDashStyle: [2, 2] }, 2: { lineDashStyle: [4, 4] }, 3: { lineDashStyle: [5, 1, 3] }, 4: { lineDashStyle: [4, 1] }, 5: { lineDashStyle: [10, 2] }, 6: { lineDashStyle: [14, 2, 7, 2] }, 7: { lineDashStyle: [14, 2, 2, 7] }, 8: { lineDashStyle: [2, 2, 20, 2, 20, 2] } }, colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0', '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'], };
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable ([['X', 'lineDashStyle: [1, 1]', 'lineDashStyle: [2, 2]', 'lineDashStyle: [4, 4]', 'lineDashStyle: [5, 1, 3]', 'lineDashStyle: [4, 1]', 'lineDashStyle: [10, 2]', 'lineDashStyle: [14, 2, 7, 2]', 'lineDashStyle: [14, 2, 2, 7]', 'lineDashStyle: [2, 2, 20, 2, 20, 2]'], [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], [2, 3, 4, 5, 6, 7, 8, 9, 10, 11], [3, 4, 5, 6, 7, 8, 9, 10, 11, 12], [4, 5, 6, 7, 8, 9, 10, 11, 12, 13], [5, 6, 7, 8, 9, 10, 11, 12, 13, 14], [6, 7, 8, 9, 10, 11, 12, 13, 14, 15], [7, 8, 9, 10, 11, 12, 13, 14, 15, 16], [8, 9, 10, 11, 12, 13, 14, 15, 16, 17], [9, 10, 11, 12, 13, 14, 15, 16, 17, 18] ]); var options = { hAxis: { maxValue: 10 }, vAxis: { maxValue: 18 }, chartArea: { width: 380 }, lineWidth: 4, series: { 0: { lineDashStyle: [1, 1] }, 1: { lineDashStyle: [2, 2] }, 2: { lineDashStyle: [4, 4] }, 3: { lineDashStyle: [5, 1, 3] }, 4: { lineDashStyle: [4, 1] }, 5: { lineDashStyle: [10, 2] }, 6: { lineDashStyle: [14, 2, 7, 2] }, 7: { lineDashStyle: [14, 2, 2, 7] }, 8: { lineDashStyle: [2, 2, 20, 2, 20, 2] } }, colors: ['#e2431e', '#f1ca3a', '#6f9654', '#1c91c0', '#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a'], }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>