Welcome to Our Website

Visualisointi: Pie Chart

Yleistä

ympyräkaavio, joka on sulatettu sisällä selain käyttää SVG tai VML. Näyttää työkaluvihjeet, kun leijut viipaleiden päällä.,

Esimerkki

Tehdä 3D Pie Chart

Jos valitset is3D mahdollisuus true, yourpie kaavio arvotaan, koska vaikka se on kolme ulottuvuutta:

is3D on false oletuksena, joten tässä me nimenomaisesti aseta se true:

mikä Donitsi Chart

donitsi kaavio on ympyräkaavio, jossa on reikä keskellä., Voit luoda donitsi kaavioita pieHole vaihtoehto:

pieHole vaihtoehto olisi asettaa välille 0and 1, vastaava suhde säteiden välinen reikä ja thechart. Numerot 0,4 – 0,6 näyttävät parhailta useimmilla listoilla.Arvot yhtä suuri tai suurempi kuin 1 ohitetaan, ja arvo 0will täysin pidä turpasi kiinni.

Et voi yhdistää pieHole ja is3Dvalinnat; jos et, pieHole ohitetaan.,

huomaa, että Google Charts pyrkii sijoittamaan merkin mahdollisimman lähelle viipaleen keskustaa. Jos sinulla on donut kaavio justone siivu, keskellä siivu voi pudota donitsi reikä. Katsoi tapauksessa, vaihtaa väriä label:

 var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };

Pyörivä ympyräkaavio

oletuksena, piirakka kaavioita alkaa vasemman reunan ensimmäinen slicepointing suoraan ylös. Voit muuttaa sen kanssa pieStartAngle vaihtoehto:

– Täällä meillä kiertää kaavio myötäpäivään 100 asteen optionof pieStartAngle: 100., (Siis valittu siksi, että particularangle tapahtuu tehdä ”Italian” etiketti mahtuvat siivu.)

Räjähtävä Siivu

Voit erottaa piirakka viipaleiksi muusta kartta, jossa offset omaisuutta slices vaihtoehto:

erillinen siivu, luo slices kohde ja määritä sopiva siivu numero offset välillä 0 ja 1., Alla, me määrittää asteittain suurempi siirtymät viipaleita 4 (Gujarati), 12 (Marathi), 14 (Oriya), ja 15 (Punjabi):

Poistaminen Viipaleiksi

jättää siivu, muuttaa colorto 'transparent':

Olemme myös käyttäneet pieStartAngle kierrä kaavio 135degrees, pieSliceText poista tekstin theslices, ja tooltip.trigger poista työkaluvihjeet:

Siivu Näkyvyys Kynnys

Voit asettaa arvo, kuin raja-arvo pie siivu tehdä erikseen., Tämä arvo vastaa murto-osaa kaaviosta (koko kaavion ollessa arvo 1). Jos kynnysarvo asetetaan prosenttiosuutena kokonaisuudesta, jaetaan tavoiteltu prosentti 100: lla (20 prosentin kynnysarvo olisi 0,2).

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Kaikki viipaleet pienempi kuin tämä kynnys on yhdistetty yhdeksi ”Muut” siivu, ja yhteenlaskettu arvo kaikkien viipaleiksi alle kynnysarvon.

Lataus

google.charts.load paketin nimi on "corechart".,

 google.charts.load("current", {packages: });

visualisointi on luokan nimi on google.visualization.PieChart.

 var visualization = new google.visualization.PieChart(container);

tietomuoto

rivit: jokainen taulukon rivi edustaa siivua.

Sarakkeet:

Asetukset

Nimi
taustaväriä

taustaväri tärkein alue kaavio. Voi olla joko yksinkertainen HTML väri merkkijono, esimerkiksi: 'red' tai '#00cc00', tai esine, jolla on seuraavat ominaisuudet.,

– Tyyppi: string tai esine
Oletus: ’valkoinen’
taustaväriä.stroke

