Frappe Charts
Frappe Charts on avoimen lähdekoodin JavaScript-kirjasto, jonka avulla voi helposti luoda erilaisia kaaviota ja kuvaajia.
Frappe-kaavion tekeminen muokkaa
Kirjaston saa käyttöön omaan projektiinsa asentamalla sen npm:n kautta komennolla:
$ npm install frappe-charts
Tämän jälkeen on lisättävä tuontikäsky JavaScript-tiedostoon:
import { Chart } from "frappe-charts/dist/frappe-charts.min.esm"
Vaihtoehtoisesti voi sisällyttää HTML-tiedostoon jommankumman seuraavista riveistä:
<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script> <script src="https://unpkg.com/frappe-charts@1.2.4/dist/frappe-charts.min.iife.js"></script>
Tämän jälkeen voi alkaa luoda Frappe-kuvaajia.[1]
Ominaisuudet muokkaa
Frappe-objekti koostuu tyypillisesti sille annetusta tietosarjaobjektista, kuvaajan tyypistä, kaavion korkeudesta ja kuvaajien värit listaavasta taulukosta. Tietosarjaobjektiin voidaan sisällyttää niin monta yksittäistä tietosarjaa kuin halutaan. Kuvaajat ovat lähtökohtaisesti annetun kuvaajatyypin mukaisia, mutta jokaiselle tietosarjalle voidaan myös erikseen määrittää jokin tietty oma kuvaajatyyppi. Voidaan siis esimerkiksi luoda kaavio, jossa on samanaikaisesti viiva- ja pylväskuvaajia. Kuvaajatyyppejä on useita ja ne sisältävät kaikki yleisimmin käytetyt kuvaajatyypit. Kaavion korkeus annetaan lukuna joka kuvaa korkeutta pikseleinä. Kuvaajien värit listaavaan taulukkoon voidaan listata väri vaikkapa jokaiselle kuvaajalle erikseen. Frappe-objektiin voidaan myös sisällyttää lisäasetuksia kuten barOptions-objekti, axisOptions-objekti ja lineOptions-objekti. barOptions määrittää kaaviopylväiden ja niiden välien suhteen, axisOptions:in avulla voidaan muuttaa X- ja Y-akselien tyyliä ja lineOptions:illa voidaan muuttaa kuvaajien tyyliä esimerkiksi muuttamalla kuvaajien pallukoiden kokoa.[2]
Akseleille voidaan lisätä merkkejä tiettyjen arvojen kohdalle sisällyttämällä tietosarjaobjektiin xMarkers- ja yMarkers-asetuksia. Akseleille voidaan myös merkata kokonaisia alueita xRegions- ja yRegions-asetuksilla. Frappe-kaavioihin voidaan laittaa erilaisia lisämerkintöjä tooltipOptions-asetuksella.[3]
Frappe sisältää kaikki yleiset kuvaajatyypit, kuten viiva- ja pylväskuvaajat. Lisäksi Frappessa on erikoisempia kuvaajatyyppejä kuten ”pie” eli piirakkakuvaaja, ”donut” eli donitsikuvaaja sekä ”percentage” eli proenttikuvaaja.[4]
Frappe-kaavioita voi muokata niiden luonnin jälkeen esimerkiksi lisäämällä tai poistamalla yksittäisiä datapisteitä. Vaihtoehtoisesti voidaan myös uusia kaikki data antamalla kaaviolle uusi tietosarjaobjekti.[5]
Kaaviosta voidaan tehdä nuolinäppäimillä navigoitava, jolloin dataa voidaan analysoida yksitellen.[6]
Frappe-kaaviot ovat responsiivisia, joten ne mukautuvat automaattisesti erikokoisille sivuille.[7]
Frappe-kaaviot voidaan viedä SVG-muotoon komennolla export()
.[8]
Käyttöesimerkki muokkaa
HTML muokkaa
<div id="kaavio"></div>
Esimerkki kaavio <script> elementin sisällä muokkaa
const data = {
labels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
datasets: [
{
name: "Data", type: "line",
values: [1,6,3,8,5,9,7]
}
]
}
const kaavio = new frappe.Chart("#kaavio", {
title: "Esimerkki kaavio",
data: data,
type: 'line',
height: 450,
colors: ['#7cd6fd']
})
Kaavion kokoonpano muokkaa
Container muokkaa
Ensimmäinen kaavion rakentajan vaatima parametri on container elementti, joka voidaan antaa DOM objektina tai CSS selectorilla.
const kaavio = new Chart('#kaavio', asetukset);
// tai
const container = document.elementById('kaavio');
const kaavio = new Chart(container, asetukset);
Asetukset objekti muokkaa
Toinen kaavion rakentajan vaatima parametri on asetukset objekti, jonka vähimmäismäärityksenä on data muuttuja, mikä sisältää labels datasets listat
const asetukset = {
data: {
labels: ["Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai", "Sunnuntai"],
datasets: [
{
name: "Data", values: [1,6,3,8,5,9,7]
}
]
}
}
const kaavio = new Chart(container, asetukset);
Valinnaisia asetuksia muokkaa
title muokkaa
- Type: String
- Default: " "
Lisää otsikon kaavioon.
type muokkaa
- Type: String
- Values: line, bar, axis-mixed, pie, percentage, heatmap
- Default: line
Määrittää miten kaavio piirtyy.
colors muokkaa
- Type: Array
- Default: ['#00bdff', '#1b3bff', '#8F00FF', '#ff0011', '#ff7300', '#ffd600', '#00c30e', '#65ff00', '#d200ff', '#FF00FF', '#7d7d7d', '#5d5d5d']
Määrittää kaavion värit
height muokkaa
- Type: Number
- Default: 240
Määrittää kaavion korkeuden pikseleissä.
Frappe kaavioiden dokumentaatio
Frappe kaikki saatavilla olevat asetukset
Heatmap-kaaviotyyppi muokkaa
Heatmap-tyyppinen kaavio tarkoittaa Frappessa datan visualisointia kuukausittaisina kalentereina, kuvaamalla päiväkohtaisten arvojen tasoerot väreinä. Tasoja on aina viisi.
Tämä kaaviotyyppi vaatii erilaisen data-olion kuin muut kaaviotyypit. Labels- tai datasets-taulukkoa ei anneta, vaan pelkät aikaleima-arvoparit dataPoints-oliossa.[9]
Aikaleima: muokkaa
Unix-aikaleima, eli montako sekuntia on kulunut ajanhetkestä 1.1.1970 kello 0.00.00 UTC.[10]
Arvo: muokkaa
Mitatun suureen arvo tietyllä ajanhetkellä.
const heatmap = new Chart("#kaavio", {
type: 'heatmap',
title: “Kuukausijakauma",
data: {
dataPoints: { // olio, jossa on aikaleima-arvopareja
'1688443269' : 8,
'1688529669' : 20,
'1688616069' : 10,
'1688702469' : 35
},
start: startDate,
end: endDate // Date-objektit kaavion alku- ja loppuajankohdille
},
countLabel: 'Taso',
discreteDomains: 0, // Erotellaanko kuukaudet toisistaan vai ei, oletus: 1=erotellaan
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']
// Viiden tummenevan värin setti, vaalein väri nollalle,
// oletusvärit: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
});
Lähteet muokkaa
- ↑ https://frappe.io/charts/docs
- ↑ Axis chart frappe.io. Viitattu 31.7.2023.
- ↑ Annotations frappe.io. Viitattu 31.7.2023.
- ↑ Sliced Diagrams frappe.io. Viitattu 31.7.2023.
- ↑ Modifying Data frappe.io. Viitattu 31.7.2023.
- ↑ Navigation frappe.io. Viitattu 31.7.2023.
- ↑ https://frappe.io/charts/docs/basic/basic_chart#responsiveness
- ↑ https://frappe.io/charts/docs/exporting/images
- ↑ a b https://frappe.io/charts/docs/basic/heatmap
- ↑ https://fi.wikipedia.org/wiki/Unix-aika