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 is3D
valgmulighederne; 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.load
Pakkenavn 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
Navn | |
---|---|
backgroundColor |
baggrundsfarven til det vigtigste område af diagrammet. Det kan enten være en simpel HTML-farve streng, for eksempel: 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: 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:
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: 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, 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:
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> } 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 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:
Type: string
Standard: ‘procent’
|
pieSliceTextStyle |
Et objekt, der angiver skive sms-stil., Objektet har dette format: {color: <string>, fontName: <string>, fontSize: <number>} Type: objekt
Standard:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>} |
pieStartAngle |
Den vinkel i grader, for at rotere diagrammet. Standarden på 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.
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 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 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:
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 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:
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 at Retur-Type: none
|
getAction(actionID) |
Returnerer tooltip handling objekt med de ønskede Return Type: objekt
|
getBoundingBox(id) |
Returnerer et objekt, der indeholder den venstre, top, bredde og højde af diagrammet element
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):
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:
dette Opkald efter diagrammet tegnes. Return Type: objekt
|
getHAxisValue(position, optional_axis_index) |
Returnerer den logiske vandrette værdi på 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., Retur-Type: Array udvalg af elementer
|
getVAxisValue(position, optional_axis_index) |
Returnerer den logiske lodret værdi på Eksempel: ring til dette, når diagrammet er tegnet. Return Type: antal
|
getXLocation(position, optional_axis_index) |
Returnerer tv med x-koordinat ring til dette, når diagrammet er tegnet. Return Type: antal
|
getYLocation(position, optional_axis_index) |
Returnerer y-koordinat Eksempel: ring til dette, når diagrammet er tegnet. Return Type: antal
|
removeAction(actionID) |
Fjerner tooltip-action med den anmodede returtype:
none |
setAction(action) |
indstiller en værktøjstip-handling, der skal udføres, når brugeren klikker på handlingsteksten.
alle tooltip-handlinger skal indstilles, før du kalder diagrammets 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. 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 Egenskaber: ingen
|
select |
Fyret, når brugeren klikker på en visuel enhed. For at lære, hvad der er valgt, ring Egenskaber: ingen
|
Data Politik
Al kode og data behandles og gengives i browseren., Ingen data sendes til nogen server.