Welcome to Our Website

– Visualisering: Kakediagram

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 is3Dvalg; 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: 'red' eller '#00cc00', eller et objekt med følgende egenskaper.,

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

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:
  • stroke: farge, gitt som en hex streng eller engelsk farge navn.
  • strokeWidth: hvis tilgjengelig, trekker en ramme rundt diagrammet området av gitt bredde (og med fargen på stroke).
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: colors:.

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:

  • ‘start’ – Justert til starten av området som er tildelt for legenden.
  • ‘center’ – Sentrert i området som er tildelt for legenden.
  • ‘end’ – Linje til slutten av det området som er tildelt for legenden.,

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:

  • ‘bunnen’ – Viser legenden under diagrammet.
  • ‘merket’ – Trekker linjer som kobler skiver til sine data verdier.
  • ‘venstre’ – Viser legend til venstre i diagrammet.
  • ‘none» – Viser ingen legende.
  • «høyre» – Viser legend til høyre i figuren.
  • ‘top’ – Viser legend over diagrammet.
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> } 

color kan være en hvilken som helst HTML-farge streng, for eksempel: 'red' eller '#00cc00'. Se også fontName og fontSize.,

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 number ganger radius av diagrammet.

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:

  • ‘prosent’ – andelen av stykket størrelse ut av total.
  • ‘verdi’ – Den kvantitative verdi av sektoren.
  • ‘label’ – navnet på skive.
  • ‘ingen’ – tekst Ikke vises.
Type: string
Standard: ‘prosent’
pieSliceTextStyle

Et objekt som angir stykke tekst stil., Objektet har dette formatet:

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

color kan være en hvilken som helst HTML-farge streng, for eksempel: 'red' eller '#00cc00'. Se også fontName og fontSize.

Type: object
Standard: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
pieStartAngle

vinkelen i grader, for å rotere kartet av. Standard av 0 vil orientere den venstre kanten av den første skive direkte opp.,

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., {}). Hvis en skive eller en verdi som ikke er spesifisert, vil den globale verdien vil bli brukt., Hvert objekt støtter følgende egenskaper:

  • color – fargen du vil bruke for denne sektoren. Angi en gyldig HTML farge strengen.
  • offset – Hvor langt er å skille skive fra resten av kaken, fra 0,0 (ikke i det hele tatt) til 1,0 (kaken er radius).
  • textStyle Overstyrer den globale pieSliceTextStyle for denne sektoren.,

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 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., 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 true, tillater tegning av verktøytips å strømme utenfor rammene av diagrammet på alle sider.

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:

  • ‘begge’ – Vise både den absolutte verdien av skive og andelen av det hele.
  • ‘verdi’ – Viser bare den absolutte verdien av skive.
  • ‘prosent’ – Viser bare andelen av hele representert av sektoren.
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 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

bruker-interaksjon som fører til at verktøylinjen skal vises i:

  • ‘fokus’ – verktøytipset vises når brukeren svever over elementet.
  • ‘ingen’ – verktøytips vil ikke bli vist.
  • ‘utvalg’ – verktøytipset vises når brukeren velger elementet.
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 readyarrangementet er avfyrt. Extended description.

gå Tilbake Type: none
getAction(actionID)

Returnerer verktøytips action-objekt med den forespurte actionID.,

gå Tilbake Type: object
getBoundingBox(id)

Returnerer et objekt som inneholder den venstre, topp, bredde og høyde av diagram element id., Formatet for id er ennå ikke dokumentert (de er returnere verdier av event-handlere), men her er noen eksempler:

var cli = chart.getChartLayoutInterface();
Høyde av diagramområde cli.getBoundingBox('chartarea').height Bredden av den tredje bar i første rekke en bar eller kolonne chart cli.getBoundingBox('bar#0#2').width markeringsrammen av den femte kile av et kakediagram cli.getBoundingBox('slice#4') Markeringsrammen av kartdata av en vertikal (f.eks., kolonne) diagram: cli.getBoundingBox('vAxis#0#gridline') markeringsrammen av kartdata til en horisontal (f.eks., bar) diagram: cli.getBoundingBox('hAxis#0#gridline')

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

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

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:

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

Ring til dette etter at diagrammet er trukket.

gå Tilbake Type: object
getHAxisValue(position, optional_axis_index)

Returnerer den logiske horisontal verdi på position, som er en forskyvning fra kartet beholder sin venstre kant. Kan være negativ.,

Eksempel: chart.getChartLayoutInterface().getHAxisValue(400).

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

gå Tilbake Type: Utvalg av utvalget elementer
getVAxisValue(position, optional_axis_index)

Returnerer den logiske vertikal verdi på position, som er en forskyvning fra kartet beholder øverste kanten. Kan være negativ.

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

Ring til dette etter at diagrammet er trukket.

gå Tilbake Type: antall
getXLocation(position, optional_axis_index)

Returnerer tv med x-koordinat for position i forhold til diagrammet beholderen.,

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

Ring til dette etter at diagrammet er trukket.

gå Tilbake Type: antall
getYLocation(position, optional_axis_index)

Returnerer skjermen y-koordinat for position i forhold til diagrammet beholderen.

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

Ring til dette etter at diagrammet er trukket.

gå Tilbake Type: antall
removeAction(actionID)

Fjerner verktøytips handling med den forespurte actionID fra diagrammet.,

Tilbake, Skriv: none
setAction(action)

Angir et verktøytips handling som skal utføres når brukeren klikker på handling tekst.

setAction metoden tar et objekt som sin handling parameter. Dette objektet må spesifisere 3 egenskaper: id— ID-en av de tiltak som blir satt, text —teksten som skal vises i verktøytips for handlingen, og action — funksjonen som skal kjøres når en bruker klikker på handling tekst.,

alle verktøytips tiltak bør settes før kall diagram draw() metode. Utvidet beskrivelse.

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

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 draw metode, og kaller dem bare etter hendelsen ble utløst.

Egenskaper: ingen
select

Sparken når brukeren klikker en visuell enhet. Å vite hva som har blitt valgt, ring getSelection().

Egenskaper: ingen

Data for Personvern

All kode og data er bearbeidet og gjengitt i nettleseren., Ingen data er sendt til en server.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *