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 is3D
valinnat; 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: – 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: 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ä:
– 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: 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, 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:
– 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> } 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 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:
– Tyyppi: string
Oletus: ’prosenttiosuus’
|
pieSliceTextStyle |
objekti, joka määrittää siivu tekstin tyyli., Esine on tätä muotoa: {color: <string>, fontName: <string>, fontSize: <number>} Tyyppi: objekti
Default:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieStartAngle |
– kulma, asteina, kiertää kaavion. Oletus 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
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 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 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:
– 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 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:
– 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 paluuarvon Tyyppi: ei
|
getAction(actionID) |
Palaa tooltip toiminnan kohde pyydetyt paluuarvon Tyyppi: object
|
getBoundingBox(id) |
Palauttaa objektin, joka sisältää vasen, ylhäällä, leveys, ja korkeus kaavion elementti
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):
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:
Soita tämän jälkeen kaavio on piirretty. paluuarvon Tyyppi: object
|
getHAxisValue(position, optional_axis_index) |
Palauttaa loogisen vaaka-arvo 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., paluuarvon Tyyppi: Array valinta elementtejä
|
getVAxisValue(position, optional_axis_index) |
Palauttaa loogisen pystysuora arvo Esimerkki: soita tähän, kun kaavio on arvottu. paluuarvon Tyyppi: numero
|
getXLocation(position, optional_axis_index) |
Palaa ruudun x-koordinaatti Esimerkki: soita tähän, kun kaavio on arvottu. paluuarvon Tyyppi: numero
|
getYLocation(position, optional_axis_index) |
Palaa ruudun y-koordinaatti Esimerkki: soita tähän, kun kaavio on arvottu. paluuarvon Tyyppi: numero
|
removeAction(actionID) |
Poistaa tooltip toiminta pyydetyt paluuarvon Tyyppi:
none |
setAction(action) |
Asettaa tooltip toimet, jotka suoritetaan, kun käyttäjä napsauttaa toimintaa tekstiä. kaikki tooltip toimet tulisi asettaa ennen soittamalla kaavion 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. 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 Ominaisuudet: ei mitään
|
select |
Potkut, kun käyttäjä napsauttaa visuaalinen kokonaisuus. Jos haluat tietää, mitä on valittu, soita Ominaisuudet: ei mitään
|
Tietoja Politiikka
Kaikki koodi ja tiedot käsitellään ja tulostetaan selaimessa., Tietoja ei lähetetä millekään palvelimelle.