Yhteenveto: Dokumentaatio avainten käyttämisestä kaavioissa. Avaimia voidaan käyttää, kun sinulla on (esimerkiksi) useita datasarjoja, jotka on tunnistettava. Vuorovaikutteiset avaimet voivat tehostaa tätä entisestään
- Esittely
- Ominaisuudet avainten konfiguroinnissa
- Aktiiviset avainelementit
- Vuorovaikutteisten avainten käyttäminen kaavioissasi
- HTML-avaimet
.
Introduction
Käyttämällä avainta kaaviossa voit antaa tietoa siitä, mitä kaaviossa näkyvät tietokokonaisuudet edustavat.
Avaimia voidaan käyttää kahdessa eri tilassa – vaakasuorassa, joka on suunniteltu istumaan kaavion marginaaliin, ja pystysuorassa, joka on suunniteltu istumaan kaavion päälle.
Näppäinten konfigurointiominaisuudet
Käytettävissä olevat näppäinten ominaisuudet ja niiden oletusarvot on lueteltu alla(joillakin kaaviotyypeillä on hieman erilaiset oletusarvot sopiviksi):
Key-ominaisuudet
| Ominaisuus | Kuvaus | Esimerkintä | Esimerkintä |
|---|---|---|---|
| Avain | Matriisi avaimen elementeistä (tämä on teksti, joka näytetään avaimessa. | (Tyhjä array) | |
| keyHalign | Näppäimen vaakasuora kohdistus | oikea | |
| keyPosition | Tämä määrittää näppäimen asemoinnin/asettelun. Mahdolliset arvot ovat graph ja margin. | graph | |
| keyPositionMarginBoxed | Kun näppäin on marginaalitilassa, tämä määrittää istuuko se laatikossa. | false | |
| keyPositionGraphBoxed | Kun näppäin on grafiikkatilassa, tämä määrittää istuuko se laatikossa. | true | |
| keyPositionX | Tämän avulla voit määrittää näppäimen X-koordinaatin. | null | |
| keyPositionY | Tämän avulla voit määrittää näppäimen Y-koordinaatin. | null | |
| keyShadow | Tämän avulla ohjataan, onko näppäimellä varjo vai ei. | false | |
| keyShadowOffsetx | Tällä ohjataan varjon X-siirtymää. | 2 | |
| keyShadowOffsety | Tämä ohjaa varjon Y-siirtymää. | 2 | |
| keyShadowColor | Tämä ohjaa varjon väriä. | #666 | |
| keyShadowBlur | Tämä ohjaa varjoon kohdistuvaa sumeutta. | 3 | |
| keyColors | Jos lasketut värit eivät ole sitä, mitä haluat nähdä – tämä mahdollistaa omien värien määrittelyn. | null | |
| keyColorShape | Tämä on se muoto, jonka värisilppu saa. | neliö (voi olla joukko muotoja) | |
| keyBackground | Väriavaimen tausta. | valkoinen | |
| keyRounded | Onko avaimen kulmat neliönmuotoiset vai pyöristetyt. | true | |
| keyLinewidth | Ohjauksessa käytettävä viivanleveys. | 1 | |
| keyLabelsFont | Avaimen tekstissä käytettävä fontti. | ||
| keyLabelsSize | Avaimen tekstin koko. | ||
| keyLabelsColor | Tekstin väri avaimessa. | musta | |
| keyLabelsBold | Onko avaimessa oleva teksti lihavoitu vai ei. | false | |
| keyLabelsItalic | Onko näppäimessä oleva teksti kursivoitu vai ei. | false | |
| keyLabelsOffsetx | Offset, joka kohdistetaan näppäimen X-koordinaatistoon avaintekstille. | 0 | |
| keyLabelsOffsety | Offset, jota sovelletaan avaintekstin Y-koordinaattiin. | 0 | |
| keyTextAccessible | Oletusarvoisesti näppäimen tekstiin EI pääse käsiksi, mutta tällä asetuksella voit ohittaa tämän. | null | |
| keyInteractive | Onko näppäin interaktiivinen vai ei. Kaikki kaaviotyypit eivät tue tätä. | false | |
| keyInteractiveHighlightChartFill | Korostuksen täyttöväri, jota käytetään kaaviota korostaessa interaktiivisella näppäimellä. | rgba(255,255,255,255,0.7) | |
| keyInteractiveHighlightChartStroke | Korostusviivan väri, jota käytetään kaavion korostamiseen interaktiivisella näppäimellä. | musta |
Muotoilu näppäinten elementeistä (tämä on teksti, joka näytetään näppäimessä.
Default: (Tyhjä array)
keyHalign
Näppäimen vaakakohdistus
Default: right
keyPosition
Tämä määrittää näppäimen sijainnin/asettelun. Mahdolliset arvot ovat graph ja margin.
Default: graph
keyPositionMarginBoxed
Kun näppäin on marginaalitilassa, tämä määrittää, istuuko se laatikossa.
Default: false
keyPositionGraphBoxed
Kun näppäin on grafiikkatilassa, tämä määrittää, istuuko se laatikossa.
Default: true
keyPositionX
Tämän avulla voit määritellä X-koordinaatiston näppäimelle.
Default: null
keyPositionY
Tämän avulla voit määrittää Y-koordinaatin näppäimelle.
Default: null
keyShadow
Tämän avulla määritetään, onko näppäimellä varjo vai ei.
Default: false
keyShadowOffsetx
Tämä ohjaa varjon X-siirtymää.
Default: 2
keyShadowOffsety
Tämä ohjaa varjon Y-siirtymää.
Default: 2
keyShadowColor
Tämä ohjaa varjon väriä.
Default: #666
keyShadowBlur
Tämä ohjaa varjoon sovellettavaa häivytystä.
Default: 3
keyColors
Jos lasketut värit eivät ole sitä, mitä haluat nähdä – tämän avulla voit määritellä omat väriäsi.
Default: null
keyColorShape
Tämä on muoto, jonka väripläjäys ottaa.
Oletusarvo: neliö (voi olla joukko muotoja)
keyBackground
Värinäppäimen tausta.
Oletusarvo: valkoinen
keyRounded
Onko värinäppäimen kulmat neliön muotoiset vai pyöristetyt.
Default: true
keyLinewidth
Näppäimessä käytetty rivinleveys.
Default: 1
keyLabelsFont
Näppäimen tekstissä käytetty fontti.
Default:
keyLabelsSize
Avaimen tekstin koko.
Default:
keyLabelsColor
Ohjeessa olevan tekstin väri.
Oletusasetus: musta
keyLabelsBold
Onko ohjeessa oleva teksti lihavoitu vai ei.
Default: false
keyLabelsItalic
Onko näppäimessä oleva teksti kursiivilla vai ei.
Default: false
keyLabelsOffsetx
Offset, jota sovelletaan näppäimen tekstin X-koordinaattiin.
Default: 0
keyLabelsOffsety
Offset, jota sovelletaan näppäimen tekstin Y-koordinaattiin.
Default: 0
keyTextAccessible
Vakiossa näppäimen tekstiin EI pääse käsiksi, mutta tällä asetuksella voit ohittaa tämän.
Default: null
keyInteractive
Onko näppäin interaktiivinen vai ei. Kaikki kaaviotyypit eivät tue tätä.
Default: false
keyInteractiveHighlightChartFill
Korostuksen täyttöväri, jota käytetään korostamaan kaaviota interaktiivisella näppäimellä.
Default: rgba(255,255,255,255,0.7)
keyInteractiveHighlightChartStroke
Korostusviivan väri, jota käytetään kaavion korostamiseen interaktiivisella näppäimellä.
Default: musta
Aktiiviset avainelementit
Kun viet hiiren hiiren yläpuolelle tai napsautat avainelementtiä/merkintää, niin RGraph-rekisteriin tallennetaan tiedot kyseisestä avaimesta. Tapahtumakuuntelijaan voit siis määrittää avainmerkinnän näin:
key = RGraph.Registry.get('key-element');
Ja voit käyttää sitä näin:
// Assume that the variable is your line chart objectline.canvas.onmousemove = function (e){ var key = RGraph.Registry.get('key-element'); if (key) { // Log the details of the object to the console console.log(key); }};
Vuorovaikutteisten avainten käyttäminen kaavioissasi
textAccessible käyttöön, mutta interaktiivinen näppäin ei huomioi sitä. Aiemmin interaktiivinen näppäin oli toteutettu vain viiva- ja piirakkadiagrammeille. Vuoden 2013 puolivälistä lähtien se kuitenkin kirjoitettiin uudelleen ja on nyt käytettävissä paljon useampien kaaviotyyppien kanssa. Vuorovaikutteisen avaimen demosivut löytyvät latausarkistosta.
Uudelleen kirjoitettuna interaktiivinen avain käyttää nyt piirto-API Rect -objektia ja dynaamista kirjastoa:
<script src="RGraph.common.core.js"></script><script src="RGraph.common.dynamic.js"></script><script src="RGraph.common.key.js"></script><script src="RGraph.drawing.rect.js"></script><script> line = new RGraph.Line({ id: 'cvs', data: , , ], options: { xaxisLabels: , tickmarksStyle: 'endcircle', linewidth: 3, xaxisTickmarksCount: 12, spline: true, key: , keyPosition: 'margin', keyInteractive: true, textSize: 14 } }).draw();</script>
HTML-avaimet
Joulukuussa 2013 RGraphiin lisättiin toiminto, jonka avulla voit käyttää HTML-pohjaista avainta kaavion vieressä. Tämä näppäin koostuu DIV- ja SPAN-tageista, joten sen käyttäminen voi olla helpompaa. Voit lukea lisää HTML-avaimista tältä sivulta.