Omówienie
Niektóre Wykresy Google, np. wykres warstwowy, liniowy i wykres mieszany, zawierają linie łączące punkty danych. Za pomocą technik opisanych na tej stronie możesz dostosować kolor, grubość i kreski linii.
Zmienianie koloru
Możesz zmienić kolor linii łączących punkty danych w Wykresach Google na 2 subtelne sposoby: za pomocą opcji colors do zmiany palety wykresów lub za pomocą opcji series, która określa kolor poszczególnych serii.
Na poniższym wykresie wyraźnie ustawiliśmy kolor każdej serii.
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>
Powyżej kolory są określone za pomocą wartości szesnastkowej (np. '#e2431e' lub '#f00' w przypadku nasyconej czerwieni), ale można ją również określić, używając nazwy angielskiej. Poniższy przykład ilustruje to zjawisko oraz pokazuje, jak kontrolować kolory, ustalając paletę wykresu za pomocą opcji colors zamiast ustawiać kolory poszczególnych serii. Jedna z różnic polega na tym, że jeśli poprawisz paletę, a w palecie jest więcej serii niż kolorów, kolory zostaną ponownie wykorzystane: jeśli paleta składa się z czerwonego i niebieskiego, połowa serii będzie czerwona, a druga połowa niebieska.
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>
Zmienianie grubości
Grubość linii możesz kontrolować za pomocą opcji 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>
Aby ustawić szerokość linii w serii, użyj opcji 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>
Linie przerywane
Opcja lineDashStyle, która wymaga tablicy
liczb, pozwala tworzyć różne style linii przerywanych. Pierwsza liczba wskazuje długość łącznika, a druga wskazuje odstęp po niej. Jeśli występuje trzecia liczba, odpowiada ona długości następnego łącznika, a czwarta liczba (jeśli występuje) to długość następnej przerwy.
Podczas rysowania wykresu te długości powtarzają się, więc [4,
4] oznacza serię 4-długowych kresek i 4 pustek. [5, 1, 3] oznacza kreskę 5 długości, lukę 1 długości, 3-długą kreskę, lukę 5 długości itd. Oto kilka przykładów:
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>