the color of the chart border, as an HTML color string.

– Tyyppi: string
Oletus: ’#666’
taustaväriä.strokeWidth

rajaleveys, pikseleinä.

Tyyppi: numero
Oletus: 0
taustaväriä.täytä

kaavion täyttöväri HTML-värisenä merkkijonona.,

– Tyyppi: string
Oletus: ’valkoinen’
chartArea

objektin jäsenten kanssa määrittää sijoitus ja koko kartta-alue (jossa kartan itsessään on piirretty, ilman akselia ja legendoja). Kahta muotoa tuetaan: lukua tai lukua, jota seuraa %. Yksinkertainen luku on arvo pikseleinä; luku, jota seuraa%, on prosentti. Esimerkki: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tyyppi: objekti
Oletus: null
chartArea.backgroundColor
Kartoitusalueen taustaväri., Kun merkkijono on käytetty, se voi olla joko hex merkkijono (esim., ’#fdc’) tai englanti värin nimi. Kun esine on käytetty seuraavia ominaisuuksia voidaan edellyttäen, että:
  • stroke: väri, edellyttäen, hex merkkijono tai englanniksi värin nimi.
  • strokeWidth: jos edellyttäen, kiinnittää reunus kaavion alue annetaan leveys (ja väri stroke).
– Tyyppi: string tai esine
Oletus: ’valkoinen’
chartArea.left

kuinka kauas piirretään kaavio vasemmalta rajalta.,

Tyyppi: numero tai merkkijono
Oletus: autom.
chartArea.top

kuinka pitkälle kaavion voi piirtää ylärajasta.

Tyyppi: numero tai merkkijono
Oletus: autom.
chartArea.leveys

Karttapinta-alan leveys.

Tyyppi: numero tai merkkijono
Oletus: autom.
chartArea.korkeus

Karttapinta-alan korkeus.

Tyyppi: numero tai merkkijono
Oletus: autom.
värit

värit käyttää kaavion osia., Joukko merkkijonoja, joissa jokainen elementti on HTML-värinen merkkijono, esimerkiksi: colors:.

Tyyppi: Joukko jouset
Oletus: oletus värit
enableInteractivity

Onko kaavio heittää käyttäjä-pohjainen tapahtumia tai reagoi käyttäjän toimia. Jos false, kaavio ei heittää ”valitse” tai muita vuorovaikutukseen perustuvia tapahtumia (mutta heittää valmis tai virhe tapahtumia), ja ei näytä hovertext tai muuten muuttaa riippuen käyttäjä syöttää.,

Tyyppi: boolean
Oletus: true
fonttikoko

oletuksena fontin koko pikseleinä, kaikki teksti kaaviossa. Voit ohittaa tämän tiettyjen kaavioelementtien ominaisuuksien avulla.

Tyyppi: numero
Oletus: automaattinen
fontName

oletuksena font face kaikki teksti kaaviossa. Voit ohittaa tämän tiettyjen kaavioelementtien ominaisuuksien avulla.

– Tyyppi: string
Oletus: ’Arial’
forceIFrame

Piirtää kaavion sisällä inline frame., (Huomaa, että IE8: ssa tämä vaihtoehto jätetään huomiotta; kaikki IE8-kaaviot piirretään I-kehyksiin.)

Tyyppi: boolean
– Oletusarvo: false
korkeus

Korkeus kaavio, pikseleinä.

Tyyppi: numero
Oletus: korkeus sisältävä elementti
is3D

Jos true, näytetään kolmiulotteinen kaavio.

Tyyppi: boolean
– Oletusarvo: false
legenda

objektin jäsenten kanssa määrittää eri osa legenda., Voit määrittää ominaisuuksia tämän objektin, voit käyttää esine kirjaimellinen merkintä, kuten kuvassa:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tyyppi: objekti
Oletus: null
legenda.linjaus

legendan linjaus. Voi olla jokin seuraavista:

  • ”start” – linjassa legendalle osoitetun alueen alkuun.
  • ”keskusta” – keskinen tarulle varatulla alueella.
  • ” end ” – linjassa legendalle myönnetyn alueen loppuun.,

Start, center ja end ovat suhteessa legendan tyyliin — pysty-tai vaakatasossa–. Esimerkiksi ”oikea” legenda, ”start” ja ” end ”ovat ylhäällä ja alhaalla, vastaavasti, sillä” top ”legenda,” start ” ja ” end ” olisi vasemmalle ja oikealle alueella, vastaavasti.

oletusarvo riippuu legendan asemasta. ’Bottom’ legends, oletusarvo on ’center’; muut legends oletus’start’.

– Tyyppi: string
Oletus: automaattinen
legenda.sija

legendan asema., Voi olla yksi seuraavista:

  • ’pohja’ – Näyttää selitteen kaavion alla.
  • ”labeled” – piirtää viivoja, jotka yhdistävät viipaleita niiden data-arvoihin.
  • ”left” – Näyttää The legend left of the chart.
  • ”none” – näyttää ei legendaa.
  • ”right” – näyttää listan legendaarisen oikean.
  • ” top ” – näyttää legendaa kaavion yläpuolella.
– Tyyppi: string
Oletus: ’oikea’
legenda.maxlines

legendan rivien enimmäismäärä. Aseta tämä numero suurempi kuin yksi lisätä rivejä legenda., Huomautus: tarkka logiikka käytetään määrittämään todellinen määrä linjat renderoitu on vielä muutoksessa.

Tämä vaihtoehto toimii tällä hetkellä vain kun legenda.asento on ”ylin”.

Tyyppi: numero
Oletus: 1
legenda.textStyle

esine, joka määrittää legendaarisen tekstityylin. Esine on tätä muotoa:

{ color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } 

color voi olla mikä tahansa HTML väri merkkijono, esimerkiksi: 'red' tai '#00cc00'. Katso myös fontName ja fontSize.,

Tyyppi: objekti
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
leipäläpi

Jos välillä 0 ja 1, näyttää donitsi kaavio. Reiän säde on number kertaa kaavion säde.

Tyyppi: numero
Oletus: 0
pieSliceBorderColor

väri siivu rajoja. Sovelletaan vain, kun kaavio on kaksiulotteinen.,

– Tyyppi: string
Oletus: ’valkoinen’
pieSliceText

sisältö teksti näkyy siivu. Voi olla yksi seuraavista:

  • ’osuus’ – osuus siivu koko yhteensä.
  • ”arvo” – siivun kvantitatiivinen arvo.
  • ”label” – siivun nimi.
  • ”none” – tekstiä ei näy.
– Tyyppi: string
Oletus: ’prosenttiosuus’
pieSliceTextStyle

objekti, joka määrittää siivu tekstin tyyli., Esine on tätä muotoa:

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

color voi olla mikä tahansa HTML väri merkkijono, esimerkiksi: 'red' tai '#00cc00'. Katso myös fontName ja fontSize.

Tyyppi: objekti
Default: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

– kulma, asteina, kiertää kaavion. Oletus 0 suunnistaa ensimmäisen siivun vasenta reunaa suoraan ylöspäin.,

Tyyppi: numero
Default: 0
reverseCategories

Jos true, piirretään viipaleiksi vastapäivään. Oletuksena on vetää myötäpäivään.

Tyyppi: boolean
– Oletusarvo: false
pieResidueSliceColor

Väri yhdistelmä siivu, joka pitää kaikki viipaleet alla sliceVisibilityThreshold.,

– Tyyppi: string
Oletus: ’#ccc’
pieResidueSliceLabel

etiketti yhdistelmä siivu, joka pitää kaikki viipaleet alla sliceVisibilityThreshold.

– Tyyppi: string
Oletus: ”Muu”
viipaleiksi

joukko esineitä, jokainen kuvataan muotoa vastaava siivu piirakka. Käyttää default-arvot siivu, määritä tyhjä objekti (eli {}). Jos siivua tai arvoa ei ole määritelty, käytetään globaalia arvoa., Jokainen esine tukee seuraavia ominaisuuksia:

  • color – väri käyttää tähän siivu. Määritä voimassa oleva HTML-värijono.
  • offset – Miten pitkälle erillinen siivu muusta piirakka, 0.0 (ei ollenkaan) 1.0 (piirakka on säde).
  • textStyle – Ohittaa maailmanlaajuisten pieSliceTextStyle tämän siivu.,

Voit määrittää joko joukko esineitä, joista jokainen koskee siivu järjestyksessä, tai voit määrittää objektin, jossa jokainen lapsi on numeerinen avain, joka osoittaa, mistä viipaloi se koskee. Esimerkiksi seuraavat kaksi ilmoitukset ovat identtiset, ja julistaa ensimmäinen siivu mustaa ja neljäs punainen:

slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} 
Tyyppi: Joukko esineitä, tai esine, jossa on sisäkkäisiä objekteja
Default: {}
sliceVisibilityThreshold

