Omówienie
Wymiary w danych są często wyświetlane na osiach, w orientacji poziomej i pionowej. Dotyczy to: Wykresu warstwowego, Wykresu słupkowego, Wykresu świecowego, Wykresu kolumnowego, wykresu mieszanego, wykresu liniowego, wykresu warstwowego krokowego i wykresu punktowego.
Tworząc wykres z osiami, możesz dostosować niektóre z ich właściwości:
- Oddzielne a ciągłe
- Kierunek – można dostosować kierunek za pomocą opcji hAxis/vAxis.direction.
- Pozycjonowanie i styl etykiet – możesz dostosować położenie i styl etykiet za pomocą opcji hAxis/vAxis.textPosition i hAxis/vAxis.textStyle.
- Tekst tytułu osi i styl – możesz dostosować tekst tytułu i styl osi za pomocą opcji hAxis/vAxis.title i hAxis/vAxis.titleTextStyle.
- Skala osi – można ustawić skalę osi na podstawie skali logarytmicznej (logarytmicznej), korzystając z opcji hAxis/vAxis.logScale lub hAxis/vAxis.scaleType.
- Pełną listę opcji konfiguracji osi znajdziesz w opisie opcji hAxis i vAxis w dokumentacji konkretnego wykresu.
Terminologia
Oś główna/podrzędna:
- Oś duża jest osią wzdłuż naturalnej orientacji wykresu. W przypadku wykresów liniowych, warstwowych, kolumnowych, mieszanych, warstwowych i świecowych jest to oś pozioma. W przypadku wykresu słupkowego jest to wykres pionowy. Wykresy punktowe i kołowe nie mają głównej osi.
- Oś mniejsza to druga oś.
Oś dyskretna/ciągła:
- Oś oddzielna ma ograniczoną liczbę wartości rozmieszczonych w równych odstępach, nazywanych kategoriami.
- Oś ciągła ma nieskończoną liczbę możliwych wartości.
Oddzielny a ciągły
Główna oś wykresu może być dyskretna lub ciągła. Gdy korzystasz z osi dyskretnej, punkty danych każdej serii są na niej równomiernie rozmieszczone zgodnie z indeksem wiersza. Gdy używasz osi ciągłej, punkty danych są pozycjonowane zgodnie z wartością domeny.
Również ich etykieta jest inna. Na osi dyskretnej nazwy kategorii (określone w kolumnie domeny danych) są używane jako etykiety. W przypadku osi ciągłej etykiety są generowane automatycznie: na wykresie wyświetlane są równomiernie rozmieszczone linie siatki, z których każda jest oznaczona etykietą odpowiadającą wartości, którą reprezentuje.
Te osie są zawsze ciągłe:
- Obie osie wykresów bąbelkowych.
- Oś pomocnicza.
Na wykresach liniowych, warstwowych, słupkowych, kolumnowych i świecowych (oraz na wykresach mieszanych zawierających tylko takie serie) możesz kontrolować typ osi głównej:
- W przypadku osi niezależnej typ kolumny danych ustaw na
string. - W przypadku osi ciągłej ustaw typ kolumny danych na
number,date,datetimelubtimeofday.
| Dyskretny / ciągły | Typ pierwszej kolumny | Przykład |
|---|---|---|
| Różne | string, |
|
| Ciągły | Liczba |
|
| Ciągły | date |
|
Skala osi
Skalę osi możesz ustawić za pomocą opcji scaleType.
Aby na przykład ustawić skalę osi pionowej na skalę logarytmiczną, użyj tej opcji:
vAxis: {
scaleType: 'log'
}
Poniższy wykres liniowy pokazuje wzrost populacji świata w skali liniowej (standardowej) i logarytmicznej.
Jeśli dane zawierają wartości zerowe lub ujemne, punkty możesz ułożyć na wykresie przy użyciu opcji scaleType: 'mirrorLog'. W skali lustrzanej logarytmicznym naniesiona wartość liczby ujemnej jest pomniejszona o log wartości bezwzględnej liczby. Wartości bliskie 0 są naniesione
na skali liniowej.
Poniższy przykład pokazuje dodatnie i ujemne wartości Fibonacciego naniesione zarówno w skali lustrzanej logarytmicznej, jak i liniowej.
Formaty liczb
Formatowanie numerów etykiet możesz kontrolować za pomocą właściwości hAxis.format i vAxis.format. Na przykład {hAxis: { format:'#,###%'} } wyświetla wartości „1000%”, „750%” i „50%” dla wartości 10, 7,5 i 0,5. Możesz też podać dowolne
z tych gotowych ustawień:
{format: 'none'}: wyświetla liczby bez formatowania (np. 8000000){format: 'decimal'}: wyświetla liczby z separatorami tysięcy (np. 8 000 000){format: 'scientific'}: wyświetla liczby w zapisie naukowym (np. 8E6).{format: 'currency'}: wyświetla liczby w walucie lokalnej (np. 8 000 000,00){format: 'percent'}: wyświetla liczby jako wartości procentowe (np. 800 000 000%){format: 'short'}: wyświetla skrócone liczby (np. 8 mln){format: 'long'}: wyświetla liczby w postaci pełnych wyrazów (np. 8 mln)
Na wykresie poniżej możesz wybrać spośród gotowych ustawień:
Poniżej znajdziesz kompletną stronę internetową dla powyższego wykresu.
<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(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
title: 'GDP of selected countries, in US $millions',
width: 500,
height: 300,
legend: 'none',
bar: {groupWidth: '95%'},
vAxis: { gridlines: { count: 4 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
document.getElementById('format-select').onchange = function() {
options['vAxis']['format'] = this.value;
chart.draw(data, options);
};
};
</script>
</head>
<body>
<select id="format-select">
<option value="">none</option>
<option value="decimal" selected>decimal</option>
<option value="scientific">scientific</option>
<option value="percent">percent</option>
<option value="currency">currency</option>
<option value="short">short</option>
<option value="long">long</option>
</select>
<div id="number_format_chart">
</body>
</html>
Jeśli używasz formatu, który wykorzystuje tekst (np. formatu long, który spowoduje wyrenderowanie 8 000 000 jako „8 mln”), możesz przetłumaczyć ciągi tekstowe na inne języki, określając kod języka podczas wczytywania biblioteki Wykresów Google. Aby na przykład zmienić „8 mln” na rosyjskie „8 миллиона”, nazwij bibliotekę w następujący sposób:
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
google.charts.setOnLoadCallback(drawMarkersMap);
</script>