Wykresy Google - krótki przewodnik
Google Chartsto biblioteka wykresów oparta na języku JavaScript, która ma na celu ulepszenie aplikacji internetowych poprzez dodanie interaktywnych funkcji tworzenia wykresów. Obsługuje szeroką gamę wykresów. Wykresy są rysowane za pomocą SVG w standardowych przeglądarkach, takich jak Chrome, Firefox, Safari, Internet Explorer (IE). W starszej wersji IE 6 do rysowania grafiki używany jest język VML.
funkcje
Poniżej przedstawiono najważniejsze funkcje biblioteki Google Charts.
Compatability - Działa pozornie na wszystkich głównych przeglądarkach i platformach mobilnych, takich jak Android i iOS.
Multitouch Support- Obsługuje multitouch na platformach opartych na ekranie dotykowym, takich jak Android i iOS. Idealny dla iPhone / iPad i smartfonów / tabletów z systemem Android.
Free to Use - Open source i można go używać do celów niekomercyjnych.
Lightweight - Podstawowa biblioteka loader.js jest niezwykle lekką biblioteką.
Simple Configurations - Używa json do definiowania różnych konfiguracji wykresów i jest bardzo łatwy do nauczenia i użycia.
Dynamic - Pozwala modyfikować wykres nawet po wygenerowaniu wykresu.
Multiple axes- Nie ogranicza się do osi x, y. Obsługuje wiele osi na wykresach.
Configurable tooltips- Etykietka pojawia się, gdy użytkownik najedzie kursorem na dowolny punkt na wykresie. googlecharts zapewnia wbudowany formater podpowiedzi lub formater wywołania zwrotnego do programowego kontrolowania podpowiedzi.
DateTime support- Obsługuj specjalnie datę i godzinę. Zapewnia wiele wbudowanych kontroli nad kategoriami mądrymi datami.
Print - Wydrukuj wykres za pomocą strony internetowej.
External data- Obsługuje dynamiczne ładowanie danych z serwera. Zapewnia kontrolę nad danymi za pomocą funkcji zwrotnych.
Text Rotation - Obsługuje obrót etykiet w dowolnym kierunku.
Obsługiwane typy wykresów
Biblioteka Google Charts zawiera następujące typy wykresów -
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Line Charts Służy do rysowania wykresów opartych na liniach / splajnach. |
| 2 | Area Charts Służy do rysowania map obszarowych. |
| 3 | Pie Charts Służy do rysowania wykresów kołowych. |
| 4 | Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Służy do rysowania rozproszonych wykresów. |
| 5 | Bubble Charts Służy do rysowania wykresów bąbelkowych. |
| 6 | Dynamic Charts Służy do rysowania dynamicznych wykresów, w których użytkownik może modyfikować wykresy. |
| 7 | Combinations Służy do rysowania kombinacji różnych wykresów. |
| 8 | 3D Charts Służy do rysowania wykresów 3D. |
| 9 | Angular Gauges Służy do rysowania wykresów typu prędkościomierza. |
| 10 | Heat Maps Służy do rysowania map ciepła. |
| 11 | Tree Maps Służy do rysowania map drzew. |
W następnych rozdziałach szczegółowo omówimy każdy rodzaj z wyżej wymienionych wykresów wraz z przykładami.
Licencja
Wykresy Google są open source i można z nich korzystać bezpłatnie. Kliknij łącze: Warunki korzystania z usługi .
W tym rozdziale omówimy, jak skonfigurować bibliotekę Google Charts do wykorzystania w tworzeniu aplikacji internetowych.
Zainstaluj Google Charts
Istnieją dwa sposoby korzystania z Google Charts.
Download - Pobierz go lokalnie z https://developers.google.com/chart i użyj go.
CDN access- Masz również dostęp do CDN. CDN zapewni dostęp na całym świecie do regionalnych centrów danych, które w tym przypadku są hostem Google Charthttps://www.gstatic.com/charts.
Korzystanie z pobranego wykresu Google
Dołącz plik JavaScript googlecharts do strony HTML za pomocą następującego skryptu -
<head>
<script src = "/googlecharts/loader.js"></script>
</head>Korzystanie z CDN
W tym samouczku używamy wersji CDN biblioteki Google Chart.
Dołącz plik JavaScript Google Chart do strony HTML, używając następującego skryptu -
<head>
<script src = "https://www.gstatic.com/charts/loader.js"></script>
</head>W tym rozdziale pokażemy konfigurację wymaganą do narysowania wykresu za pomocą Google Chart API.
Krok 1: Utwórz stronę HTML
Utwórz stronę HTML z bibliotekami Google Chart.
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
</body>
</html>Tutaj containerdiv służy do przechowywania wykresu narysowanego za pomocą biblioteki Google Chart. Tutaj ładujemy najnowszą wersję API corecharts przy użyciu metody google.charts.load.
Krok 2: Utwórz konfiguracje
Biblioteka wykresów Google używa bardzo prostych konfiguracji przy użyciu składni json.
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Tutaj dane reprezentują dane json, a opcje reprezentują konfigurację używaną przez bibliotekę Google Chart do rysowania wykresu za pomocą elementu div kontenera przy użyciu metody draw (). Teraz skonfigurujemy różne parametry, aby utworzyć wymagany ciąg json.
tytuł
Skonfiguruj opcje wykresu.
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014',
'width':550,
'height':400};Tabela danych
Skonfiguruj dane, które mają być wyświetlane na wykresie. DataTable to specjalny zbiór strukturalny tabel zawierający dane z wykresu. Kolumny tabeli danych reprezentują legendy, a wiersze reprezentują odpowiednie dane. addColumn () służy do dodawania kolumny, w której pierwszy parametr reprezentuje typ danych, a drugi parametr reprezentuje legendę. addRows () służy do odpowiedniego dodawania wierszy.
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);Krok 3: Narysuj wykres
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById('container'));
chart.draw(data, options);Przykład
Oto pełny przykład -
googlecharts_configuration.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Browser');
data.addColumn('number', 'Percentage');
data.addRows([
['Firefox', 45.0],
['IE', 26.8],
['Chrome', 12.8],
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]);
// Set chart options
var options = {'title':'Browser market shares at a specific website, 2014', 'width':550, 'height':400};
// Instantiate and draw the chart.
var chart = new google.visualization.PieChart(document.getElementById ('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Poniższy kod wywołuje funkcję drawChart, aby rysować wykres po całkowitym załadowaniu biblioteki Google Chart.
google.charts.setOnLoadCallback(drawChart);Wynik
Sprawdź wynik.
Wykresy warstwowe służą do rysowania wykresów warstwowych. W tej sekcji omówimy następujące rodzaje wykresów obszarowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Obszar podstawowy Podstawowy wykres warstwowy |
| 2 | Obszar o wartościach ujemnych Wykres warstwowy o wartościach ujemnych. |
| 3 | Obszar skumulowany Wykres z obszarami ułożonymi jeden na drugim. |
| 4 | Obszar procentowy Wykres z danymi w ujęciu procentowym. |
| 5 | Obszar z brakującymi punktami Wykres z brakującymi punktami w danych. |
| 6 | Odwrócone osie Obszar z odwróconymi osiami. |
Wykresy słupkowe służą do rysowania wykresów słupkowych. W tej sekcji omówimy następujące rodzaje wykresów słupkowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Pasek podstawowy Podstawowy wykres słupkowy |
| 2 | Zgrupowany wykres słupkowy Zgrupowany wykres słupkowy. |
| 3 | Stacked Bar Wykres słupkowy ze słupkami ułożonymi jeden na drugim. |
| 4 | Ujemny słupek skumulowany Wykres słupkowy ze stosem ujemnym. |
| 5 | Słupek skumulowany w procentach Wykres słupkowy z danymi w procentach. |
| 6 | Wykres słupkowy materiałów Wykres słupkowy inspirowany Material Design. |
| 7 | Wykres słupkowy z etykietami danych Wykres słupkowy z etykietami danych. |
Wykresy bąbelkowe służą do rysowania wykresów bąbelkowych. W tej sekcji omówimy następujące rodzaje wykresów bąbelkowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Basic Bubble Podstawowy wykres bąbelkowy. |
| 2 | Wykres bąbelkowy z etykietami danych Wykres bąbelkowy z etykietami danych. |
Wykresy kalendarza służą do rysowania działań na przestrzeni długich okresów, takich jak miesiące lub lata. W tej sekcji omówimy następujące rodzaje wykresów opartych na kalendarzu.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Kalendarz podstawowy Podstawowy wykres kalendarza. |
| 2 | Kalendarz z niestandardowymi kolorami Dostosowany wykres kalendarza. |
Wykresy świecowe służą do przedstawiania wartości otwarcia i zamknięcia w odniesieniu do wariancji wartości i są zwykle używane do przedstawiania zapasów. W tej sekcji omówimy następujące rodzaje wykresów świecowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowy świecznik Podstawowy wykres świecowy. |
| 2 | Świecznik z niestandardowymi kolorami Spersonalizowany wykres świecowy. |
Wykresy kolumnowe służą do rysowania wykresów kolumnowych. W tej sekcji omówimy następujące typy wykresów kolumnowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Kolumna podstawowa Podstawowy wykres kolumnowy. |
| 2 | Kolumna zgrupowana Wykres kolumnowy zgrupowany. |
| 3 | Kolumna piętrowa Wykres kolumnowy z kolumnami ułożonymi jedna na drugiej. |
| 4 | Ujemna kolumna skumulowana Wykres kolumnowy ze stosem ujemnym. |
| 5 | Procentowa kolumna skumulowana Wykres kolumnowy z danymi w procentach. |
| 6 | Wykres kolumnowy materiałów Wykres kolumnowy inspirowany Material Design. |
| 7 | Wykres kolumnowy z etykietami danych Wykres kolumnowy z etykietami danych. |
Wykres złożony pomaga w renderowaniu każdej serii jako innego typu znacznika z następującej listy: linia, obszar, słupki, świece i obszar schodkowy. Aby przypisać domyślny typ znacznika do serii, użyj właściwości seriesType. Właściwość serii służy do indywidualnego określania właściwości każdej serii. Konfigurację używaną do rysowania tego wykresu widzieliśmy już w rozdziale Składnia konfiguracji wykresów Google . Zobaczmy więc pełny przykład.
Konfiguracje
Użyliśmy ComboChart klasa, aby wyświetlić wykres oparty na kombinacji.
//combination chart
var chart = new google.visualization.ComboChart(document.getElementById('container'));Przykład
googlecharts_combination_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Fruit', 'Jane', 'John', 'Average'],
['Apples', 3, 2, 2.5],
['Oranges', 2, 3, 2.5],
['Pears', 1, 5, 3],
['Bananas', 3, 9, 6],
['Plums', 4, 2, 3]
]);
// Set chart options
var options = {
title : 'Fruits distribution',
vAxis: {title: 'Fruits'},
hAxis: {title: 'Person'},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Wynik
Sprawdź wynik.
Histogram to wykres, który grupuje dane liczbowe w segmenty i wyświetla je jako segmentowane kolumny. Służą do przedstawiania dystrybucji zbioru danych jako częstotliwości wpadania wartości do zakresów. Wykresy Google automatycznie wybierają liczbę segmentów za Ciebie. Wszystkie segmenty mają równą szerokość i wysokość proporcjonalną do liczby punktów danych w zasobniku. Histogramy są podobne do wykresów kolumnowych w innych aspektach. W tej sekcji omówimy następujące rodzaje wykresów opartych na histogramie.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowy histogram Podstawowy wykres histogramu. |
| 2 | Kontrolowanie koloru Dostosowany kolor wykresu histogramu. |
| 3 | Kontrolowanie łyżek Dostosowane wiadra wykresu histogramu. |
| 4 | Wiele serii Wykres histogramu mający wiele serii. |
Wykresy liniowe służą do rysowania wykresów liniowych. W tej sekcji omówimy następujące rodzaje wykresów liniowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Linia podstawowa Podstawowy wykres liniowy. |
| 2 | Z widocznymi punktami Wykres z widocznymi punktami danych. |
| 3 | Konfigurowalny kolor tła Wykres z niestandardowym kolorem tła. |
| 4 | Konfigurowalny kolor linii Wykres z niestandardowym kolorem linii. |
| 5 | Konfigurowalne etykiety osi i znaczników Wykres z niestandardowymi etykietami osi i tików. |
| 6 | Celowniki Wykresy liniowe przedstawiające krzyżyki w punkcie danych w momencie wyboru. |
| 7 | Konfigurowalny styl linii Wykres z niestandardowym kolorem linii. |
| 8 | Wykresy liniowe z zakrzywionymi liniami Wykres z gładkimi liniami krzywymi. |
| 9 | Wykres liniowy materiałów Wykres liniowy inspirowany Material Design. |
| 10 | Wykres liniowy X u góry Wykres liniowy inspirowany Material Design z osią X na górze wykresu. |
Wykres mapy Google wykorzystuje interfejs API Map Google do wyświetlania mapy. Wartości danych są wyświetlane jako znaczniki na mapie. Wartości danych mogą być współrzędnymi (długie pary) lub rzeczywistymi adresami. Mapa zostanie odpowiednio przeskalowana, aby zawierała wszystkie zidentyfikowane punkty.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Mapa podstawowa Podstawowa mapa Google. |
| 2 | Mapa przy użyciu szerokości / długości geograficznej Mapa z lokalizacjami określonymi za pomocą szerokości i długości geograficznej. |
| 3 | Dostosowywanie znaczników Niestandardowe znaczniki na mapie. |
Schemat organizacyjny pomaga w renderowaniu hierarchii węzłów, używanej do przedstawiania relacji przełożony / podwładny w organizacji. Na przykład drzewo genealogiczne jest rodzajem schematu organizacyjnego. Konfigurację używaną do rysowania tego schematu widzieliśmy już w rozdziale Składnia konfiguracji wykresów Google . Zobaczmy więc pełny przykład.
Konfiguracje
Użyliśmy OrgChart klasa, aby pokazać schemat organizacyjny.
//organization chart
var chart = new google.visualization.OrgChart(document.getElementById('container'));Przykład
googlecharts_organization_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['orgchart']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
// For each orgchart box, provide the name, manager, and tooltip to show.
data.addRows([
[{v:'Robert', f:'Robert<div style="color:red; font-style:italic">President</div>'},'', 'President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},'Robert', 'Vice President'],
['Alice', 'Robert', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
]);
// Set chart options
var options = {allowHtml:true};
// Instantiate and draw the chart.
var chart = new google.visualization.OrgChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Wynik
Sprawdź wynik.
Wykresy kołowe służą do rysowania wykresów kołowych. W tej sekcji omówimy następujące rodzaje wykresów kołowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowe ciasto Podstawowy wykres kołowy. |
| 2 | Wykres pierścieniowy Wykres pierścieniowy. |
| 3 | Wykres kołowy 3D Wykres kołowy 3D. |
| 4 | Wykres kołowy z rozstrzelonymi plasterkami Wykres kołowy z rozstrzelonymi plasterkami. |
Wykres Sankeya jest narzędziem wizualizacyjnym i służy do przedstawiania przepływu z jednego zestawu wartości do drugiego. Połączone obiekty nazywane są węzłami, a połączenia - łączami. Sankeys są używane do pokazywania mapowania wiele do wielu między dwiema domenami lub wieloma ścieżkami przez zestaw etapów.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowy wykres Sankeya Podstawowy wykres Sankeya. |
| 2 | Wielopoziomowy wykres Sankeya Wielopoziomowy wykres Sankeya. |
| 3 | Dostosowywanie wykresu Sankey Spersonalizowany wykres Sankey. |
Wykresy Sankeya, wykresy punktowe, wykresy warstwowe ze stopniem, tabela, osie czasu, mapa drzewa, linie trendu służą do rysowania wykresów punktowych. W tej sekcji omówimy następujące rodzaje wykresów punktowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowe rozproszenie Podstawowy wykres punktowy. |
| 2 | Wykres rozrzutu materiałów Wykres rozrzutu materiałów. |
| 3 | Wykres rozrzutu dla podwójnej osi Y. Wykres rozrzutu materiałów z podwójną osią Y. |
| 4 | Wykres rozrzutu górnej osi X. Wykres rozrzutu materiałów z osią X na górze. |
Wykres warstwowy schodkowy to wykres warstwowy krokowy. Omówimy następujące typy schodkowych wykresów warstwowych.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowy wykres krokowy Podstawowy wykres warstwowy schodkowy. |
| 2 | Wykres skumulowany schodkowy Wykres warstwowy schodkowy skumulowany. |
| 3 | 100% skumulowany wykres krokowy 100% skumulowany wykres warstwowy schodkowy. |
Wykres tabelaryczny pomaga w renderowaniu tabeli, którą można sortować i stronicować. Komórki tabeli można formatować za pomocą ciągów formatujących lub bezpośrednio wstawiając kod HTML jako wartości komórek. Wartości liczbowe są domyślnie wyrównane do prawej; wartości logiczne są wyświetlane jako znaczniki wyboru lub krzyżyki. Użytkownicy mogą wybierać pojedyncze rzędy za pomocą klawiatury lub myszy. Do sortowania można użyć nagłówków kolumn. Wiersz nagłówka pozostaje niezmieniony podczas przewijania. Tabela uruchamia zdarzenia odpowiadające interakcjom użytkownika. Konfigurację używaną do rysowania tego wykresu widzieliśmy już w rozdziale Składnia konfiguracji wykresów Google . Zobaczmy więc pełny przykład.
Konfiguracje
Użyliśmy Table klasa, aby wyświetlić wykres oparty na tabeli.
//table chart
var chart = new google.visualization.Table(document.getElementById('container'));Przykład
googlecharts_table_chart.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['table']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var options = {
showRowNumber: true,
width: '100%',
height: '100%'
};
// Instantiate and draw the chart.
var chart = new google.visualization.Table(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Wynik
Sprawdź wynik.
Osie czasu pokazują, jak zestaw zasobów jest używany w czasie. Omówimy następujące rodzaje wykresów osi czasu.
| Sr.No. | Typ / opis wykresu |
|---|---|
| 1 | Podstawowy wykres osi czasu Podstawowy wykres osi czasu |
| 2 | Wykres osi czasu z etykietami danych Wykres osi czasu z etykietami danych |
| 3 | Wykres z osiami czasu bez etykiety wiersza Wykres z osiami czasu bez etykiety wiersza |
| 4 | Kolorowanie wykresu osi czasu Dostosowany wykres osi czasu |
TreeMap to wizualna reprezentacja drzewa danych, w którym każdy węzeł może mieć zero lub więcej elementów podrzędnych i jednego rodzica (z wyjątkiem katalogu głównego). Każdy węzeł jest wyświetlany jako prostokąt, można go zmieniać i kolorować zgodnie z przypisanymi przez nas wartościami. Rozmiary i kolory są wyceniane w stosunku do wszystkich innych węzłów na wykresie. Poniżej znajduje się przykład mapy drzewa. Konfigurację używaną do rysowania tego wykresu widzieliśmy już w rozdziale Składnia konfiguracji wykresów Google . Zobaczmy więc pełny przykład.
Konfiguracje
Użyliśmy TreeMap klasa, aby wyświetlić diagram mapy drzewa.
//TreeMap chart
var chart = new google.visualization.TreeMap(document.getElementById('container'));Przykład
googlecharts_treemap.htm
<html>
<head>
<title>Google Charts Tutorial</title>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript" src = "https://www.google.com/jsapi">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['treemap']});
</script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
</div>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
['Global', null, 0, 0],
['America', 'Global', 0, 0],
['Europe', 'Global', 0, 0],
['Asia', 'Global', 0, 0],
['Australia', 'Global', 0, 0],
['Africa', 'Global', 0, 0],
['USA', 'America', 52, 31],
['Mexico', 'America', 24, 12],
['Canada', 'America', 16, -23],
['France', 'Europe', 42, -11],
['Germany', 'Europe', 31, -2],
['Sweden', 'Europe', 22, -13],
['China', 'Asia', 36, 4],
['Japan', 'Asia', 20, -12],
['India', 'Asia', 40, 63],
['Egypt', 'Africa', 21, 0],
['Congo', 'Africa', 10, 12],
['Zaire', 'Africa', 8, 10]
]);
var options = {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
};
// Instantiate and draw the chart.
var chart = new google.visualization.TreeMap(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>Wynik
Sprawdź wynik.
Linia trendu to linia nałożona na wykres w celu ukazania ogólnego kierunku danych. Wykresy Google mogą automatycznie generować linie trendów dla wykresów Sankeya, wykresów punktowych, wykresów warstwowych krokowych, tabeli, osi czasu, mapy drzewa, linii trendu, wykresów słupkowych, wykresów kolumnowych i wykresów liniowych. Omówimy następujące typy wykresów linii trendu.
| Sr.No. | Typ i opis wykresu |
|---|---|
| 1 | Podstawowy wykres linii trendu Podstawowy wykres linii trendu. |
| 2 | Wykres wykładniczy linii trendu Wykres wykładniczy linii trendu. |
| 3 | Wykres wielomianowych linii trendu Wykres wielomianowych linii trendu. |