Welcome to Our Website

Vizualizace: Koláčový Graf

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 is3Dmož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ř.: 'red' nebo '#00cc00', nebo objekt s následujícími vlastnostmi.,

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

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:
  • stroke: barva, poskytovaná jako hex řetězec nebo anglický barevný název.
  • strokeWidth: pokud za předpokladu, kreslí hranici kolem oblasti grafu dané šířky (a s barvou stroke).
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: colors:.

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“ – zarovnáno na začátek oblasti přidělené legendě.
  • „centrum“ – soustředěné v oblasti přidělené legendě.
  • „konec“ – zarovnán na konec oblasti přidělené legendě.,

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:

  • ‚bottom‘ – zobrazí legendu pod grafem.
  • ‚značeno‘ – kreslí čáry spojující řezy s jejich datovými hodnotami.
  • ‚vlevo‘ – zobrazí legendu vlevo od grafu.
  • ‚none‘ – nezobrazuje žádnou legendu.
  • ‚right‘ – zobrazuje legendu vpravo od grafu.
  • ‚ top ‚ – zobrazuje legendu nad grafem.
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> } 

color může být jakýkoliv HTML color string, např.: 'red' nebo '#00cc00'. Viz také fontName a fontSize.,

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 number krát poloměr grafu.

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:

  • „procento“ – procento velikosti řezu z celkového počtu.
  • „hodnota“ – kvantitativní hodnota řezu.
  • ‚label‘ – název plátku.
  • ‚none‘ – NEZOBRAZUJE SE žádný text.
, 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>}

color může být jakýkoliv HTML color string, např.: 'red' nebo '#00cc00'. Viz také fontName a fontSize.

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 0 bude orientovat levý okraj prvního řezu přímo nahoru.,

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. {}). Pokud není specifikován plátek nebo hodnota, použije se globální hodnota., Každý objekt podporuje následující vlastnosti:

  • color – barva použitá pro tento řez. Zadejte platný barevný řetězec HTML.
  • offset – jak daleko oddělit plátek od zbytku koláče, od 0,0 (vůbec ne) do 1,0 (poloměr koláče).
  • textStyle – Přepíše globální pieSliceTextStyle pro tento plátek.,

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 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., 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 true, umožňuje kreslení popisků průtok mimo meze grafu na všech stranách.

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:

  • ‚both‘ – zobrazí jak absolutní hodnotu plátku, tak procento celku.
  • ‚value‘ – zobrazí pouze absolutní hodnotu plátku.
  • „procento“ – zobrazuje pouze procento celku reprezentovaného plátkem.
, 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 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.,spoušť

interakce uživatele, která způsobí zobrazení popisku:

  • ‚focus‘ – popis se zobrazí, když se uživatel nad prvkem vznáší.
  • ‚none‘ – popis se nezobrazí.
  • ‚selection‘ – popis se zobrazí, když uživatel vybere prvek.
, 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álostiready. Extended description.

návratový Typ: none
getAction(actionID)

Vrátí popisku akce objekt s požadovaným actionID.,

návratový Typ: objekt
getBoundingBox(id)

Vrací objekt obsahující vlevo, nahoře, šířka a výška grafu prvek id., Formát pro id ještě není zdokumentována (jsou návratové hodnoty rutin událostí), ale zde jsou některé příklady:

var cli = chart.getChartLayoutInterface();
Výška plocha grafu cli.getBoundingBox('chartarea').height Šířka třetí bar v první sérii a bar nebo sloupcový graf, cli.getBoundingBox('bar#0#2').width Vymezovací rámeček pátého klín grafu cli.getBoundingBox('slice#4') Vymezovací rámeček pro data grafu vertikální (např. sloupce) graf: cli.getBoundingBox('vAxis#0#gridline') Ohraničující pole data grafu horizontální (např.,, bar) graf: cli.getBoundingBox('hAxis#0#gridline')

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):

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

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:

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

Volání po graf je vypracován.

návratový Typ: objekt
getHAxisValue(position, optional_axis_index)

Vrací logický horizontální hodnotu na position, což je posun z grafu kontejner levý okraj. Může být negativní.,

příklad: chart.getChartLayoutInterface().getHAxisValue(400).

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

návratový Typ: Pole pro výběr prvků
getVAxisValue(position, optional_axis_index)

Vrací logický vertikální hodnotu na position, což je posun z grafu kontejner je horní okraj. Může být negativní.

příklad: chart.getChartLayoutInterface().getVAxisValue(300).

zavolejte toto po vykreslení grafu.

návratový Typ: číslo
getXLocation(position, optional_axis_index)

obrazovka Vrátí x-ovou souřadnici position vzhledem k grafu je kontejner.,

příklad: chart.getChartLayoutInterface().getXLocation(400).

zavolejte toto po vykreslení grafu.

návratový Typ: číslo
getYLocation(position, optional_axis_index)

obrazovka Vrátí y-ovou souřadnici position vzhledem k grafu je kontejner.

příklad: chart.getChartLayoutInterface().getYLocation(300).

zavolejte toto po vykreslení grafu.

návratový Typ: číslo
removeAction(actionID)

Odstraňuje popisku akce s požadovaným actionID z grafu.,

návratový Typ: none
setAction(action)

Nastaví popisku akce mají být provedeny, když uživatel klikne na akci text.

metodasetAction bere objekt jako jeho akční parametr. Tento objekt by měl specifikovat 3 vlastnosti: id— ID opatření jsou stanoveny, text —text, který by se měl objevit v popisku akce, a action — funkce, které by měl být spuštěn, když uživatel klikne na akci text.,

před voláním metody draw() je třeba nastavit všechny popisky. Rozšířený popis.

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

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 draw metoda, a volat jim jen po události byl vyhozen.

vlastnosti: Žádné
select

vypálil, když uživatel klikne na vizuální entitu. Chcete-li zjistit, co bylo vybráno, zavolejte getSelection().

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.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *