przegląd
Wykres kołowy, który jest renderowany w przeglądarce za pomocą SVG lub VML. Wyświetla podpowiedzi po najechaniu kursorem na plasterki.,
przykład
Tworzenie wykresu kołowego 3D
Jeśli ustawisz opcję is3D
na true
, Twój wykres zostanie narysowany tak, jakby miał trzy wymiary:
is3D
jest false
domyślnie ustawiamy go na true
:
tworzenie wykresu pączka
wykres pączka jest wykresem kołowym z dziurą w środku., Możesz tworzyć wykresy pączków za pomocą opcji pieHole
:
opcjapieHole
powinna być ustawiona na liczbę od 0 do 1, odpowiadającą stosunkowi promieni między otworem a wykresem. Numery od 0,4 do 0,6 będą wyglądać najlepiej na większości Wykresów.Wartości równe lub większe niż 1 zostaną zignorowane, a wartość 0 całkowicie zamknie twój otwór.
nie możesz połączyć opcjipieHole
Iis3D
; jeśli to zrobisz,pieHole
zostaną zignorowane.,
zauważ, że Google Charts stara się umieścić etykietę jak najbliżej środka plasterka. Jeśli masz Wykres pączka z justone plaster, środek plasterka może wpaść do otworu pączka. W takim przypadku zmień kolor etykiety:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
obracanie wykresu kołowego
domyślnie wykresy kołowe rozpoczynają się od lewej krawędzi pierwszego cięcia w górę. Możesz to zmienić za pomocą opcji pieStartAngle
:
tutaj obracamy Wykres zgodnie z ruchem wskazówek zegara o 100 stopni za pomocą opcji pieStartAngle: 100
., (Tak dobrana, bo ta specyfika sprawia, że etykieta” włoska ” mieści się wewnątrz plasterka.)
eksplodując kawałek
możesz oddzielić plasterki ciasta od reszty wykresu za pomocą offset
właściwości slices
opcja:
aby oddzielić kawałek, Utwórz obiekt slices
I Przypisz odpowiedni numer plastra an offset
pomiędzy 0 a 1., Poniżej przypisujemy stopniowo większe przesunięcia do plasterków 4 (Gujarati), 12 (Marathi), 14 (Orija) i 15 (pendżabski):
usuwanie plasterków
aby pominąć plasterek, Zmień kolor 'transparent'
:
użyliśmy również pieStartAngle
aby obrócić Wykres 135degrees, pieSliceText
aby usunąć tekst z tych elementów, i tooltip.trigger
aby wyłączyć podpowiedzi:
próg widoczności plasterka
możesz ustawić wartość jako próg dla plasterka do renderowania indywidualnie., Wartość ta odpowiada ułamkowi wykresu (przy czym cały wykres ma wartość 1). Aby ustawić ten próg jako procent całości, podziel żądany procent przez 100 (dla progu 20% wartość wynosiłaby 0,2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
wszystkie plasterki mniejsze od tego progu zostaną połączone w jeden „inny” plasterek i będą miały łączną wartość wszystkich plasterków poniżej progu.
Ładowanie
google.charts.load
Nazwa pakietu to"corechart"
.,
google.charts.load("current", {packages: });
nazwa klasy wizualizacji to google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
format danych
Rows: każdy wiersz w tabeli reprezentuje plasterek.
kolumny:
opcje konfiguracji
Nazwa | |
---|---|
backgroundColor |
kolor tła dla głównego obszaru wykresu. Może to być prosty kolorowy łańcuch HTML, na przykład: Type: string lub object
Default: 'white'
|
backgroundColor.stroke |
kolor obramowania wykresu, jako ciąg kolorów HTML. Type: string
Default: '#666′
|
backgroundColor.strokeWidth |
szerokość obramowania w pikselach. Type: number
Default: 0
|
backgroundColor.wypełnij |
kolor wypełnienia wykresu jako ciąg kolorów HTML., Type: string
Default: 'white'
|
chartArea |
obiekt z prętami do konfiguracji położenia i rozmiaru obszaru wykresu (gdzie sam wykres jest rysowany, z wyłączeniem osi i legend). Obsługiwane są dwa formaty: Liczba lub liczba, po której następuje %. Liczba prosta jest wartością w pikselach; Liczba, po której następuje%, jest procentem. Przykład: Typ: obiekt
domyślnie: null
|
chartArea.backgroundColor |
kolor tła obszaru wykresu., Gdy łańcuch jest używany, Może to być łańcuch szesnastkowy (np. '#FDC') lub angielska nazwa koloru. Gdy obiekt jest używany, można podać następujące właściwości:
Type: string lub object
Default: 'white'
|
chartArea.lewa |
jak daleko narysować wykres od lewej krawędzi., Type: number or string
Default: auto
|
chartArea.top |
jak daleko narysować wykres od górnej granicy. Type: number or string
Default: auto
|
chartArea.szerokość |
Szerokość obszaru wykresu. Type: number or string
Default: auto
|
chartArea.wysokość |
Wysokość obszaru wykresu. Type: number or string
Default: auto
|
colors |
colors to use for the chart elements., Tablica łańcuchów, gdzie każdy element jest kolorowym łańcuchem HTML, na przykład: Type: Array of strings
Default: default colors
|
enableInteractivity |
Czy wykres wyświetla zdarzenia oparte na użytkowniku lub reaguje na interakcję użytkownika. Jeśli wartość false, Wykres nie wyświetli „select” lub innych zdarzeń opartych na interakcji (ale wyświetli zdarzenia ready lub error) i nie wyświetli tekstu podświetlonego lub w inny sposób nie zmieni się w zależności od danych wejściowych użytkownika., Type: boolean
Default: true
|
fontSize |
domyślny rozmiar czcionki, w pikselach, całego tekstu na wykresie. Można to zastąpić przy użyciu właściwości dla określonych elementów wykresu. Type: number
Default: automatic
|
fontName |
domyślna twarz czcionki dla całego tekstu na wykresie. Można to zastąpić przy użyciu właściwości dla określonych elementów wykresu. Type: string
Default: 'Arial'
|
forceIFrame |
rysuje wykres wewnątrz ramki wbudowanej., (Zauważ, że w IE8 ta opcja jest ignorowana; wszystkie wykresy IE8 są rysowane w i-frame.) typ: logiczny
domyślnie: false
|
wysokość |
wysokość wykresu w pikselach. Type: number
Default: height of the containing element
|
is3D |
If true, displays a three-dimensional chart. Type: boolean
Default: false
|
legend |
obiekt z członkami do konfiguracji różnych aspektów legendy., Aby określić właściwości tego obiektu, można użyć obiektowej notacji literalnej, jak pokazano tutaj: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: obiekt
domyślnie: null
|
legenda.wyrównanie |
wyrównanie legendy. Może być jednym z następujących:
początek, środek i koniec są względem stylu-pionowego lub poziomego-legendy. Na przykład, w legendzie „right”, „start” i ” end „znajdują się odpowiednio na górze i na dole; dla legendy „top”, „start” i ” end ” znajdują się odpowiednio po lewej i prawej stronie obszaru. wartość domyślna zależy od pozycji legendy. W przypadku Legend' dolnych 'domyślną wartością jest' center'; inne legendy domyślną wartością jest 'start'. Type: string
Default: automatic
|
legend.pozycja |
pozycja legendy., Może być jedną z następujących opcji:
Type: string
Default: 'right'
|
legend.maxLines |
Maksymalna liczba linii w legendzie. Ustaw liczbę większą niż jedna, aby dodać wiersze do legendy., Uwaga: dokładna logika użyta do określenia rzeczywistej liczby wyrenderowanych linii jest nadal zmienna. Ta opcja działa obecnie tylko przy legendzie./ valign = „top” / Typ: liczba
domyślnie: 1
|
legenda.textStyle |
obiekt, który określa styl tekstu legendy. Obiekt ma format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieHole |
If between 0 and 1, displays a donut chart. Dziura z promieniem równym Type: number
Default: 0
|
pieSliceBorderColor |
kolor obramowania plasterka. Ma zastosowanie tylko wtedy, gdy wykres jest dwuwymiarowy., Type: string
Default: 'white'
|
pieSliceText |
zawartość tekstu wyświetlanego na plasterku. Może być jedną z następujących wartości:
typ: string
domyślnie: 'procent'
|
pieSliceTextStyle |
obiekt, który określa styl tekstu plasterka., Obiekt ma format: {color: <string>, fontName: <string>, fontSize: <number>} Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieStartAngle |
kąt, w stopniach, aby obrócić Wykres o. Domyślna wartość Type: number
Default:
0 |
reverseCategories |
Jeśli true, rysuje plasterki w lewo. Domyślnie rysuje się zgodnie z ruchem wskazówek zegara. Type: boolean
Default: false
|
pieResidueSliceColor |
Color dla kombinacji plasterków, które zawierają wszystkie plasterki poniżej sliceVisibilityThreshold., Type: string
Default: '#ccc'
|
pieResidueSliceLabel |
etykieta dla plasterka kombinowanego, który zawiera wszystkie plasterki poniżej sliceVisibilityThreshold. Type: string
Default: 'Other'
|
plasterki |
tablica obiektów, z których każdy opisuje format odpowiedniego plasterka na cieście. Aby użyć wartości domyślnych dla plasterka, podaj pusty obiekt (np.
możesz określić tablicę obiektów, z których każdy ma zastosowanie do plasterka w podanej kolejności, lub obiekt, w którym każde dziecko ma klucz numeryczny wskazujący, do którego plasterka ma zastosowanie. Na przykład, następujące dwie deklaracje są identyczne i deklarują pierwszy plasterek jako czarny, a czwarty jako czerwony: slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} Type: Array of objects, or object with nested objects
Default: {}
|
sliceVisibilityThreshold |
wartość ułamkowa ciasto, poniżej którego kawałek nie pokaże się indywidualnie., Wszystkie plasterki, które nie przeszły tego progu, zostaną połączone w jeden” inny ” plasterek, którego rozmiar jest sumą wszystkich ich rozmiarów. Domyślnym ustawieniem jest nie Pokazywanie pojedynczo żadnego kawałka, który jest mniejszy niż pół stopnia. // Slices less than 25% of the pie will be// combined into an "Other" slice.sliceVisibilityThreshold: .25 Type: number
Default: Half a degree (.5/360 lub 1/720 lub .0014)
|
tytuł |
tekst do wyświetlenia nad wykresem. typ: string
domyślnie: brak tytułu
|
titleTextStyle |
obiekt, który określa styl tekstu tytułu., The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip |
An object with members to configure various tooltip elements., Aby określić właściwości tego obiektu, można użyć dosłownej notacji obiektu, jak pokazano tutaj: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: object
domyślnie: null
|
tooltip.ignoreBounds |
jeśli jest ustawione na uwaga: dotyczy to tylko podpowiedzi HTML. Jeśli jest to włączone w podpowiedziach SVG, wszelkie przepełnienia poza granicami wykresu zostaną przycięte. Zobacz Dostosowywanie zawartości podpowiedzi, aby uzyskać więcej informacji., Type: boolean
Default: false
|
tooltip.isHtml |
Jeśli ustawione na true, Użyj podpowiedzi renderowanych HTML (zamiast SVG). Zobacz Dostosowywanie zawartości podpowiedzi, aby uzyskać więcej informacji. Uwaga: wizualizacja wykresu bąbelkowego nie obsługuje dostosowywania zawartości podpowiedzi HTML za pomocą roli danych kolumny. Type: boolean
Default: false
|
tooltip.showColorCode |
Jeśli true, Pokaż kolorowe kwadraty obok informacji o plasterku w podpowiedzi., Type: boolean
Default: false
|
tooltip.TEKST |
Jakie informacje wyświetlić, gdy użytkownik najedzie na kawałek ciasta. Obsługiwane są następujące wartości:
Type: string
Default: 'both'
|
tooltip.,textStyle |
An object that specifies the tooltip text style. The object has this format: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } The Type: object
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
tooltip.,trigger |
interakcja użytkownika, która powoduje wyświetlenie podpowiedzi:
typ: string
domyślnie: 'focus'
|
szerokość |
Szerokość wykresu w pikselach., Type: number
Default: width of the containing element
|
Methods
Method | |
---|---|
draw(data, options) |
rysuje wykres. Wykres akceptuje dalsze wywołania metod dopiero po wywołaniu zdarzenia Typ powrotu: brak
|
getAction(actionID) |
zwraca obiekt akcji tooltip z żądanym identyfikatorem Typ powrotu: obiekt
|
getBoundingBox(id) |
zwraca obiekt zawierający lewy, górny, szerokość i Wysokość elementu wykresu
wartości są względne do kontenera wykresu. Zadzwoń po narysowaniu wykresu. Typ powrotu: obiekt
|
getChartAreaBoundingBox() |
zwraca obiekt zawierający lewy, górny, szerokość i wysokość zawartości wykresu (tj.,
wartości są względne do kontenera wykresu. Zadzwoń po narysowaniu wykresu. Typ powrotu: object
|
getChartLayoutInterface() |
zwraca obiekt zawierający informacje o umieszczeniu wykresu na ekranie i jego elementów., na zwracanym obiekcie można wywołać następujące metody:
wywołaj to po narysowaniu wykresu. Typ powrotu: object
|
getHAxisValue(position, optional_axis_index) |
zwraca poziomą wartość logiczną przykład: wywołaj to po narysowaniu wykresu. Return Type: number
|
zwraca Wykres serializowany jako Uri obrazu. wywołaj to po narysowaniu wykresu. patrz Drukowanie Wykresów PNG. Typ powrotu: string
|
|
getSelection() |
zwraca tablicę wybranych encji wykresu. Elementy wybierane są plasterkami i wpisami legendy. Dla tego wykresu w danym momencie można wybrać tylko jedną jednostkę., Typ powrotu: tablica elementów zaznaczenia
|
getVAxisValue(position, optional_axis_index) |
zwraca logiczną wartość pionową przykład: wywołaj to po narysowaniu wykresu. Return Type: number
|
zwraca współrzędną X ekranu przykład: wywołaj to po narysowaniu wykresu. Typ powrotu: numer
|
|
getYLocation(position, optional_axis_index) |
zwraca współrzędną Y ekranu przykład: wywołaj to po narysowaniu wykresu. Typ zwracania: numer
|
removeAction(actionID) |
usuwa z wykresu etykietę z żądaną akcją Typ powrotu:
none |
setAction(action) |
Ustawia etykietę, która ma być wykonana, gdy użytkownik kliknie tekst akcji. metoda przed wywołaniem metody Typ powrotu:
none |
wybiera określone encje wykresu. Anuluje poprzednią selekcję. Elementy wybierane są plasterkami i wpisami legendy. Dla tego wykresu można wybrać tylko jeden obiekt na raz. Typ powrotu: brak
|
|
clearChart() |
czyści wykres i zwalnia wszystkie przydzielone zasoby. Typ powrotu: brak
|
zdarzenia
aby uzyskać więcej informacji na temat korzystania z tych zdarzeń, zobacz podstawowe funkcje interaktywne, Obsługa zdarzeń i zdarzenia uruchamiania.
Nazwa | |
---|---|
click |
wywołane, gdy użytkownik kliknie wewnątrz wykresu., Może być używany do identyfikacji, kiedy Tytuł, elementy danych, wpisy legendy, osie, linie siatki lub etykiety są klikane. właściwości: targetID
|
error |
wywołane, gdy wystąpi błąd podczas próby renderowania wykresu. właściwości: id, wiadomość
|
onmouseover |
wywołane, gdy użytkownik Mouse nad wizualnym elementem. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Wpis wycinka lub legendy koreluje z wierszem w tabeli danych (indeks kolumn jest null)., właściwości: wiersz, kolumna
|
onmouseout |
wywołane, gdy użytkownik oddala się od obiektu wizualnego. Przekazuje z powrotem indeksy wierszy i kolumn odpowiedniego elementu tabeli danych. Wpis wycinka lub legendy koreluje z wierszem w tabeli danych (indeks kolumn jest null). właściwości: row, column
|
ready |
wykres jest gotowy do zewnętrznych wywołań metod., Jeśli chcesz wejść w interakcję z wykresem i wywołać metody po jego narysowaniu, powinieneś skonfigurować detektor tego zdarzenia przed wywołaniem metody właściwości: brak
|
select |
wywołane, gdy użytkownik kliknie obiekt wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń właściwości: brak
|
Polityka danych
cały kod i dane są przetwarzane i renderowane w przeglądarce., Żadne dane nie są wysyłane do żadnego serwera.