Panoramica
Alcuni grafici di Google, come i grafici ad area, a linee e combinati, hanno linee che collegano i dati. Puoi personalizzare il colore, lo spessore e il trattino delle linee utilizzando le tecniche riportate in questa pagina.
Modificare il colore
Puoi modificare il colore delle linee che collegano punti dati in Google Graph in due modi leggermente diversi: con l'opzione colors
per modificare la tavolozza dei grafici o con l'opzione series
per specificare il colore di una particolare serie.
Nel grafico che segue viene impostato esplicitamente il colore di ogni serie.
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>
Sopra, i colori sono specificati in base al valore esadecimale (ad es. '#e2431e'
o '#f00'
per
un rosso saturo), ma può anche essere specificato dal nome inglese. L'esempio
seguente illustra questo concetto e mostra anche come controllare i colori
correggendo la tavolozza del grafico con l'opzione colors
,
anziché impostare i colori delle singole serie. Una
differenza è che se correggi la tavolozza e ci sono più serie che colori nella tavolozza, i colori verranno riutilizzati: se la tavolozza è rossa e blu, metà della serie sarà rossa e l'altra metà blu.
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>
Modificare lo spessore
Puoi controllare lo spessore delle linee con l'opzione 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>
Per controllare lo spessore linea di una serie, utilizza l'opzione 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>
Linee tratteggiate
Sono possibili molti stili di linee tratteggiate tramite l'opzione lineDashStyle
, che utilizza un array di numeri. Il primo numero indica la lunghezza di un trattino, mentre il secondo indica
la distanza dopo un trattino. Se c'è un terzo numero, corrisponde alla lunghezza del trattino successivo e un quarto numero, se presente, corrisponde alla lunghezza del divario successivo.
Quando il grafico è disegnato, queste lunghezze sono ripetute, quindi [4,
4]
significa una serie di trattini e quattro interruzioni di lunghezza. [5, 1, 3]
indica un trattino a 5 lunghezze, uno a 1 lunghezza, uno a 3 lunghezze, uno a 5 lunghezze e così via. Ecco alcuni esempi:
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>