murto-arvon piirakka, alla joka siivu ei näytä erikseen., Kaikki viipaleet, jotka eivät ole läpäisseet tämä kynnys on yhdistetty yhden ”Muu” viipale, jonka koko on summa kaikkien niiden koot. Oletuksena ei ole näyttää erikseen mitään viipaletta, joka on pienempi kuin puoli astetta.

// Slices less than 25% of the pie will be// combined into an "Other" slice.sliceVisibilityThreshold: .25 
Tyyppi: numero
Oletus: Puoli astetta (.5/360 tai 1/720 tai .0014)
nimi

Teksti, joka näkyy kaavion yläpuolella.

– Tyyppi: string
Oletus: ei nimi
titleTextStyle

objekti, joka määrittää nimikkeen, tekstin tyyli., 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., Voit määrittää ominaisuuksia tämän objektin, voit käyttää esine kirjaimellinen merkintä, kuten kuvassa:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tyyppi: objekti
Oletus: null
tooltip.ignoreBounds

Jos asetuksena on true mahdollistaa piirustus vihjeet virrata ulkopuolella rajat kuvio puolelta.

huomautus: Tämä koskee vain HTML-työkaluvihjeitä. Jos tämä on käytössä SVG tooltips, kaikki ylivuoto ulkopuolella kaavion rajoja rajataan. Katso tarkemmat tiedot Tooltip-sisällön räätälöinnistä.,

