Omówienie
Niektóre wykresy Google, takie jak wykresy warstwowe, liniowe i mieszane, zawierają linie łączące punkty danych. Za pomocą metod opisanych na tej stronie możesz dostosować kolor, grubość i stylowanie linii.
Zmiana koloru
Kolor linii łączących punkty danych na wykresach Google można zmienić na 2 sposoby: za pomocą opcji colors
, aby zmienić paletę wykresu, lub za pomocą opcji series
, aby określić kolor poszczególnych serii.
Na wykresie poniżej bezpośrednio wybrano 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ślane wartością szesnastkową (np. '#e2431e'
lub '#f00'
w przypadku nasyconego czerwonego koloru), ale możesz też określić go za pomocą angielskiej nazwy. Poniższy przykład pokazuje, jak sterować kolorami, poprawiając paletę wykresu za pomocą opcji colors
, a nie ustawiając kolory poszczególnych serii. Jedną z różnic jest to, że jeśli paleta ma więcej palet kolorów niż kolorów palety, kolory zostaną ponownie użyte. Jeśli paleta składa się z czerwonej i niebieskiej koloru, połowa serii będzie czerwona, a druga połowa – niebieski.
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 kontrolować szerokość linii 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
Wiele stylów linii przerywanych można utworzyć za pomocą opcji lineDashStyle
, która przyjmuje tablicę liczb. Pierwsza liczba oznacza długość łącznika, a druga pokazuje lukę po niej. Trzecia cyfra oznacza długość następnej kreski, a czwarta liczba (jeśli istnieje) jest długość następnej przerwy.
Podczas rysowania wykresu długości te się powtarzają, więc [4,
4]
oznacza kolejne 4- i 4-krotne odstępy. [5, 1, 3]
oznacza 5 myślników, 1 przerwę, 3 długości, 5 znaków 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>