Omówienie
Wykres kołowy renderowany w przeglądarce za pomocą SVG lub VML. Po najechaniu kursorem na wycinki wyświetlają się podpowiedzi.
Przykład
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Tworzenie wykresu kołowego w 3D
Jeśli ustawisz opcję is3D
na true
, wykres kołowy zostanie narysowany tak, jakby miał trzy wymiary:
Domyślna wartość to is3D
: false
, więc wyraźnie ustawiamy ją na true
:
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', is3D: true, }; var chart = new google.visualization.PieChart(document.getElementById('piechart_3d')); chart.draw(data, options); } </script> </head> <body> <div id="piechart_3d" style="width: 900px; height: 500px;"></div> </body> </html>
Tworzenie wykresu pierścieniowego
Wykres pierścieniowy to wykres kołowy z otworem w środku. Wykresy pierścieni możesz utworzyć za pomocą opcji pieHole
:
Opcja pieHole
powinna być ustawiona na liczbę z zakresu od 0 do 1, która odpowiada współczynnikowi promienia między otworem a wykresem. W przypadku większości wykresów najbardziej odpowiednie są wartości od 0,4 do 0,6.
Wartości równe 1 lub większe, będą ignorowane, a wartość 0 spowoduje całkowitą zamknięcie dziury.
<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([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', pieHole: 0.4, }; var chart = new google.visualization.PieChart(document.getElementById('donutchart')); chart.draw(data, options); } </script> </head> <body> <div id="donutchart" style="width: 900px; height: 500px;"></div> </body> </html>
Nie możesz łączyć opcji pieHole
i is3D
. Jeśli to zrobisz, tag pieHole
będzie ignorowany.
Pamiętaj, że Arkusze Google starają się umieścić etykietę jak najbliżej środka wycinka. Jeśli masz wykres pierścieniowy z tylko jednym wycinkiem, środek wycinka może się dostać do otworu w pierścieniu. W takim przypadku zmień kolor etykiety:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
<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([ ['Effort', 'Amount given'], ['My all', 100], ]); var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' }; var chart = new google.visualization.PieChart(document.getElementById('donut_single')); chart.draw(data, options); } </script> </head> <body> <div id="donut_single" style="width: 900px; height: 500px;"></div> </body> </html>
Obracanie wykresu kołowego
Domyślnie wykres kołowy zaczyna się od lewej krawędzi pierwszego wycinka prosto w górę. Aby to zmienić, wybierz pieStartAngle
:
Obracamy wykres w prawo o 100 stopni i możesz wybrać opcję pieStartAngle: 100
. (Wybrany w ten sposób sposób, w jaki patrzysz na wycinek z włoskiej etykiety).
<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([ ['Language', 'Speakers (in millions)'], ['German', 5.85], ['French', 1.66], ['Italian', 0.316], ['Romansh', 0.0791] ]); var options = { legend: 'none', pieSliceText: 'label', title: 'Swiss Language Use (100 degree rotation)', pieStartAngle: 100, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Wydobycie wycinka
Wycinki koła możesz oddzielać od pozostałych wykresów za pomocą właściwości offset
opcji slices
:
Aby oddzielić wycinek, utwórz obiekt slices
i przypisz do niego odpowiedni numer wycinka z offset
między 0 a 1. Poniżej przypisujemy stopniowo większe odstępy do wycinków 4 (gudżarati), 12 (marathi), 14 (orija) i 15 (pendżabskich):
<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([ ['Language', 'Speakers (in millions)'], ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4], ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300], ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5], ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5], ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33], ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5], ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52] ]); var options = { title: 'Indian Language Use', legend: 'none', pieSliceText: 'label', slices: { 4: {offset: 0.2}, 12: {offset: 0.3}, 14: {offset: 0.4}, 15: {offset: 0.5}, }, }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } </script> </head> <body> <div id="piechart" style="width: 900px; height: 500px;"></div> </body> </html>
Usuwanie wycinków
Aby pominąć wycinek, zmień kolor na 'transparent'
:
Za pomocą pieStartAngle
można też obrócić wykres o 135 stopni, pieSliceText
usunąć tekst z wycinków, a tooltip.trigger
wyłączyć etykietki:
<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([ ['Pac Man', 'Percentage'], ['', 75], ['', 25] ]); var options = { legend: 'none', pieSliceText: 'none', pieStartAngle: 135, tooltip: { trigger: 'none' }, slices: { 0: { color: 'yellow' }, 1: { color: 'transparent' } } }; var chart = new google.visualization.PieChart(document.getElementById('pacman')); chart.draw(data, options); } </script> </head> <body> <div id="pacman" style="width: 900px; height: 500px;"></div> </body> </html>
Próg widoczności wycinka
Możesz ustawić wartość jako próg dla wycinku koła. Ta wartość odpowiada części wykresu (przy czym cały wykres ma wartość 1). Aby ustawić ten próg jako procent całości, podziel wartość procentową przez 100 (w przypadku progu 20% wartość będzie wynosić 0, 2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Wszystkie wycinki poniżej tego progu zostaną połączone w jeden „Wycinek” i będą mieć wspólną wartość wszystkich wycinków poniżej progu.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Pizza'); data.addColumn('number', 'Populartiy'); data.addRows([ ['Pepperoni', 33], ['Hawaiian', 26], ['Mushroom', 22], ['Sausage', 10], // Below limit. ['Anchovies', 9] // Below limit. ]); var options = { title: 'Popularity of Types of Pizza', sliceVisibilityThreshold: .2 }; var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); }
Wczytuję
Nazwa pakietu google.charts.load
to "corechart"
.
google.charts.load("current", {packages: ["corechart"]});
Nazwa klasy wizualizacji to google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
Format danych
Wiersze: każdy wiersz w tabeli reprezentuje wycinek.
Kolumny:
Kolumna 0 | Kolumna 1 | … | Kolumna N (opcjonalnie) | |
---|---|---|---|---|
Cel: | Etykiety wycinka | Wartości wycinka | … | Role opcjonalne |
Typ danych: | tekst | liczba | … | |
Rola: | domena | dane | … | |
Opcjonalne role kolumn: | Brak | Brak | … |
Opcje konfiguracji
Nazwa | |
---|---|
backgroundColor, |
Kolor tła głównego obszaru wykresu. Może to być prosty ciąg kolorów HTML, taki jak Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
backgroundColor.type |
Kolor obramowania wykresu w postaci ciągu kolorów HTML. Typ: ciąg znaków
Domyślne: „#666”
|
backgroundColor.rayWidth |
Szerokość obramowania w pikselach. Typ: liczba
Wartość domyślna: 0
|
backgroundColor.fill |
Kolor wypełnienia wykresu w postaci koloru HTML. Typ: ciąg znaków
Domyślny: „biały”.
|
obszarGraficzny |
Obiekt z użytkownikami do konfigurowania położenia i rozmiaru obszaru wykresu (tam, gdzie rysowany jest sam wykres, z wyłączeniem osi i legend). Obsługiwane są 2 formaty: liczba lub liczba, po której następuje %. Prosta liczba to wartość w pikselach. Liczba, po której następuje %, to wartość procentowa. Przykład: Typ: obiekt
Domyślne:null
|
chartArea.backgroundColor. |
Kolor tła wykresu. Ciąg może być ciągiem szesnastkowym (np. „#fdc”) lub angielskiej nazwy koloru. Podczas korzystania z tych obiektów możesz podać te właściwości:
Typ: ciąg znaków lub obiekt
Domyślny: „biały”.
|
wykresArea.left |
Odległość, jaka ma być używana do rysowania wykresu od lewej krawędzi. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
wykresArea.top |
Odległość, w jakiej znajduje się wykres od górnej krawędzi. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
chartArea.width |
Szerokość obszaru wykresu. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
wykresArea.height |
Wysokość obszaru wykresu. Typ: liczba lub ciąg
Ustawienie domyślne: automatyczne
|
kolory |
Kolory elementów wykresu. Tablica ciągów znaków, w których każdy jest ciągiem koloru HTML, np. Typ: Tablica ciągów znaków
Domyślny: kolory domyślne.
|
włącz interfejs interaktywny |
Określa, czy wykres generuje zdarzenia oparte na użytkownikach lub reaguje na ich interakcje. Jeśli ma wartość false (fałsz), wykres nie zwróci zdarzenia wyboru ani innych zdarzeń związanych z interakcją (ale będzie zwracać zdarzenia lub błędy) ani nie będzie zawierać tekstu wyświetlanego po najechaniu kursorem ani innego działania w zależności od danych wejściowych użytkownika. Typ: wartość logiczna
Wartość domyślna: true
|
rozmiar czcionki |
Domyślny rozmiar czcionki całego tekstu na wykresie (w pikselach). Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: liczba
Domyślna:automatycznie.
|
Czcionka |
Domyślny krój czcionki całego tekstu na wykresie. Możesz zastąpić tę opcję, używając właściwości określonych elementów wykresu. Typ: ciąg znaków
Domyślny: „solarmora”
|
forceIFrame |
Rysuje wykres wewnątrz wbudowanej ramki. (Pamiętaj, że ta opcja jest ignorowana w IE8 – wszystkie wykresy IE8 są ujęte w ramki iFrame). Typ: wartość logiczna
Wartość domyślna: false
|
wysokość |
Wysokość wykresu w pikselach. Typ: liczba
Domyślna:wysokość elementu, który go zawiera.
|
is3D |
Jeśli ma wartość true (prawda), wyświetla trójwymiarowy wykres. Typ: wartość logiczna
Wartość domyślna: false
|
legenda |
Obiekt z użytkownikami do konfigurowania różnych aspektów legendy. Aby określić właściwości tego obiektu, możesz użyć zapisu dosłownego obiektu, jak pokazano tutaj: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt
Domyślne: null
|
legend.alignment, |
Wyrównanie legendy. Użyj jednego z tych rodzajów wartości:
Początek, środek i koniec są zależne od stylu legendy (pionowa lub pozioma). Na przykład w legendzie „prawa” odpowiednio „start” i „koniec” znajdują się odpowiednio u góry i u dołu. W przypadku legendy „górny”, „start” i „koniec” znajdziesz odpowiednio po lewej i prawej stronie obszaru. Wartość domyślna zależy od pozycji legendy. W przypadku legend „bottom” domyślną wartością jest „center”, a w innych legendach – „start”. Typ: ciąg znaków
Domyślna: automatycznie.
|
legend.position, |
Pozycja legendy. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Domyślny: „right”
|
legend.maxLines |
Maksymalna liczba wierszy w legendzie. Ustaw większą liczbę niż 1, aby dodać wiersze do legendy. Uwaga: dokładna logika używana do określenia rzeczywistej liczby renderowanych linii jest nadal zmienna. Ta opcja obecnie działa tylko wtedy, gdy pole legend.position ma wartość „top”. Typ: liczba
Wartość domyślna: 1
|
legend.textStyle, |
Obiekt określający styl tekstu legendy. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
PieHole |
Jeśli mieści się w zakresie od 0 do 1, wyświetla wykres pierścieniowy. Otwór w promieniu ma wartość Typ: liczba
Wartość domyślna: 0
|
KolorCiastoelementuBlice |
Kolor obramowania wycinka. Ma zastosowanie tylko wtedy, gdy wykres jest dwuwymiarowy. Typ: ciąg znaków
Domyślny: „biały”.
|
Tekst wycinka koła |
Treść tekstu wyświetlanego na wycinku. Użyj jednego z tych rodzajów wartości:
Typ: ciąg znaków
Wartość domyślna: „percentage”
|
Styl tekstu ciasta |
Obiekt określający styl tekstu wycinka. Obiekt ma taki format: {color: <string>, fontName: <string>, fontSize: <number>}
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Kąt wycinka koła |
Kąt w stopniach, w którym wykres ma zostać obrócony. Domyślna wartość Typ: liczba
Domyślne:
0 |
odwrócone kategorie |
Jeśli ma wartość Prawda, wycinki rysują w lewo. Wartość domyślna to rysowanie w prawo. Typ: wartość logiczna
Wartość domyślna: false
|
Kolor wycinka koła |
Kolor wycinka z kombinacjami, który zawiera wszystkie wycinki poniżej sliceVisibleThreshold. Typ: ciąg znaków
Domyślny: „#ccc”
|
Etykieta wycinka koła |
Etykieta wycinka kombinacji, który zawiera wszystkie wycinki poniżej sliceVisibleThreshold. Typ: ciąg znaków
Domyślny: „Inny”
|
wycinki |
Tablica obiektów, z których każdy opisuje odpowiedni format wycinka koła. Aby użyć wartości domyślnych dla wycinka, podaj pusty obiekt (np.
Możesz podać tablicę obiektów, z których każdy dotyczy wycinka w podanej kolejności, lub obiekt, w którym każdy element podrzędny ma klucz liczbowy wskazujący wycinek, którego dotyczy. Na przykład te 2 deklaracje są identyczne i zadeklarują pierwszy wycinek jako czarny, a czwarty jako czerwony: slices: [{color: 'black'}, {}, {}, {color: 'red'}] slices: {0: {color: 'black'}, 3: {color: 'red'}} Typ: tablica obiektów lub obiektów z zagnieżdżonymi obiektami
Domyślnie: {}
|
Próg widoczności wycinka |
Wartość ułamkowa koła, poniżej której wycinek nie będzie wyświetlany osobno. Wszystkie wycinki, które nie osiągnęły tego progu, zostaną połączone w jeden „wycinek”, którego rozmiar jest sumą wszystkich rozmiarów. Domyślnie nie pokazujemy osobno żadnego wycinka o długości mniejszej niż pół stopnia. // Slices less than 25% of the pie will be // combined into an "Other" slice. sliceVisibilityThreshold: .25 Typ: liczba
Wartość domyślna: połowa stopnia (0,5/360, 1/720 lub 0,0014)
|
tytuł |
Tekst do wyświetlenia nad wykresem. Typ: ciąg znaków
Domyślnie:bez tytułu.
|
stylTextTextStyle |
Obiekt określający styl tekstu tytułu. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
etykietka |
Obiekt z członkami, który służy do konfigurowania różnych elementów etykietek. Aby określić właściwości tego obiektu, możesz użyć notacji literału obiektu w sposób przedstawiony poniżej: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: obiekt
Domyślne: null
|
tooltip.ignoreBounds |
Jeśli ustawiona jest wartość Uwaga: dotyczy to tylko etykietek HTML. Jeśli ta opcja jest włączona w przypadku etykietek SVG, wszystkie nadmiary wykraczające poza granice wykresu zostaną przycięte. Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki. Typ: wartość logiczna
Wartość domyślna: false
|
tooltip.isHtml |
Jeśli ma wartość Prawda, używaj etykiet z renderowaniem HTML (a nie z elementami renderowanymi w formacie SVG). Więcej informacji znajdziesz w artykule Dostosowywanie zawartości etykietki. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości etykietki HTML za pomocą roli danych kolumny etykietki. Typ: wartość logiczna
Wartość domyślna: false
|
tooltip.showColorCode |
Jeśli ma wartość true (prawda), pokazuj kolorowe kwadraty obok informacji o wycinku w etykietce. Typ: wartość logiczna
Wartość domyślna: false
|
tooltip.text |
Informacje wyświetlane po najechaniu kursorem myszy na wycinek koła. Obsługiwane są te wartości:
Typ: ciąg znaków
Wartość domyślna: „both”
|
tooltip.textStyle |
Obiekt określający styl tekstu etykietki. Obiekt ma taki format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Typ: obiekt
Domyślnie:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
Interakcja użytkownika, która powoduje wyświetlenie etykietki:
Typ: ciąg znaków
Domyślny: „focus”
|
szerokość |
Szerokość wykresu w pikselach. Typ: liczba
Domyślna – szerokość elementu, który zawiera.
|
Metody
Metoda | |
---|---|
draw(data, options) |
Rysuje wykres. Wykres akceptuje dalsze wywołania metody dopiero po wywołaniu zdarzenia Typ zwrotu: brak
|
getAction(actionID) |
Zwraca obiekt działania etykietki z wymaganym parametrem Typ zwrotu: obiekt
|
getBoundingBox(id) |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość elementu wykresu
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getChartAreaBoundingBox() |
Zwraca obiekt zawierający lewą, górną, szerokość i wysokość zawartości wykresu (tzn. z wyłączeniem etykiet i legend):
Wartości odnoszą się do kontenera wykresu. Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getChartLayoutInterface() |
Zwraca obiekt zawierający informacje o umieszczonym na ekranie miejscu na wykresie i jego elementach. W zwróconym obiekcie można wywołać te metody:
Wywołuj je po narysowaniu wykresu. Typ zwrotu: obiekt
|
getHAxisValue(xPosition, optional_axis_index) |
Zwraca poziomą wartość danych w miejscu Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getImageURI() |
Zwraca wykres zserializowany jako identyfikator URI obrazu. Wywołuj je po narysowaniu wykresu. Patrz Drukowanie wykresów PNG. Typ zwrotu: ciąg znaków
|
getSelection() |
Zwraca tablicę wybranych elementów wykresu.
Elementy, które można wybrać, to wycinki i wpisy legend.
Na tym wykresie w danym momencie możesz wybrać tylko 1 element.
Typ zwrotu: tablica elementów wyboru.
|
getVAxisValue(yPosition, optional_axis_index) |
Zwraca pionową wartość danych w miejscu Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getXLocation(dataValue, optional_axis_index) |
Zwraca współrzędną x piksela Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
getYLocation(dataValue, optional_axis_index) |
Zwraca współrzędną Y piksela Przykład: Wywołuj je po narysowaniu wykresu. Typ zwrotu: numer
|
removeAction(actionID) |
Usuwa z wykresu etykietkę z żądaniem Typ zwrotu:
none |
setAction(action) |
Ustawia działanie etykietki do wykonania, gdy użytkownik kliknie tekst działania.
Metoda
Przed wywołaniem metody Typ zwrotu:
none |
setSelection() |
Zaznacza określone elementy wykresu. Anuluje poprzedni wybór.
Elementy, które można wybrać, to wycinki i wpisy legend.
Na tym wykresie możesz wybrać tylko jeden element naraz.
Typ zwrotu: brak
|
clearChart() |
Czyści wykres i usuwa wszystkie przydzielone zasoby. Typ zwrotu: brak
|
Zdarzenia
Więcej informacji o korzystaniu z tych zdarzeń znajdziesz w artykułach Podstawowe funkcje interaktywne, Obsługa zdarzeń i Uruchamianie zdarzeń.
Nazwa | |
---|---|
click |
Uruchamiane, gdy użytkownik kliknie wykres. Można jej użyć do określenia, kiedy kliknięty jest tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety. Właściwości: targetID
|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
onmouseover |
Uruchamiane, gdy użytkownik najedzie kursorem na jednostkę wizualną. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Wpis wycinka lub legendy odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
onmouseout |
Uruchamiane, gdy użytkownik odsunie kursor od jednostki wizualnej. Zwraca indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Wpis wycinka lub legendy odpowiada wierszowi w tabeli danych (indeks kolumny ma wartość null). Właściwości: wiersz, kolumna.
|
ready |
Wykres jest gotowy do wywołań metod zewnętrznych. Jeśli chcesz korzystać z wykresu i metod wywoływania po narysowaniu, musisz skonfigurować odbiornik tego zdarzenia przed wywołaniem metody Właściwości: brak
|
select |
Uruchamiane, gdy użytkownik kliknie element wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń pod numer
Właściwości: brak
|
Zasady dotyczące danych
Cały kod i dane są przetwarzane i renderowane w przeglądarce. Żadne dane nie są wysyłane do żadnego serwera.