Tyyppi: boolean
– Oletusarvo: false
tooltip.isHtml

jos se on asetettu todeksi, käytä HTML-renderöityjä (eikä SVG-renderoituja) työkaluvihjeitä. Katso tarkemmat tiedot Tooltip-sisällön räätälöinnistä.

Huomautus: muokkausta HTML-tooltip sisällön kautta tooltip-sarake tietoja rooli ei tue Kupla Kaavio visualisointi.

Tyyppi: boolean
– Oletusarvo: false
tooltip.showColorCode

Jos totta, näyttää värillisiä neliöitä vieressä siivu tietoa tooltip.,

Tyyppi: boolean
– Oletusarvo: false
tooltip.teksti

Mitä tietoja näytetään, kun käyttäjä leijuu pie siivu. Seuraavat arvot ovat tuettuja:

  • ”molemmat” – Näytä sekä siivun itseisarvo että kokonaisuuden prosenttiosuus.
  • ”arvo” – Näytä vain siivun itseisarvo.
  • ”prosenttiosuus” – Näytä vain kokonaisuuden prosenttiosuus, jota siivu edustaa.
– Tyyppi: string
Oletus: ’molemmat’
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

käyttäjän vuorovaikutus, joka aiheuttaa tooltip näytetään:

  • ”painopiste” – tooltip tulee näkyviin, kun käyttäjä leijuu elementti.
  • ”none” – työkalutoppia ei näytetä.
  • ”selection” – työkaluvihje näkyy, kun käyttäjä valitsee elementin.
