Přehled
koláčový graf, který je vykreslen v prohlížeči pomocí SVG nebo VML. Zobrazuje popisky, když se vznáší nad plátky.,
Příklad:
Vytváření 3D Koláčový Graf
Pokud nastavíte is3D
možnost true
, yourpie graf bude vypracován jako když to má tři rozměry:
is3D
false
ve výchozím nastavení, takže zde můžeme explicitně nastavit na true
:
Takže Donut Grafu
kobliha graf je koláčový graf s otvorem ve středu., Můžete vytvořit koblihy grafy s pieHole
možnosti:
pieHole
možnost by měla být nastavena na číslo mezi 0and 1, odpovídající poměr mezi poloměry otvoru a thechart. Čísla mezi 0,4 a 0,6 bude vypadat nejlépe na většině grafů.Hodnoty rovné nebo větší než 1, budou ignorovány, a hodnota 0will zcela sklapla.
nemůžete kombinovat pieHole
is3D
možnosti; pokud to uděláte, pieHole
budou ignorovány.,
Všimněte si, že Google Charts se snaží umístit štítek co nejblíže ke středu řezu. Pokud máte koblihový graf s justone plátek, střed plátku může spadnout do otvoru koblihy. V tomhle případě, změna barvy štítek:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
Rotační Koláčový Graf
ve výchozím nastavení, koláčové grafy začínají na levém okraji první slicepointing rovně nahoru. Můžete změnit, že s pieStartAngle
možnosti:
Tady, jsme otočení grafu ve směru hodinových ručiček 100 stupňů s možnostz pieStartAngle: 100
., (Tak vybrán, protože to particularangle se stane, aby se „italský“ štítek vešel do plátku.)
Vybuchující Plátek
můžete oddělit koláč plátky od zbytku grafu s offset
vlastnost slices
možnosti:
oddělit plátek, vytvořit slices
objekt a přiřadit odpovídající plátek číslo offset
mezi 0 a 1., Níže můžeme přiřadit postupně větší posuny na plátky 4 (Gujarati), 12 (Marathi), 14 (Urijština), a 15 (Punjabi):
Odstranění Plátky
vynechat plátek, změnit colorto 'transparent'
:
také Jsme použili pieStartAngle
otočit graf 135degrees, pieSliceText
odstranit text z theslices, a tooltip.trigger
zakázat popisy:
Plátek Viditelnost Práh
můžete nastavit hodnotu jako práh pro koláč plátek učinit individuálně., Tato hodnota odpovídá zlomku grafu (přičemž celý graf má hodnotu 1). Chcete-li nastavit tuto prahovou hodnotu jako procento celku, vydělte požadované procento 100 (pro práh 20% by hodnota byla 0,2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
všechny plátky menší než tato prahová hodnota budou kombinovány do jediného „jiného“ řezu a budou mít kombinovanou hodnotu všech plátků pod prahem.
Loading
google.charts.load
Název balíčku je"corechart"
.,
google.charts.load("current", {packages: });
název třídy vizualizace je google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
Formát dat
řádky: každý řádek v tabulce představuje plátek.
Sloupce:
Možnosti Konfigurace
Název | |
---|---|
backgroundColor |
barva pozadí na hlavní ploše grafu. Může být buď jednoduchý HTML color string, např.: Typ: řetězec nebo objekt
výchozí: „bílá“
|
backgroundColor.zdvih |
Barva okraje grafu jako barevný řetězec HTML. typ: string
výchozí: ‚# 666 ‚
|
backgroundColor.strokeWidth |
šířka okraje v pixelech. Typ: číslo
výchozí: 0
|
backgroundColor.vyplňte |
barvu výplně grafu jako barevný řetězec HTML., , Typ: string
Výchozí: ‚bílá‘
|
chartArea |
objekt s členy konfigurovat umístění a velikost oblasti grafu (kde graf je vypracován, bez osy a legendy). Podporovány jsou dva formáty: číslo nebo číslo následované %. Jednoduché číslo je hodnota v pixelech; číslo následované % je procento. Příklad: Typ: objekt
Výchozí: null
|
chartArea.backgroundColor |
Barva pozadí oblasti grafu., Pokud je použit řetězec, může to být buď hex řetězec (např., ‚#FDC‘) nebo anglický název barvy. Při použití objektu lze poskytnout následující vlastnosti:
Typ: řetězec nebo objekt
výchozí: „bílá“
|
chartArea.vlevo |
jak daleko nakreslit graf z levého okraje., Typ: číslo nebo řetězec
výchozí: auto
|
chartArea.top |
jak daleko nakreslit graf z horního okraje. Typ: číslo nebo řetězec
výchozí: auto
|
chartArea.šířka |
šířka plochy grafu. Typ: číslo nebo řetězec
výchozí: auto
|
chartArea.výška |
výška plochy grafu. Typ: number nebo string
Výchozí: auto
|
barvy |
barvy použít pro prvky grafu., Pole řetězců, kde každý prvek je barevný řetězec HTML, například: Typ: Pole řetězců
Výchozí: výchozí barvy
|
enableInteractivity |
, Zda je graf hody uživatele na základě událostí, nebo reaguje na interakci s uživatelem. Pokud je falešný, graf nebude házet „select“ nebo jiné události založené na interakci (ale hodí připravené nebo chybové události) a nezobrazí hovertext nebo se jinak změní v závislosti na vstupu uživatele., Typ: boolean
Default: true
|
velikost |
výchozí velikost písma v pixelech, celý text v grafu. Můžete to přepsat pomocí vlastností pro konkrétní prvky grafu. Typ: číslo
Výchozí: automatické
|
název fontu |
výchozí typ písma pro veškerý text v grafu. Můžete to přepsat pomocí vlastností pro konkrétní prvky grafu. , Typ: string
Výchozí: ‚Arial‘
|
forceIFrame |
Nakreslí graf uvnitř vložený rám., (Všimněte si, že na IE8 je tato volba ignorována; všechny grafy IE8 jsou kresleny v I-rámcích.) Typ: boolean
Výchozí: false
|
výška |
Výška grafu v pixelech. Typ: číslo
Výchozí: výška obsahující prvek
|
is3D |
Pokud je to pravda, zobrazuje trojrozměrný graf. Typ: boolean
Výchozí: false
|
legenda |
objekt s členy konfigurovat různé aspekty legenda., Určete vlastnosti tohoto objektu, můžete použít objekt doslovný zápis, jak je znázorněno zde: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Typ: objekt
Výchozí: null
|
legenda.zarovnání |
zarovnání legendy. Může být jedním z následujících:
Start, střed a konec jsou vzhledem ke stylu-vertikální nebo horizontální-legendy. Například v „pravé“ legendě jsou „start“ a „konec“ nahoře a dole; pro „horní“ legendu by „start“ a „konec“ byly vlevo a vpravo od oblasti. výchozí hodnota závisí na poloze legendy. Pro‘ spodní ‚legendy, výchozí je ‚centrum‘; ostatní legendy výchozí ‚start‘. typ: string
výchozí: automatické
|
legenda.pozice |
pozice legendy., Může být jedním z následujících:
typ: string
výchozí: ‚right‘
|
legenda.maxLines |
maximální počet řádků v legendě. Nastavte toto na číslo větší než jedno pro přidání řádků do vaší legendy., Poznámka: přesná logika použitá k určení skutečného počtu vykreslených řádků je stále v toku. tato volba v současné době funguje pouze tehdy, když legenda.pozice je „top“. Typ: číslo
Výchozí: 1
|
legenda.textStyle |
objekt, který určuje styl textu legendy. Objekt má tento formát: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Typ: objekt
Výchozí:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
huby |
Pokud je mezi 0 a 1, zobrazí donut grafu. Otvor s poloměrem rovným Typ: číslo
Výchozí hodnota: 0
|
pieSliceBorderColor |
barva plátek hranic. Platí pouze v případě, že graf je dvourozměrný., typ: string
výchozí:’white‘
|
pieSliceText |
obsah textu zobrazeného na plátku. Může být jedním z následujících:
, Typ: string
Výchozí: ‚procento‘
|
pieSliceTextStyle |
objekt, který určuje plátek styl textu., Objekt má tento formát: {color: <string>, fontName: <string>, fontSize: <number>} Typ: objekt
Výchozí:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieStartAngle |
úhel, ve stupních, pro otočení grafu. Výchozí hodnota Typ: číslo
Výchozí:
0 |
reverseCategories |
Pokud je to pravda, čerpá plátky proti směru hodinových ručiček. Výchozí je kreslit ve směru hodinových ručiček. Typ: boolean
Výchozí: false
|
pieResidueSliceColor |
Barva kombinace plátek, který drží všechny plátky níže sliceVisibilityThreshold., , Typ: string
Výchozí: ‚#ccc‘
|
pieResidueSliceLabel |
štítek pro kombinaci plátek, který drží všechny plátky níže sliceVisibilityThreshold. , Typ: string
Výchozí: „Ostatní“
|
řezy |
pole objektů, z nichž každý popisuje formát odpovídající plátek koláče. Chcete-li použít výchozí hodnoty pro plátek, zadejte prázdný objekt (tj.
můžete určit buď pole objektů, z nichž každý se vztahuje k řezu, v daném pořadí, nebo můžete určit objekt, kde každé dítě má číselný klíč označující, které plátek se to týká. Například následující dvě prohlášení jsou totožné, a prohlašuji, že první plátek jako je černá a čtvrtý jako červená: slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} Typ: Pole objektů, nebo objektů s vnořenými objekty
Default: {}
|
sliceVisibilityThreshold |
frakční hodnota koláč, níže, které plátkem nebude zobrazovat jednotlivě., Všechny plátky, které neprošly tímto prahem, budou kombinovány s jediným „jiným“ plátkem, jehož velikost je součtem všech jejich velikostí. Výchozí nastavení je nezobrazovat jednotlivě Žádný plátek, který je menší než půl stupně. // Slices less than 25% of the pie will be// combined into an "Other" slice.sliceVisibilityThreshold: .25 Typ: číslo
výchozí: půl stupně (.5/360 nebo 1/720 nebo .0014)
|
title |
Text pro zobrazení nad grafem. , Typ: string
Výchozí: bez názvu
|
titleTextStyle |
objekt, který specifikuje název stylu textu., 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., Určete vlastnosti tohoto objektu, můžete použít objekt doslovný zápis, jak je znázorněno zde: {textStyle: {color: '#FF0000'}, showColorCode: true} Typ: objekt
Výchozí: null
|
popisek.ignoreBounds |
Pokud je nastaveno na Poznámka: toto platí pouze pro popisky HTML. Pokud je to povoleno pomocí nástrojů SVG, bude oříznut jakýkoli přetečení mimo hranice grafu. Viz přizpůsobení obsahu popisku pro více informací., Typ: boolean
výchozí: false
|
tooltip.isHtml |
Pokud je nastavena na hodnotu true, použijte HTML-renderované (spíše než SVG-renderované) popisky. Viz přizpůsobení obsahu popisku pro více informací. Poznámka: přizpůsobení obsahu HTML tooltip pomocí datové role sloupce tooltip není podporováno vizualizací bublinového grafu. Typ: boolean
výchozí: false
|
tooltip.showColorCode |
Pokud je to pravda, zobrazte barevné čtverce vedle informací o řezu v popisku., Typ: boolean
výchozí: false
|
tooltip.text |
jaké informace se mají zobrazit, když se uživatel vznáší nad plátkem koláče. Jsou podporovány následující hodnoty:
, Typ: string
Výchozí: ‚jak‘
|
popisek.,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.,spoušť |
interakce uživatele, která způsobí zobrazení popisku:
, Typ: string
Výchozí: „zaměření“
|
šířka |
Šířka tabulky v pixelech., Typ: číslo
Výchozí: šířky obsahující prvek
|
Metody
Metoda | |
---|---|
draw(data, options) |
Kreslí graf. Graf přijímá další volání metody až po vypálení události návratový Typ: none
|
getAction(actionID) |
Vrátí popisku akce objekt s požadovaným návratový Typ: objekt
|
getBoundingBox(id) |
Vrací objekt obsahující vlevo, nahoře, šířka a výška grafu prvek
hodnoty jsou vzhledem k kontejneru grafu. Zavolejte to po nakreslení grafu. návratový Typ: objekt
|
getChartAreaBoundingBox() |
Vrací objekt obsahující vlevo, nahoře, šířka a výška tabulky obsahu (tj., kromě popisky a legendy):
Hodnoty jsou vztaženy ke kontejneru grafu. Zavolejte to po nakreslení grafu. návratový Typ: objekt
|
getChartLayoutInterface() |
Vrací objekt obsahující informace o umístění na obrazovce grafu a jeho prvky., následující metody může být nazýván na vrácený objekt:
Volání po graf je vypracován. návratový Typ: objekt
|
getHAxisValue(position, optional_axis_index) |
Vrací logický horizontální hodnotu na příklad: zavolejte toto po vykreslení grafu. typ návratu: číslo
|
getImageURI()
|
vrací graf serializovaný jako obrázek URI. zavolejte toto po vykreslení grafu. viz tisk PNG grafů. návratový Typ: string
|
getSelection() |
Vrací pole vybraných graf subjekty. Volitelné entity jsou plátky a záznamy legend. Pro tento graf lze v daném okamžiku vybrat pouze jednu entitu., návratový Typ: Pole pro výběr prvků
|
getVAxisValue(position, optional_axis_index) |
Vrací logický vertikální hodnotu na příklad: zavolejte toto po vykreslení grafu. návratový Typ: číslo
|
getXLocation(position, optional_axis_index) |
obrazovka Vrátí x-ovou souřadnici příklad: zavolejte toto po vykreslení grafu. návratový Typ: číslo
|
getYLocation(position, optional_axis_index) |
obrazovka Vrátí y-ovou souřadnici příklad: zavolejte toto po vykreslení grafu. návratový Typ: číslo
|
removeAction(actionID) |
Odstraňuje popisku akce s požadovaným návratový Typ:
none |
setAction(action) |
Nastaví popisku akce mají být provedeny, když uživatel klikne na akci text. metoda před voláním metody návratový Typ:
none |
setSelection() |
Vybere zadaný graf subjekty. Zruší jakýkoli předchozí výběr. Volitelné entity jsou plátky a záznamy legend. Pro tento graf lze vybrat pouze jednu entitu najednou. typ návratu: žádný
|
clearChart()
|
vymaže graf a uvolní všechny přidělené zdroje. návratový Typ: none
|
Akce
Pro více informací o tom, jak používat tyto události, viz Základní Interaktivita, Zpracování Událostí, a zážehů.
Název | |
---|---|
click |
aktivována, když uživatel klikne uvnitř grafu., Lze použít k identifikaci, kdy jsou klepnutí na název, datové prvky, položky legendy, osy, mřížky nebo štítky. Vlastnosti: targetID
|
error |
aktivována, když dojde k chybě při pokusu o vykreslení grafu. Vlastnosti: id, zpráva
|
onmouseover |
aktivována, když uživatel myší přes vizuální entity. Předává zpět indexy řádků a sloupců odpovídajícího prvku tabulky dat. Položka řezu nebo legendy koreluje s řádkem v datové tabulce (index sloupce je null)., Vlastnosti: řádek, sloupec
|
onmouseout |
aktivována, když uživatel myší od vizuální entity. Předává zpět indexy řádků a sloupců odpovídajícího prvku tabulky dat. Položka řezu nebo legendy koreluje s řádkem v datové tabulce (index sloupce je null). Vlastnosti: řádek, sloupec
|
ready |
graf je připraven pro externí volání metody., Pokud chcete komunikovat s grafem, a volání metody poté, co jste vyvodit to, měli byste nastavit listener pro tuto událost, než zavoláte vlastnosti: Žádné
|
select
|
vypálil, když uživatel klikne na vizuální entitu. Chcete-li zjistit, co bylo vybráno, zavolejte Vlastnosti: žádný
|
Údajů
Veškerý kód a data, zpracování a vykreslení v prohlížeči., Na žádný server nejsou odesílána Žádná data.