Panoramica
Alcuni grafici Google, come i grafici ad area, a linee e combinati, hanno linee che collegano i punti dati. Puoi personalizzare il colore, lo spessore e il tratteggio delle linee usando le tecniche usate in questa pagina.
Modifica del colore
Puoi modificare il colore delle linee che collegano i punti dati in
Google Graph in due modi leggermente diversi: con
l'opzione colors per modificare la tavolozza del grafico o con
l'opzione series per specificare il colore di
una serie specifica.
Nel grafico seguente, impostiamo 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 da un valore esadecimale (ad es. '#e2431e' o '#f00' per un
rosso saturo), ma può anche essere specificato con un nome in inglese. L'esempio seguente lo spiega e mostra anche come controllare i colori correggendo la tavolozza del grafico con l'opzione colors, anziché impostare i colori di 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 è composta da rosso 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 della 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 accetta un array di numeri. Il primo numero indica la lunghezza di un trattino, mentre il secondo indica lo spazio vuoto dopo. Se c'è un terzo numero,
corrisponde alla lunghezza del trattino successivo, mentre un quarto numero, se presente,
è la lunghezza del vuoto successivo.
Quando il grafico viene disegnato, queste lunghezze vengono ripetute, quindi [4,
4] indica una successione di 4 trattini e 4 intervalli di lunghezza. [5, 1, 3] indica un trattino di 5 lunghezze, uno spazio di 1 lunghezza,
un trattino di 3 lunghezze, uno di 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>