– Tyyppi: string
Oletus: ”painopiste”
leveys

Leveys kaavio, pikseleinä.,

Tyyppi: numero
Oletus: leveys sisältävä elementti

Menetelmiä

Tapa
draw(data, options)

Piirtää kaavion. Kaavio hyväksyy edelleen menetelmä puhelut vain, kun readytapahtuma on ammuttu. Extended description.

paluuarvon Tyyppi: ei
getAction(actionID)

Palaa tooltip toiminnan kohde pyydetyt actionID.,

paluuarvon Tyyppi: object
getBoundingBox(id)

Palauttaa objektin, joka sisältää vasen, ylhäällä, leveys, ja korkeus kaavion elementti id., Muoto id ei ole vielä dokumentoitu (he paluu arvot event handlers), mutta tässä muutamia esimerkkejä:

var cli = chart.getChartLayoutInterface();
Korkeus kaavion alue cli.getBoundingBox('chartarea').height Leveys kolmannen bar ensimmäisessä sarjassa baari tai sarakkeen kaavion cli.getBoundingBox('bar#0#2').width Rajaava laatikko viides kiila ympyräkaavio cli.getBoundingBox('slice#4') Bounding box kaavion tiedot pystysuora (esim. sarake) kaavio: cli.getBoundingBox('vAxis#0#gridline') Rajaava ruutuun kaavion tiedot horisontaalinen (esim.,, bar) kaavio: cli.getBoundingBox('hAxis#0#gridline')

Arvot ovat suhteessa säiliön kaavion. Soita tähän, kun kaavio on piirretty.

paluuarvon Tyyppi: object
getChartAreaBoundingBox()

Palauttaa objektin, joka sisältää vasen, ylhäällä, leveys, ja korkeus kaavion sisältöä (eli, ilman tarroja ja legenda):

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

Arvot ovat suhteessa säiliön kaavion. Soita tähän, kun kaavio on piirretty.

paluuarvon Tyyppi: object
getChartLayoutInterface()

Palauttaa objektin, joka sisältää tietoja näytön sijoittaminen kaavion ja sen elementtejä.,

seuraavia menetelmiä voidaan kutsua palautetun kohde:

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

Soita tämän jälkeen kaavio on piirretty.

paluuarvon Tyyppi: object
getHAxisValue(position, optional_axis_index)

Palauttaa loogisen vaaka-arvo position, joka on offset kaavion kontin vasempaan reunaan. Voi olla negatiivinen.,

esimerkki: .

soita tähän, kun kaavio on arvottu.

paluuarvon Tyyppi: numero
getImageURI()

Palauttaa kaavion sarjoitettu kuin kuvan URI.

soita tähän, kun kaavio on arvottu.

Katso PNG-karttojen Tulostaminen.

paluuarvon Tyyppi: string
getSelection()

Palauttaa joukko valitun kaavion yhteisöjä. Valittavissa olevat kokonaisuudet ovat viipaleita ja legendamerkintöjä. Tähän kaavioon voidaan milloin tahansa valita vain yksi kokonaisuus., Extended description .

paluuarvon Tyyppi: Array valinta elementtejä
getVAxisValue(position, optional_axis_index)

Palauttaa loogisen pystysuora arvo position, joka on offset kaavion säiliön yläreuna. Voi olla negatiivinen.

Esimerkki: chart.getChartLayoutInterface().getVAxisValue(300).

soita tähän, kun kaavio on arvottu.

paluuarvon Tyyppi: numero
getXLocation(position, optional_axis_index)

