Frappe Charts on avoimen lähdekoodin JavaScript-kirjasto, jonka avulla voi helposti luoda erilaisia kaaviota ja kuvaajia.
Frappe-kaavion tekeminen 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"
Viimeaikaiset päivitykset tämän sijaan:
import { Chart } from "frappe-charts"
Tai sisällytä seuraavat es-moduulit (esim:vuejs):
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js' // import css import 'frappe-charts/dist/frappe-charts.min.css'
Vaihtoehtoisesti voi sisällyttää HTML-tiedostoon jommankumman seuraavista riveistä(päivitetty):
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.umd.js"></script> <script src="https://unpkg.com/[email protected]/dist/frappe-charts.min.umd.js"></script>
Tämän jälkeen voi alkaa luoda Frappe-kuvaajia.https://frappe.io/charts/docs
Ominaisuudet 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.
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.
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.
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.
Kaaviosta voidaan tehdä nuolinäppäimillä navigoitava, jolloin dataa voidaan analysoida yksitellen.
Frappe-kaaviot ovat responsiivisia, joten ne mukautuvat automaattisesti erikokoisille sivuille.https://frappe.io/charts/docs/basic/basic_chart#responsiveness
Frappe-kaaviot voidaan viedä SVG-muotoon komennolla export().https://frappe.io/charts/docs/exporting/images
Käyttöesimerkki
HTML <div id="kaavio"></div>
Esimerkki kaavio <script> elementin sisällä 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'] })
Tai es-moduuleille (korvaa new frappe.Chart() new Chart()):
- const kaavio = new frappe.Chart("#kaavio", { + const kaavio = new Chart("#kaavio", { // or a DOM element, // new Chart() in case of ES6 module with above usage title: "My Awesome Chart", data: data, type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage' height: 250, colors: ['#7cd6fd', '#743ee2'] })
Kaavion kokoonpano
Container 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 Toinen kaavion rakentajan vaatima parametri on asetukset objekti, jonka vähimmäismäärityksenä on data muuttuja, mikä sisältää labels datasets listatconst 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
title
Type: String Default: " "
Lisää otsikon kaavioon.
type
Type: String Values: line, bar, axis-mixed, pie, percentage, heatmap Default: line
Määrittää miten kaavio piirtyy.
colors
Type: Array Default: ['#00bdff', '#1b3bff', '#8F00FF', '#ff0011', '#ff7300', '#ffd600', '#00c30e', '#65ff00', '#d200ff', '#FF00FF', '#7d7d7d', '#5d5d5d']
Määrittää kaavion värit
height
Type: Number Default: 240
Määrittää kaavion korkeuden pikseleissä.
Frappe kaavioiden dokumentaatio
Frappe kaikki saatavilla olevat asetukset
Heatmap-kaaviotyyppi
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.https://frappe.io/charts/docs/basic/heatmap
Aikaleima: Unix-aikaleima, eli montako sekuntia on kulunut ajanhetkestä 1.1.1970 kello 0.00.00 UTC.https://fi.wikipedia.org/wiki/Unix-aika
Arvo: 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'] });
Donut-kaaviotyyppi Frappe-munkkikaavio on eräänlainen kaavio, jota käytetään tietojen esittämiseen ympyrämäisessä muodossa, joka on samanlainen kuin ympyräkaavio, mutta jossa on reikä keskellä. Jokainen donitsiviipale edustaa tietoluokkaa, ja kunkin viipaleen koko on verrannollinen kyseisen luokan arvoon. Tämä kaaviotyyppi on hyödyllinen kokonaisuuden koostumuksen näyttämiseen ja eri segmenttien vertailuun.
Käyttö: const donutChart = new Chart("#kaavio", {
type: 'donut',
title: "Kategorioiden jakauma",
data: {
labels: ["Kategoria 1", "Kategoria 2", "Kategoria 3", "Kategoria 4"],
datasets: [
name: "Arvot",
values: [10, 20, 30, 40]
]
},
countLabel: 'Osuus',
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1']
});
Lähteet
Aiheesta muualla Frappen sivusto
Luokka:JavaScript Luokka:Grafiikkakirjastot