Welcome to Our Website

Wizualizacja: Wykres kołowy

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: 'red' lub '#00cc00' lub obiekt o następujących właściwościach.,

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: chartArea:{left:20,top:0,width:'50%',height:'75%'}

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:
  • stroke: kolor, podany jako ciąg szesnastkowy lub angielska nazwa koloru.
  • strokeWidth: jeśli podano, rysuje obramowanie wokół obszaru wykresu o podanej szerokości (i z kolorem stroke).
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: colors:.

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:

  • ’start' – wyrównany do początku obszaru przeznaczonego dla legendy.
  • 'center' – wyśrodkowany w obszarze przeznaczonym na legendę.
  • ’end' – wyrównany do końca obszaru przeznaczonego dla legendy.,

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:

  • ’bottom' – wyświetla legendę pod wykresem.
  • 'etykietowane' – rysuje linie łączące plasterki z ich wartościami danych.
  • 'left' – wyświetla legendę na lewo od wykresu.
  • 'none' – nie wyświetla żadnej legendy.
  • 'right' – wyświetla legendę po prawej stronie wykresu.
  • 'top' – wyświetla legendę nad wykresem.
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> } 

color może być dowolnym ciągiem kolorów HTML, na przykład: 'red'lub'#00cc00'. Zobacz też fontName oraz fontSize.,

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 number razy promień wykresu.

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:

  • ’procent' – procent wielkości plasterka z całości.
  • 'value' – wartość ilościowa wycinka.
  • 'label' – nazwa kawałka.
  • 'none' – nie jest wyświetlany żaden tekst.
typ: string
domyślnie: 'procent'
pieSliceTextStyle

obiekt, który określa styl tekstu plasterka., Obiekt ma format:

{color: <string>, fontName: <string>, fontSize: <number>}

color może być dowolnym ciągiem kolorów HTML, na przykład: 'red'lub'#00cc00'. Zobacz też fontName oraz fontSize.

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ść 0 ustawia krawędź pierwszego wycinka bezpośrednio w górę.,

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. {}). Jeśli nie podano plasterka lub wartości, zostanie użyta wartość globalna., Każdy obiekt obsługuje następujące właściwości:

  • color – kolor do użycia dla tego kawałka. Określ poprawny łańcuch kolorów HTML.
  • offset – jak daleko oddzielić kawałek od reszty ciasta, od 0.0 (wcale nie) do 1.0 (promień ciasta).
  • textStyle – nadpisuje globalnypieSliceTextStyle dla tego kawałka.,

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 color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

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 natrue, pozwala rysować podpowiedzi na przepływanie poza granicami wykresu ze wszystkich stron.

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:

  • 'both' – wyświetla zarówno wartość bezwzględną plasterka, jak i procent całości.
  • 'value' – wyświetla tylko wartość bezwzględną plasterka.
  • ’procent' – wyświetla tylko procent całości reprezentowanej przez plasterek.
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 color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.

Type: object
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.,trigger

interakcja użytkownika, która powoduje wyświetlenie podpowiedzi:

  • 'focus' – podpowiedź zostanie wyświetlona, gdy użytkownik znajdzie się nad elementem.
  • 'none' – podpowiedź nie zostanie wyświetlona.
  • 'selection' – podpowiedź zostanie wyświetlona, gdy użytkownik wybierze element.
typ: string
domyślnie: 'focus'
szerokość

Szerokość wykresu w pikselach.,

Type: number
Default: width of the containing element

Methods

getImageURI()

getXLocation(position, optional_axis_index)

setSelection()

Method
draw(data, options)

rysuje wykres. Wykres akceptuje dalsze wywołania metod dopiero po wywołaniu zdarzenia ready. Extended description.

Typ powrotu: brak
getAction(actionID)

zwraca obiekt akcji tooltip z żądanym identyfikatoremactionID.,

Typ powrotu: obiekt
getBoundingBox(id)

zwraca obiekt zawierający lewy, górny, szerokość i Wysokość elementu wykresuid., Format id nie jest jeszcze udokumentowany (są to wartości zwracane przez programy obsługi zdarzeń), ale oto kilka przykładów:

var cli = chart.getChartLayoutInterface();
Wysokość obszaru wykresu cli.getBoundingBox('chartarea').height szerokość trzeciego paska w pierwszej serii wykresu słupkowego lub kolumnowego cli.getBoundingBox('bar#0#2').width obwiednię piątego klina wykresu kołowego cli.getBoundingBox('slice#4') obwiednię danych wykresu pionowego (np. kolumny) wykres: cli.getBoundingBox('vAxis#0#gridline') obwiednię danych wykresu poziomego (np. np.,, bar) wykres:cli.getBoundingBox('hAxis#0#gridline')

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.,

var cli = chart.getChartLayoutInterface();
cli.getChartAreaBoundingBox().left cli.getChartAreaBoundingBox().top cli.getChartAreaBoundingBox().height cli.getChartAreaBoundingBox().width

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:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

wywołaj to po narysowaniu wykresu.

Typ powrotu: object
getHAxisValue(position, optional_axis_index)

zwraca poziomą wartość logiczną position, która jest przesunięciem lewej krawędzi kontenera wykresu. Może być negatywny.,

przykład: chart.getChartLayoutInterface().getHAxisValue(400).

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ę., Extended description .

Typ powrotu: tablica elementów zaznaczenia
getVAxisValue(position, optional_axis_index)

zwraca logiczną wartość pionową position, która jest przesunięciem od górnej krawędzi kontenera wykresu. Może być negatywny.

przykład: chart.getChartLayoutInterface().getVAxisValue(300).

wywołaj to po narysowaniu wykresu.

Return Type: number

zwraca współrzędną X ekranu positionwzględem kontenera wykresu.,

przykład: chart.getChartLayoutInterface().getXLocation(400).

wywołaj to po narysowaniu wykresu.

Typ powrotu: numer
getYLocation(position, optional_axis_index)

zwraca współrzędną Y ekranuposition względem kontenera wykresu.

przykład: chart.getChartLayoutInterface().getYLocation(300).

wywołaj to po narysowaniu wykresu.

Typ zwracania: numer
removeAction(actionID)

usuwa z wykresu etykietę z żądaną akcjąactionID.,

Typ powrotu:none
setAction(action)

Ustawia etykietę, która ma być wykonana, gdy użytkownik kliknie tekst akcji.

metodasetAction przyjmuje obiekt jako parametr akcji. Obiekt ten powinien określać 3 właściwości: id— ID ustawianej akcji, text—tekst, który powinien pojawić się w opisie akcji orazaction — funkcja, która powinna być uruchomiona, gdy użytkownik kliknie tekst akcji.,

przed wywołaniem metodydraw() należy ustawić wszystkie akcje podpowiedzi. Opis rozszerzony.

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. Extended description .,

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 draw I wywołać je dopiero po wywołaniu zdarzenia.

właściwości: brak
select

wywołane, gdy użytkownik kliknie obiekt wizualny. Aby dowiedzieć się, co zostało wybrane, zadzwoń getSelection().

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *