Welcome to Our Website

visualisering: cirkeldiagram

oversigt

et cirkeldiagram, der gengives i Bro .seren ved hjælp af SVG eller VML. Viser værktøjstips, når du svæver over skiver.,

Eksempel

Gør en 3D Pie Chart

Hvis du indstiller is3D mulighed for at true, yourpie diagram vil blive udarbejdet, som om den har tre dimensioner:

is3D er false som standard, så her er vi udtrykkeligt indstiller den til true:

at Lave en Krans Chart

Et kransediagram er et cirkeldiagram med et hul i midten., Du kan oprette donut diagrammer med pieHole funktion:

pieHole indstilling sættes til et tal mellem 0and 1, svarer til forholdet mellem radier mellem hullet og thechart. Tal mellem 0,4 og 0,6 vil se bedst ud på de fleste diagrammer.Værdier lig med eller større end 1 vil blive ignoreret, og en værdi på 0vil helt lukke din piehole.

Du kan ikke kombinere pieHole og is3Dvalgmulighederne; hvis du gør det, vil pieHole blive ignoreret.,

Bemærk, at Google Charts forsøger at placere etiketten så tæt påcentrum af skiven som muligt. Hvis du har et donutdiagram med bareen skive, midten af skiven kan falde ind i donuthullet. Inthat tilfældet, skal du ændre farven på etiketten:

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

Roterende et Cirkeldiagram

Som standard, cirkeldiagrammer begynde med den venstre kant af den første slicepointing lige op. Du kan ændre dette med pieStartAngle funktion:

Her, vi rotere figuren med uret 100 grader med en optionof pieStartAngle: 100., (Så valgt fordi den særligevinkel sker for at få den “italienske” etiket til at passe inde i skiven.)

Eksploderende en Skive

Du kan adskille pie skiver fra resten af diagram med de offset ejet af slices funktion:

til At adskille en skive, opret en slices objekt og tildele den relevante skive nummer et offset mellem 0 og 1., Nedenfor, vil vi tildele gradvis større forskydninger til skiver 4 (Gujarati), 12 (Lwp), 14 (Dimensioner), og 15 (Punjabi):

Fjerner Skiver

for At udelade en del, skal du ændre colorto 'transparent':

Vi har også brugt pieStartAngle for at rotere kortet 135degrees, pieSliceText for at fjerne teksten fra theslices, og tooltip.trigger for at deaktivere værktøjstips:

Skive Synlighed Tærskel

Du kan indstille en værdi som tærskelværdi for et cirkeludsnit at gøre individuelt., Denne værdi svarer til en brøkdel af diagrammet (hvor hele diagrammet har værdi 1). For at indstille denne tærskel som en procentdel af helheden skal du dividere den ønskede procentdel med 100 (for en 20% tærskel ville værdien være 0, 2).

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

eventuelle skiver, der er mindre end denne tærskel, kombineres til en enkelt “anden” skive og vil have den kombinerede værdi af alle skiver under tærsklen.

Loading

google.charts.loadPakkenavn er"corechart".,

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

visualiseringens klassenavn er google.visualization.PieChart.

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

dataformat

rækker: hver række i tabellen repræsenterer en skive.

Kolonner:

Konfigurations-Indstillinger

skiver

Navn
backgroundColor

baggrundsfarven til det vigtigste område af diagrammet. Det kan enten være en simpel HTML-farve streng, for eksempel: 'red' eller '#00cc00', eller et objekt med følgende egenskaber.,

Type: streng eller objekt
standard: ‘hvid’
baggrundsfarve.stroke

farven på diagramkanten, som en HTML-farvestreng.

Type: string
Standard: ‘#666’
backgroundColor.stroke .idth

grænsen bredde, i Pi .els.

Type: nummer
standard: 0
baggrundsfarve.fyld

diagrammet Fyld farve, som en HTML farve streng.,

Type: string
Standard: ‘hvide’
chartArea

Et objekt med medlemmer til at konfigurere placeringen og størrelsen af diagramområdet (hvor selve diagrammet er udarbejdet, bortset fra aksen og sagn). To formater understøttes: et tal eller et tal efterfulgt af %. Et simpelt tal er en værdi i Pi .els; et tal efterfulgt af % er en procentdel. Eksempel: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Type: objekt
Standard: null
chartArea.baggrundsfarve
diagram område baggrundsfarve., Når en streng bruges, kan den enten være en he. – streng (f #’ # FDC’) eller et engelsk farvenavn. Når et objekt bruges, kan følgende egenskaber leveres:
  • stroke: farven, der leveres som en he. – streng eller engelsk farvenavn.
  • strokeWidth: hvis det er angivet, tegner en kant omkring diagramområdet for den givne bredde (og med farven på stroke).
Type: streng eller objekt
standard: ‘hvid’
chartArea.venstre

hvor langt at tegne diagrammet fra venstre kant.,

Type: nummer eller streng
standard: auto
chartArea.top

hvor langt at tegne diagrammet fra den øverste kant.

Type: nummer eller streng
standard: auto
chartArea.bredde

diagram område bredde.

Type: nummer eller streng
standard: auto
chartArea.højde

Chart område højde.

Type: nummer eller streng
standard: auto
farver

de farver, der skal bruges til diagramelementerne., En række strenge, hvor hvert element er en HTML-farvestreng, for eksempel: colors:.

Type: Array of strings
standard: standardfarver
enableInteractivity

om diagrammet kaster brugerbaserede begivenheder eller reagerer på brugerinteraktion. Hvis falsk, vil diagrammet ikke smide ‘select’ eller andre interaktion-baserede begivenheder (men vil kaste klar eller fejl begivenheder), og vil ikke vise hoverte .t eller på anden måde ændre afhængigt af brugerens input.,

Type: boolean
Standard: true
fontSize

standard skriftstørrelse, i pixels, af alle tekster i diagrammet. Du kan tilsidesætte dette ved hjælp af egenskaber for specifikke diagramelementer.

Type: nummer
standard: automatisk
fontName

standard skrifttype ansigt for al tekst i diagrammet. Du kan tilsidesætte dette ved hjælp af egenskaber for specifikke diagramelementer.

Type: string
Standard: ‘Arial’
forceIFrame

Trækker kortet inde i en inline frame., (Bemærk, at på IE8 ignoreres denne indstilling; alle IE8-diagrammer tegnes i i-rammer.)

Type: boolean
Standard: false
højde

Højde af diagrammet, i pixels.

Type: nummer
standard: højde af det indeholdende element
is3D

hvis det er sandt, vises et tredimensionelt diagram.

Type: boolean
Standard: false
legend

Et objekt med medlemmer til at konfigurere forskellige aspekter af den legende., Til at angive egenskaber for det objekt, du kan bruge objektet bogstavelig notation, som vist her:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Type: objekt
Standard: null
legend.tilpasning

tilpasning af legenden. Kan være et af følgende:

  • ‘start’ – justeret til starten af det område, der er tildelt til legenden.
  • ‘center’ – centreret i det område, der er tildelt til legenden.
  • ‘ende’ – justeret til slutningen af det område, der er tildelt til legenden.,

Start, center og end er i forhold til stilen-lodret eller vandret-af legenden. For eksempel, i en’ højre ‘legende,’ start ‘og’ ende ‘er øverst og nederst, henholdsvis; for en’ top ‘ legende,’ start ‘og’ ende ‘ ville være til venstre og højre for området, henholdsvis.

standardværdien afhænger af Legendens position. For’ bund ‘legender er standard ‘center’; andre legender standard til ‘start’.

Type: string
Standard: automatisk
legend.position

position af legenden., Kan være et af følgende:

  • ‘bottom’ – viser legenden under diagrammet.
  • ‘mærket’ – trækker linjer, der forbinder skiver til deres dataværdier.
  • ‘left’ – viser legenden til venstre for diagrammet.
  • ‘none’ – viser ingen legende.
  • ‘højre’ – viser legenden til højre for diagrammet.
  • ‘top’ – viser legenden over diagrammet.
Type: string
Standard: ‘højre’
legend.ma .lines

maksimalt antal linjer i legenden. Indstil dette til et tal større end et for at tilføje linjer til din legende., Bemærk: den nøjagtige logik, der bruges til at bestemme det faktiske antal gengivne linjer, er stadig i Flu..

denne indstilling fungerer i øjeblikket kun, når legend.position er ‘top’.

Type: nummer
Standard: 1
legende.te .tstyle

et objekt, der angiver legenden tekst stil. Objektet har dette format:

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

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

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

Hvis der mellem 0 og 1, der viser et kransediagram. Hullet med har en radius lig med number gange radius af diagrammet.

Type: nummer
standard: 0
pieSliceBorderColor

farven på skivekanterne. Gælder kun, når diagrammet er todimensionelt.,

Type: string
standard: ‘hvid’
pieslicete .t

Indholdet af teksten, der vises på skiven. Kan være et af følgende:

  • ‘procentdel’ – procentdelen af skivestørrelsen ud af det samlede antal.
  • ‘værdi’ – den kvantitative værdi af skiven.
  • ‘label’ – navnet på skiven.
  • ‘ingen’ – ingen tekst vises.
Type: string
Standard: ‘procent’
pieSliceTextStyle

Et objekt, der angiver skive sms-stil., Objektet har dette format:

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

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

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

Den vinkel i grader, for at rotere diagrammet. Standarden på 0 vil orientere den venstre kant af den første skive direkte op.,

Type: antal
Standard: 0
reverseCategories

Hvis det er sandt, trækker skiver mod uret. Standarden er at tegne med uret.

Type: boolean
Standard: false
pieResidueSliceColor

Farve til den kombination skive, der holder alle skiver nedenfor sliceVisibilityThreshold.,

Type: string
Standard: ‘#ccc’
pieResidueSliceLabel

En betegnelse for kombinationen skive, der holder alle skiver nedenfor sliceVisibilityThreshold.

Type: string
Standard: ‘andet’

en række objekter, der hver beskriver formatet for den tilsvarende skive i kagen. For at bruge standardværdier for en skive skal du angive et tomt objekt (dvs. {}). Hvis en skive eller en værdi ikke er angivet, vil den globale værdi blive brugt., Hvert objekt understøtter følgende egenskaber:

  • color – den farve, der skal bruges til denne skive. Angiv en gyldig HTML-farvestreng.
  • offset – Hvor langt til at adskille skive fra resten af kagen, fra 0,0 (slet ikke) til 1,0 (pie ‘ s radius).
  • textStyle – tilsidesætter den globale pieSliceTextStyle for denne skive.,

Du kan enten angive en række objekter, som hver især gælder for skiven i den angivne rækkefølge, eller du kan angive et objekt, hvor hvert barn har en numerisk nøgle, der angiver, hvilken skive den gælder for. For eksempel de følgende to erklæringer er ens, og erklærer, at den første skive, som sort, og den fjerde som rød:

slices: slices: {0: {color: 'black'}, 3: {color: 'red'}} 
Type: Array af objekter, eller objekt med indlejrede objekter
Standard: {}
sliceVisibilityThreshold

Den relativ værdi af kagen, nedenfor som en skive vil ikke blive vist individuelt., Alle skiver, der ikke har passeret denne tærskel, kombineres til en enkelt “anden” skive, hvis størrelse er summen af alle deres størrelser. Standard er ikke at vise individuelt nogen skive, der er mindre end en halv grad.

// Slices less than 25% of the pie will be// combined into an "Other" slice.sliceVisibilityThreshold: .25 
Type: nummer
standard: en halv grad (.5/360 eller 1/720 eller .0014)
Titel

tekst, der skal vises over diagrammet.

Type: string
Standard: ingen titel
titleTextStyle

Et objekt, der angiver titel 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., Til at angive egenskaber for det objekt, du kan bruge objektet bogstavelig notation, som vist her:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Type: objekt
Standard: null
værktøjstip.ignoreBounds

Hvis den er indstillet til true, tillader tegning af værktøjstip at flyde uden for grænserne af diagrammet på alle sider. bemærk: dette gælder kun for HTML-værktøjstips. Hvis dette er aktiveret med SVG tooltips, vil ethvert overløb uden for diagramgrænserne blive beskåret. Se tilpasning af værktøjstip-indhold for flere detaljer.,

Type: boolean
standard: falsk
værktøjstip.isHtml

Hvis den er indstillet til true, skal du bruge HTML-gengivet (snarere end SVG-gengivet) værktøjstips. Se tilpasning af værktøjstip-indhold for flere detaljer.

Bemærk: tilpasning af HTML tooltip indhold via tooltip kolonne data rolle understøttes ikke af Bubble Chart visualisering.

Type: boolean
standard: falsk
værktøjstip.sho .colorcode

Hvis det er sandt, skal du vise farvede firkanter ved siden af skiveinformationen i værktøjstipet.,

Type: boolean
standard: falsk
værktøjstip.tekst

hvilke oplysninger der skal vises, når brugeren svæver over en cirkelsnit. Følgende værdier understøttes:

  • ‘begge’ – viser både den absolutte værdi af skiven og procentdelen af helheden.
  • ‘værdi’ – Vis kun den absolutte værdi af skiven.
  • ‘procentdel’ – Vis kun procentdelen af det hele repræsenteret af skiven.
Type: string
Standard: ‘begge’
værktøjstip.,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

brugerinteraktionen, der får værktøjstippet til at blive vist:

  • ‘fokus’ – værktøjstippet vises, når brugeren svæver over elementet.
  • ‘none’ – værktøjstippet vises ikke.
  • ‘selection’ – værktøjstippet vises, når brugeren vælger elementet.
Type: string
Standard: ‘fokus’
bredde

Bredde af diagrammet, i pixels.,

Type: antal
Standard: bredde indeholder et element

Metoder

Metode
draw(data, options)

Trækker kortet. Diagrammet accepterer kun yderligere metodekald, efter atreadybegivenheden er fyret. Extended description.

Retur-Type: none
getAction(actionID)

Returnerer tooltip handling objekt med de ønskede actionID.,

Return Type: objekt
getBoundingBox(id)

Returnerer et objekt, der indeholder den venstre, top, bredde og højde af diagrammet element id., Formatet for id endnu ikke er dokumenteret (de er tilbage værdier af event-handlere), men her er nogle eksempler:

var cli = chart.getChartLayoutInterface();
Højde af diagramområdet cli.getBoundingBox('chartarea').height Bredde af den tredje bar i den første række af en bar eller kolonnediagram cli.getBoundingBox('bar#0#2').width boks i den femte kile af et cirkeldiagram cli.getBoundingBox('slice#4') Boks af diagrammet data for en lodret (fx, kolonne) diagram: cli.getBoundingBox('vAxis#0#gridline') omkransende Område af diagrammet data af en horisontal (fx,, bjælke) diagram: cli.getBoundingBox('hAxis#0#gridline')

værdier er i forhold til beholderen i diagrammet. Ring til dette, når diagrammet er tegnet.

returtype: object
getChartAreaBoundingBox()

Returnerer et objekt, der indeholder indholdets venstre, øverste, bredde og højde (dvs.,, bortset fra etiketter og legende):

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

Værdier er relative i forhold til beholderen af diagrammet. Ring til dette, når diagrammet er tegnet.

Return Type: objekt
getChartLayoutInterface()

Returnerer et objekt, der indeholder oplysninger om skærmens placering af diagrammet og dets elementer.,

følgende metoder kan kaldes på de returnerede objekt:

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

dette Opkald efter diagrammet tegnes.

Return Type: objekt
getHAxisValue(position, optional_axis_index)

Returnerer den logiske vandrette værdi på position, som er en forskydning fra container ‘ s venstre kant. Kan være negativ., eksempel: chart.getChartLayoutInterface().getHAxisValue(400).

ring til dette, når diagrammet er tegnet.

returtype: nummer
getImageURI()

returnerer diagrammet serialiseret som et billede URI.

ring til dette, når diagrammet er tegnet.

se Udskrivning af PNG-diagrammer.

returtype: string
getSelection()

returnerer en række af de valgte diagramenheder. Valgbare enheder er skiver og legend poster. Til dette diagram kan kun en enhed vælges på et givet tidspunkt., Extended description .

Retur-Type: Array udvalg af elementer
getVAxisValue(position, optional_axis_index)

Returnerer den logiske lodret værdi på position, som er en forskydning fra container øverste kant. Kan være negativ.

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

ring til dette, når diagrammet er tegnet.

Return Type: antal
getXLocation(position, optional_axis_index)

Returnerer tv med x-koordinat position i forhold til diagrammet beholder., eksempel: chart.getChartLayoutInterface().getXLocation(400).

ring til dette, når diagrammet er tegnet.

Return Type: antal
getYLocation(position, optional_axis_index)

Returnerer y-koordinat position i forhold til diagrammet beholder.

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

ring til dette, når diagrammet er tegnet.

Return Type: antal
removeAction(actionID)

Fjerner tooltip-action med den anmodede actionID fra diagrammet.,

returtype:none
setAction(action)

indstiller en værktøjstip-handling, der skal udføres, når brugeren klikker på handlingsteksten.

setAction – metoden tager et objekt som dets handlingsparameter. Dette objekt skal angive 3 egenskaber: id— ID ‘ et for den handling, der text —den tekst, der skal vises i værktøjstip for handling, og action — den funktion, der skal køres, når en bruger klikker på den action-tekster.,

alle tooltip-handlinger skal indstilles, før du kalder diagrammets draw() metode. Udvidet beskrivelse.

Return Type: none
setSelection()

Vælger den angivne diagram enheder. Annullerer ethvert tidligere valg. Valgbare enheder er skiver og legend poster. Til dette diagram kan kun en enhed vælges ad gangen. Extended description .,

returtype: none
clearChart()

rydder diagrammet og frigiver alle dets tildelte ressourcer.

returtype: none

begivenheder

For yderligere oplysninger om, hvordan du bruger disse begivenheder, se grundlæggende interaktivitet, håndtering af begivenheder og affyring af begivenheder.

Navn
click

Fyret, når brugeren klikker i diagrammet., Kan bruges til at identificere, hvornår Titel, dataelementer, legend poster, akser, gridlines eller etiketter er klikket.

Egenskaber: targetID
error

Fyret, når der opstår en fejl, når du forsøger at gøre diagrammet.

Egenskaber: id, besked
onmouseover

Fyret, når de bruger mus over en visuel enhed. Passerer række-og kolonneindekserne for det tilsvarende datatabellelement tilbage. En skive eller legende post korrelerer til en række i datatabellen (kolonneindekset er null).,

Egenskaber: række, kolonne
onmouseout

Fyret, når de bruger mus væk fra en visuel enhed. Passerer række-og kolonneindekserne for det tilsvarende datatabellelement tilbage. En skive eller legende post korrelerer til en række i datatabellen (kolonneindekset er null).

Egenskaber: række, kolonne
ready

diagrammet er klar til eksternt metodekald., Hvis du vil interagere med diagrammet og kalde metoder, når du har tegnet det, skal du oprette en lytter til denne begivenhed, før du kalder draw – metoden og kalde dem først, efter at begivenheden blev fyret.

Egenskaber: ingen
select

Fyret, når brugeren klikker på en visuel enhed. For at lære, hvad der er valgt, ring getSelection().

Egenskaber: ingen

Data Politik

Al kode og data behandles og gengives i browseren., Ingen data sendes til nogen server.

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *