Oversikt
Et kakediagram som er gjengitt i nettleser med SVG-eller VML. Viser verktøytips når du holder markøren over skiver.,
Eksempel
å Lage en 3D Pie Chart
Hvis du vil angi is3D
alternativ til true
, yourpie diagram vil bli trukket ut som om den har tre dimensjoner:
is3D
er false
standard, så her er vi eksplisitt sette den til true
:
Gjør en Donut Chart
En smultring-diagram er et kakediagram med et hull i midten., Youcan lage donut diagrammer med pieHole
valg:
pieHole
alternativ bør stilles til et tall mellom 0 og 1, som svarer til forholdet mellom radiene mellom hullet og thechart. Tall mellom 0,4 og 0,6 vil se best ut på de fleste listene.Verdier som er lik eller større enn 1 vil bli ignorert, og en verdi på 0will helt stenge din piehole.
Du kan ikke kombinere pieHole
og is3D
valg; hvis du gjør det, pieHole
vil bli ignorert.,
vær Oppmerksom på at Google Kart forsøker å plassere etiketten så nær thecenter av stykket som mulig. Hvis du har en donut diagram med justone skive, midten av stykket kan falle i donut hull. Inthat tilfelle, kan du endre farge på etiketten:
var options = { pieHole: 0.5, pieSliceTextStyle: { color: 'black', }, legend: 'none' };
Roterende et Kakediagram
som standard, sektordiagrammer begynne med den venstre kanten av den første slicepointing rett opp. Du kan endre det med pieStartAngle
valg:
Her, vi vil rotere kartet klokken 100 grader med en optionof pieStartAngle: 100
., (Så er valgt fordi det particularangle skjer for å gjøre den «italienske» etiketten passer i sektoren.)
Eksploderende en Skive
Du kan skille kake stykker fra resten av diagrammet med offset
egenskap av slices
valg:
for Å skille et stykke, opprette en slices
objekt og tilordne riktige skive nummer en offset
mellom 0 og 1., Nedenfor, kan vi tilordne gradvis større kvoter til å skiver 4 (Gujarati), 12 (Marathi), 14 (Oriya) og 15 (Punjabi):
Fjerne Skiver
Hvis du vil utelate et stykke, endre colorto 'transparent'
:
Vi har også brukt pieStartAngle
for å rotere kartet 135degrees, pieSliceText
for å fjerne teksten fra theslices, og tooltip.trigger
for å deaktivere verktøytips:
Skive Synlighet Terskelen
Du kan angi en verdi som terskelen for et kake stykke å gjengi individuelt., Denne verdien tilsvarer en brøkdel av diagram (med hele diagrammet være av verdi 1). For å sette denne grensen som en prosentandel av hele, dividere andelen som er ønsket av 100 (20% grensen, vil verdien ville være 0.2).
sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Noen skiver mindre enn denne grensen vil bli kombinert i en enkelt «Andre» slice, og vil ha den samlede verdien av alle skiver under terskelen.
Mates
google.charts.load
pakkenavnet er "corechart"
.,
google.charts.load("current", {packages: });
visualisering klasse navn er google.visualization.PieChart
.
var visualization = new google.visualization.PieChart(container);
Data-Format
Rader: Hver rad i tabellen representerer en skive.
Kolonner:
Konfigurasjon Alternativer
Navn | |
---|---|
backgroundColor |
bakgrunnsfarge for den viktigste delen av diagrammet. Kan være enten en enkel HTML-farge streng, for eksempel: Type: string eller objektet
Standard: ‘hvit’
|
backgroundColor.hjerneslag |
farge på kartet grensen, som en HTML-farge-streng. Type: string
Standard: ‘#666’
|
backgroundColor.strokeWidth |
The border bredde, i punkter. Type: antall
Standard: 0
|
backgroundColor.fyll |
diagrammet fylle farge, som en HTML-farge-streng., Type: string
Standard: ‘hvit’
|
chartArea |
Et objekt med medlemmer til å konfigurere plassering og størrelse på diagrammet området (hvor selve diagrammet er trukket, unntatt akse, legender). To formater som støttes: et tall, eller et tall etterfulgt av %. Et enkelt tall, er en verdi i punkter; et tall etterfulgt av % er en prosentandel. Eksempel: Type: object
Standard: null
|
chartArea.backgroundColor |
Diagram området bakgrunnsfarge., Når en streng er brukt, kan det være enten en hex streng (f.eks., ‘#fdc’) eller en engelsk farge navn. Når et objekt er brukt, følgende egenskaper kan være gitt:
Type: string eller objektet
Standard: ‘hvit’
|
chartArea.venstre |
Hvor langt til å tegne diagrammet fra venstre kant., Type: antall eller string
Standard: automatisk
|
chartArea.toppen |
Hvor langt for å tegne kart fra øverste kant. Type: antall eller string
Standard: automatisk
|
chartArea.bredde |
Diagram området bredde. Type: antall eller string
Standard: automatisk
|
chartArea.høyde |
Diagram område høyde. Type: antall eller string
Standard: automatisk
|
farger |
fargene til bruk for diagramelementer., En tabell av strenger, hvor hvert element er en HTML-farge streng, for eksempel: Type: tabell med strenger
Standard: standard farger
|
enableInteractivity |
Om diagrammet kaster bruker-baserte hendelser eller reagerer på brukermedvirkning. Hvis verdien er false, vil diagrammet ikke kaste «velg» eller annen interaksjon basert på hendelser (men vil kaste klar feil eller hendelsene), og vil ikke vise hovertext eller på annen måte endrer seg avhengig av brukerens input., Type: boolean
Standard: true
|
fontstørrelse |
standard skriftstørrelse, i punkter, av all tekst i diagrammet. Du kan overstyre dette ved å bruke egenskaper for bestemte diagramelementer. Type: antall
Standard: automatisk
|
skriftnavn |
standard font ansiktet for all tekst i diagrammet. Du kan overstyre dette ved å bruke egenskaper for bestemte diagramelementer. Type: string
Standard: ‘Arial’
|
forceIFrame |
Trekker diagrammet inne i en innebygd ramme., (Merk at på IE8, vil dette alternativet ignoreres; alle IE8-kart er tegnet i i-frames.) Type: boolean
Standard: false
|
høyde |
Høyde på kartet, i punkter. Type: antall
Standard: høyde som inneholder elementet
|
is3D |
Hvis det er sant, viser en tredimensjonal figur. Type: boolean
Standard: false
|
legenden |
Et objekt med medlemmer til å konfigurere ulike aspekter av legenden., For å angi egenskaper for dette objektet, kan du bruke objekt bokstavelig notasjon, som vist her: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Type: object
Standard: null
|
legende.justering |
Justering av legenden. Kan være ett av følgende:
Starten, midten og slutten er i forhold til stil — vertikal eller horisontal — av legenden. For eksempel, i en ‘riktig’ legende ‘start’ og ‘end’ er på toppen og bunnen, henholdsvis; for en ‘top’ legende ‘start’ og ‘end’ ville være på venstre og høyre på området, henholdsvis. standard verdien er avhengig av legend ‘ s posisjon. For ‘bunnen’ legender, standard er ‘center’; andre legender standard til ‘start’. Type: string
Standard: automatisk
|
legende.posisjon |
Posisjon av legenden., Kan være ett av følgende:
Type: string
Standard: ‘høyre’
|
legende.maxLines |
Maksimalt antall linjer i tegnforklaringen. Sett denne til et nummer større enn man å legge til linjer til din legende., Merk: nøyaktig logikk brukes til å fastslå det faktiske antall linjer som er gjengitt er fortsatt i forandring. Dette alternativet som for øyeblikket fungerer bare når legende.stillingen er ‘toppen’. Type: antall
Standard: 1
|
legende.textStyle |
Et objekt som angir legenden tekst stil. Objektet har dette formatet: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> } Type: object
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieHole |
Hvis du mellom 0 og 1, som viser en donut diagram. Hullet har en radius lik Type: antall
Standard: 0
|
pieSliceBorderColor |
fargen på skive grenser. Gjelder bare når diagrammet er to-dimensjonale., Type: string
Standard: ‘hvit’
|
pieSliceText |
innholdet av teksten som vises på skive. Kan være ett av følgende:
Type: string
Standard: ‘prosent’
|
pieSliceTextStyle |
Et objekt som angir stykke tekst stil., Objektet har dette formatet: {color: <string>, fontName: <string>, fontSize: <number>} Type: object
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieStartAngle |
vinkelen i grader, for å rotere kartet av. Standard av Type: antall
Standard:
0 |
reverseCategories |
Hvis det er sant, trekker skiver mot klokken. Standard er å tegne med klokken. Type: boolean
Standard: false
|
pieResidueSliceColor |
Farge for kombinasjon skive som holder alle skiver nedenfor sliceVisibilityThreshold., Type: string
Standard: ‘#ccc’
|
pieResidueSliceLabel |
En etikett for kombinasjonen skive som holder alle skiver nedenfor sliceVisibilityThreshold. Type: string
Standard: ‘Andre’
|
skiver |
En rekke objekter, som hver beskriver formatet på tilsvarende skive i kaken. For å bruke standard-verdier for en slice, kan du angi en tom objektet (dvs.,
Du kan angi enten en array av objekter, som hver gjelder å skjære i den rekkefølgen som er gitt, eller du kan angi at et objekt der hvert barn har en numerisk tast som viser hvilket stykke det gjelder. For eksempel, følgende to uttalelser er identiske, og erklærer at den første skive som svart og den fjerde som red: slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} Type: Array av objekter, eller objekt med nestede objekter
Standard: {}
|
sliceVisibilityThreshold |
Den brøkdelen verdien av kaken, nedenfor som en skive vil ikke vise individuelt., Alle skiver som ikke har passert denne grensen vil bli kombinert til en enkelt «Andre» slice, hvis størrelse er summen av alle sine størrelser. Standard er å ikke vise individuelt noen skive som er mindre enn en halv grad. // Slices less than 25% of the pie will be// combined into an "Other" slice.sliceVisibilityThreshold: .25 Type: antall
Standard: en Halv grad (.5/360 eller 1/720 eller .0014)
|
tittel |
Teksten som skal vises over diagrammet. Type: string
Standard: ingen tittel
|
titleTextStyle |
Et objekt som angir tittelen tekst stil., 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., For å angi egenskaper for dette objektet, kan du bruke objekt bokstavelig notasjon, som vist her: {textStyle: {color: '#FF0000'}, showColorCode: true} Type: object
Standard: null
|
verktøytips.ignoreBounds |
Hvis Merk: Dette gjelder bare til HTML verktøytips. Hvis dette er aktivert med SVG verktøytips, eventuelle overløp utenfor diagrammet grensene vil bli beskåret. Se Tilpasse Verktøytips Innhold for mer informasjon., Type: boolean
Standard: false
|
verktøytips.isHtml |
Hvis satt til true, bruk HTML-rendret (snarere enn SVG-rendret) verktøytips. Se Tilpasse Verktøytips Innhold for mer informasjon. Merk: tilpasning av HTML verktøytips innhold via verktøytips kolonnen rolle er ikke støttes av den boblediagram visualisering. Type: boolean
Standard: false
|
verktøytips.showColorCode |
Hvis det er sant, viser fargede firkantene ved siden av skive informasjon i verktøytips., Type: boolean
Standard: false
|
verktøytips.tekst |
Hva slags informasjon som skal vises når brukeren holder musemarkøren over et kake stykke. Følgende verdier er støttet:
Type: string
Standard: ‘begge’
|
verktøytips.,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 |
bruker-interaksjon som fører til at verktøylinjen skal vises i:
Type: string
Standard: ‘fokus’
|
bredde |
Bredde på kartet, i punkter., Type: antall
Standard: bredde inneholder elementet
|
Metoder
Metode | |
---|---|
draw(data, options) |
Tegner kart. Diagrammet aksepterer videre metode anrop bare etter gå Tilbake Type: none
|
getAction(actionID) |
Returnerer verktøytips action-objekt med den forespurte gå Tilbake Type: object
|
getBoundingBox(id) |
Returnerer et objekt som inneholder den venstre, topp, bredde og høyde av diagram element
Verdier er relative til beholderen på kartet. Kalle dette etter at diagrammet er trukket. gå Tilbake Type: object
|
getChartAreaBoundingBox() |
Returnerer et objekt som inneholder den venstre, topp, bredde og høyde av diagrammet innhold (dvs., unntatt etiketter og legende):
Verdier er relative til beholderen på kartet. Kalle dette etter at diagrammet er trukket. gå Tilbake Type: object
|
getChartLayoutInterface() |
Returnerer et objekt som inneholder informasjon om den elektroniske plassering i diagrammet, og dens elementer., følgende metoder kan kalles på det returnerte objektet:
Ring til dette etter at diagrammet er trukket. gå Tilbake Type: object
|
getHAxisValue(position, optional_axis_index) |
Returnerer den logiske horisontal verdi på Eksempel: Ring til dette etter at diagrammet er trukket. gå Tilbake Type: antall
|
getImageURI() |
Returnerer figur serialisert som et bilde URI. Ring til dette etter at diagrammet er trukket. Se Skrive ut PNG-Diagrammer. gå Tilbake Type: string
|
getSelection() |
Returnerer en matrise av den valgte figur enheter. Valgbar enheter skiver og legenden oppføringer. For dette diagrammet, bare en enhet kan være valgt på et gitt øyeblikk., gå Tilbake Type: Utvalg av utvalget elementer
|
getVAxisValue(position, optional_axis_index) |
Returnerer den logiske vertikal verdi på Eksempel: Ring til dette etter at diagrammet er trukket. gå Tilbake Type: antall
|
getXLocation(position, optional_axis_index) |
Returnerer tv med x-koordinat for Eksempel: Ring til dette etter at diagrammet er trukket. gå Tilbake Type: antall
|
getYLocation(position, optional_axis_index) |
Returnerer skjermen y-koordinat for Eksempel: Ring til dette etter at diagrammet er trukket. gå Tilbake Type: antall
|
removeAction(actionID) |
Fjerner verktøytips handling med den forespurte Tilbake, Skriv:
none |
setAction(action) |
Angir et verktøytips handling som skal utføres når brukeren klikker på handling tekst. alle verktøytips tiltak bør settes før kall diagram Tilbake, Skriv:
none |
setSelection() |
Velger den angitte figur enheter. Avbryter alle tidligere valg. Valgbar enheter skiver og legenden oppføringer. For dette diagrammet, bare en enhet kan velges om gangen. gå Tilbake Type: none
|
clearChart() |
Tømmer diagram, og frigjør alle av sin tildelte ressurser. gå Tilbake Type: none
|
Arrangementer
For mer informasjon om hvordan du bruker disse hendelsene, kan du se Grunnleggende Interaktivitet, Håndtering av Hendelser, og Skyte Hendelser.
Navn | |
---|---|
click |
Sparken når brukeren klikker i diagrammet., Kan brukes til å identifisere når tittelen, data elementer, legend oppføringer, akser, rutenett, eller etiketter er klikket på. Egenskaper: targetID
|
error |
Sparken når det oppstår en feil når du forsøker å gjengi diagrammet. Egenskaper: id, melding
|
onmouseover |
Sparken når brukeren mus over en visuell enhet. Går tilbake rad og kolonne indekser av tilsvarende data tabell element. En skive eller legende oppføring korrelerer til en rad i data-tabellen (kolonne-indeksen er null)., Egenskaper: rad, kolonne
|
onmouseout |
Sparken når brukeren mus borte fra en visuell enhet. Går tilbake rad og kolonne indekser av tilsvarende data tabell element. En skive eller legende oppføring korrelerer til en rad i data-tabellen (kolonne-indeksen er null). Egenskaper: rad, kolonne
|
ready |
diagrammet er klart for ytre metode samtaler., Hvis du ønsker å samhandle med diagram, og kalle metoder når du tegne det, bør du sette opp en lytter for denne hendelsen før du ringer Egenskaper: ingen
|
select |
Sparken når brukeren klikker en visuell enhet. Å vite hva som har blitt valgt, ring Egenskaper: ingen
|
Data for Personvern
All kode og data er bearbeidet og gjengitt i nettleseren., Ingen data er sendt til en server.