Palaa ruudun x-koordinaatti position suhteessa kaavio on kontti.,

Esimerkki: chart.getChartLayoutInterface().getXLocation(400).

soita tähän, kun kaavio on arvottu.

paluuarvon Tyyppi: numero
getYLocation(position, optional_axis_index)

Palaa ruudun y-koordinaatti position suhteessa kaavio on kontti.

Esimerkki: chart.getChartLayoutInterface().getYLocation(300).

soita tähän, kun kaavio on arvottu.

paluuarvon Tyyppi: numero
removeAction(actionID)

Poistaa tooltip toiminta pyydetyt actionID kaavion.,

paluuarvon Tyyppi: none
setAction(action)

Asettaa tooltip toimet, jotka suoritetaan, kun käyttäjä napsauttaa toimintaa tekstiä.

setAction menetelmä ottaa olion toimintaparametrikseen. Tämä esine olisi täsmennettävä 3 ominaisuudet: id— TUNNUS toiminto on asetettu, text —teksti, joka näkyy tooltip toimintaa, ja action — toiminto, joka pitäisi ajaa, kun käyttäjä napsauttaa toimintaa tekstiä.,

kaikki tooltip toimet tulisi asettaa ennen soittamalla kaavion draw() menetelmä. Laajennettu kuvaus.

paluuarvon Tyyppi: none
setSelection()

Valitsee tietyn kaavion yhteisöjä. Peruuttaa aiemman valinnan. Valittavissa olevat kokonaisuudet ovat viipaleita ja legendamerkintöjä. Tähän kaavioon voidaan valita kerrallaan vain yksi kokonaisuus. Extended description .,

paluuarvon Tyyppi: ei
clearChart()

Poistaa kaavio, ja vapauttaa kaikki sen varat.

paluuarvon Tyyppi: ei

Tapahtumat

lisätietoja siitä, miten käyttää nämä tapahtumat, ks. Perus-Vuorovaikutteisuus -, Käsittely-Tapahtumia, ja Ampumisen Tapahtumia.

Nimi
click

Potkut, kun käyttäjä napsauttaa kaavion., Voidaan käyttää tunnistamaan, kun otsikko, tietoelementit, legenda merkinnät, akselit, gridlines, tai tarrat napsautetaan.

Ominaisuudet: targetID
error

Potkut, kun virhe tapahtuu, kun yrität tehdä kaavion.

Ominaisuudet: id, viesti
onmouseover

Potkut, kun käyttäjä hiiret yli visuaalinen kokonaisuus. Siirtää vastaavan taulukkoelementin rivi-ja sarakeindeksit takaisin. Siivu tai legendan merkintä korreloi datataulukon rivin kanssa (sarakkeen indeksi on null).,

Ominaisuudet: rivi, sarake
onmouseout

Potkut, kun käyttäjä hiiret päässä visuaalinen kokonaisuus. Siirtää vastaavan taulukkoelementin rivi-ja sarakeindeksit takaisin. Siivu tai legendan merkintä korreloi datataulukon rivin kanssa (sarakkeen indeksi on null).

Ominaisuudet: rivi, sarake
ready

kaavio on valmis ulkoiseen metodikutsuja., Jos haluat vuorovaikutuksessa kartan, ja soita menetelmiä, kun voit tehdä sen, sinun pitäisi perustaa kuuntelija tähän tapahtumaan ennen kuin soitat draw menetelmä, ja soittaa heille vasta sen jälkeen, kun tapahtuma oli potkut.

Ominaisuudet: ei mitään
select

Potkut, kun käyttäjä napsauttaa visuaalinen kokonaisuus. Jos haluat tietää, mitä on valittu, soita getSelection().

Ominaisuudet: ei mitään

Tietoja Politiikka

Kaikki koodi ja tiedot käsitellään ja tulostetaan selaimessa., Tietoja ei lähetetä millekään palvelimelle.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *