Bar

pylväskaavio tarjoaa tavan esittää tietoarvot pystysuorina tankoina. Sitä käytetään joskus näyttämään trenditietoja ja vertailemaan useita tietokokonaisuuksia rinnakkain.

Esimerkkikäyttö

var myBarChart = new Chart(ctx, { type: 'bar', data: data, options: options});

tietokokonaisuuden ominaisuudet

pylväskaavion avulla kullekin tietokokonaisuudelle voidaan määrittää useita ominaisuuksia.Näitä käytetään tietyn aineiston näyttöominaisuuksien määrittämiseen. Esimerkiksi tankojen väri asetetaan yleensä näin.

Name Type Scriptable Indexable Default
backgroundColor Color Yes Yes 'rgba(0, 0, 0, 0.1)'
borderColor Color Yes Yes 'rgba(0, 0, 0, 0.1)'
borderSkipped string Yes Yes 'bottom'
borderWidth number|object Yes Yes 0
data object required
hoverBackgroundColor Color Yes undefined
hoverBorderColor Color Yes undefined
hoverBorderWidth number Yes 1
label string ''
order number 0
xAxisID string first x axis
yAxisID string first y axis

General

Name Description
label The label for the dataset which appears in the legend and tooltips.
order The drawing order of dataset. Vaikuttaa myös pinoamisjärjestykseen, työkaluvihjeeseen ja legendaan.
xAxisID X-akselin tunnus tämän aineiston kuvaamiseksi.
yAxisID Y-akselin tunnus tämän aineiston kuvaamiseksi.

stailaus

kunkin tangon tyyliä voidaan ohjata seuraavilla ominaisuuksilla:

Name Description
backgroundColor The bar background color.
borderColor The bar border color.
borderSkipped The edge to skip when drawing bar.
borderWidth The bar border width (in pixels).

kaikki nämä arvot, jos undefined, varaudutaan niihin liittyviin elements.rectangle.* optioihin.

reunustettu

tätä asetusta käytetään välttämään tangon viivan piirtämistä tyveen fill.In yleistä, tätä ei tarvitse muuttaa paitsi luotaessa karttatyyppejä, jotka ovat peräisin pylväskaaviosta.

Huomautus: pystykaavion negatiivisille palkeille käännetään top ja bottom. Sama pätee left ja right vaakakaaviossa.

vaihtoehdot ovat:

  • 'bottom'
  • 'left''top''right'false

borderlidth

Jos tämä arvo on luku, sitä sovelletaan suorakulmion kaikille sivuille (vasen, ylin, oikea, alhaalla), paitsi borderSkipped. Jos tämä arvo on objekti, left ominaisuus määrittelee vasemman reunan leveyden. Samoin voidaan määritellä myös righttop ja bottom ominaisuudet. Pois jätetyt rajat ja borderSkipped ohitetaan.

yhteisvaikutukset

kunkin patukan yhteisvaikutusta voidaan kontrolloida seuraavilla ominaisuuksilla:

nimi
hoverBackgroundColor tangon taustaväri leijuessa.
tangon reunan väri leijuessa.
hoverBorderWidth tangon reunan leveys leijuessa (pikseleinä).

kaikki nämä arvot, jos undefined, varaudutaan niihin liittyviin elements.rectangle.* optioihin.

tietokokonaisuuden kokoonpano

pylväskaavio hyväksyy seuraavat asetukset niihin liittyvistä tietokokonaisuusasetuksista:

number 0.9

categoryPercentagenumber0.8

number|string

number

Name Type Description
barPercentage prosenttia (0-1) käytettävissä oleva leveys jokaisen palkin tulee olla luokan leveyden sisällä. 1.0 vie koko luokan leveyden ja laittaa tangot aivan vierekkäin. enemmän…
prosenttia (0-1) käytettävissä olevasta leveydestä kunkin luokan tulisi olla näytteen leveys. enemmän…
barThickness aseta kunkin palkin leveys manuaalisesti pikseleinä. Jos asetetaan 'flex', se laskee” optimaaliset ” näyteleveydet, jotka globaalisti järjestävät tangot vierekkäin. Jos ei ole asetettu (oletus), palkit ovat samankokoisia pienimmästä aikavälistä riippuen. enemmän…
maxBarThickness Aseta tämä siten, etteivät tangot ole tätä paksumpia.
minBarLength number Aseta tämä siten, että tankojen vähimmäispituus on pikseleinä.

Esimerkkikäyttö

data: { datasets: }]};

barThickness

Jos tämä arvo on luku, sitä sovelletaan jokaisen palkin leveydelle pikseleinä. Kun tämä pannaan täytäntöön, barPercentage ja categoryPercentage jätetään huomiotta.

Jos 'flex', perusnäytteen leveydet lasketaan automaattisesti edellisten ja seuraavien näytteiden perusteella siten, että ne ottavat kaikki käytettävissä olevat leveydet ilman päällekkäisyyksiä. Sitten tangot mitoitetaan käyttämällä barPercentage ja categoryPercentage. Aukkoa ei ole, kun prosenttivaihtoehdot ovat 1. Tämä tila luo baareja eri leveyksille, kun tiedot eivät ole tasaisesti.

Jos niitä ei ole asetettu (oletusarvo), perusnäytteen leveydet lasketaan käyttäen pienintä väliä, joka estää palkkien päällekkäisyyden, ja tangot mitoitetaan käyttämällä barPercentage ja categoryPercentage. Tämä tila tuottaa aina samankokoisia baareja.

Skaalakonfiguraatio

pylväskaavio asettaa yksilölliset oletusarvot seuraavalle konfiguraatiolle siihen liittyvästä scale options:

boolean true

booleantrue

Name Type Description
offset jos totta, molemmat reunat ja akseli skaalataan sopimaan kaavion alueelle.
gridLines.offsetGridLines jos totta, tietyn datapisteen palkit sijoittuvat ruutuviivojen väliin. Ruutuviiva siirtyy rastivälin puolikkaan verran vasemmalle. Jos väärä, ruudukon linja menee alas keskellä baareja. enemmän…

esimerkiksi käyttö

options = { scales: { xAxes: }};

offsetGridLines

Jos totta, tietyn datapisteen palkit sijoittuvat ruutuviivojen väliin. Ruutuviiva siirtyy vasemmalle rastivälin puolikkaalla, joka on ruutuviivojen välinen tila. Jos väärä, ruudukon linja menee alas keskellä baareja. Tämä on asetettu true kategoriaasteikolle viivakaaviossa, kun taas false muille asteikoille tai karttatyypeille oletuksena.

oletusasetukset

on tavallista, että kaikkiin luotuihin pylväskaavioihin halutaan soveltaa asetusasetusta. Globaalin pylväskaavion asetukset tallennetaan Chart.defaults.bar. Globaalien vaihtoehtojen muuttaminen vaikuttaa vain muutoksen jälkeen luotuihin kaavioihin. Olemassa olevia kaavioita ei muuteta.

barPercentage vs. category percentage

Seuraavassa esitetään bar-prosenttivalinnan ja category percentage-vaihtoehdon välinen suhde.

// categoryPercentage: 1.0// barPercentage: 1.0Bar: | 1.0 | 1.0 |Category: | 1.0 |Sample: |===========|// categoryPercentage: 1.0// barPercentage: 0.5Bar: |.5| |.5|Category: | 1.0 |Sample: |==============|// categoryPercentage: 0.5// barPercentage: 1.0Bar: |1.||1.|Category: | .5 |Sample: |==============|

tietorakenne

data tietojoukon ominaisuus pylväskaaviota varten on määritelty numerojoukoksi. Tietoryhmän jokainen piste vastaa merkkiä samassa indeksissä x-akselilla.

data: 

voit määrittää tietojoukon myös x / y-koordinaatteina, kun käytät aikaskaalaa.

data: 

voit myös määrittää pylväskaavion aineiston kahden numeron ryhminä. Tämä pakottaa renderöinti baareja välillään (kelluva-baareja). Ensimmäinen ja toinen numerot array vastaa alku-ja päätepiste bar vastaavasti.

data: , ]

Pinottu pylväskaavio

Pylväskaaviot voidaan konfiguroida pinottaviksi pylväskaavioiksi muuttamalla X-ja Y-akselien asetuksia pinoamisen mahdollistamiseksi. Pinottujen pylväskaavioiden avulla voidaan osoittaa, miten yksi tietosarja koostuu useista pienemmistä paloista.

var stackedBar = new Chart(ctx, { type: 'bar', data: data, options: { scales: { xAxes: , yAxes: } }});

seuraavat datajoukon ominaisuudet ovat pinottujen pylväskaavioiden ominaispiirteitä.

Type

string

nimi
stack sen ryhmän tunnus, johon tämä aineisto kuuluu (pinottuna jokainen ryhmä on erillinen pino).

Vaakapalkkikaavio

vaakapalkkikaavio on muunnelma pystypalkkikaaviosta. Sitä käytetään joskus näyttämään trenditietoja ja vertailemaan useita tietokokonaisuuksia rinnakkain.

esimerkki

var myBarChart = new Chart(ctx, { type: 'horizontalBar', data: data, options: options});

Asetusvalinnat

vaakatasoisen pylväskaavion asetusvalinnat ovat samat kuin pylväskaavion. Kaikki X-akselilla määritellyt valinnat kuitenkin kohdistetaan Y-akselille vaakatasossa olevassa pylväskaaviossa.

The default horizontal bar configuration is specified in Chart.defaults.horizontalBar.

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *