Siirry pääsisältöön

Google Charts

Avaa ChatGPT:ssä
Varjo google-chart 23.06
Java API

The GoogleChart komponentti integroi Google Charts kirjaston webforJ:hin, antaen pääsyn kaaviotyyppeihin kuten palkki, viiva, piirakka, geo ja muita. Kaaviot konfiguroidaan Javalla käyttäen tyyppiä, tietojoukkoa ja vaihtoehtokarttaa, joka hallitsee ulkoasua ja käyttäytymistä.

Luominen kaavio​

Google Chartsin tuominen

Käytettäväksesi GoogleChart-luokkaa sovelluksessasi, käytä seuraavaa XML:ää POM-tiedostossasi:

<dependency>
  <groupId>com.webforj</groupId>
  <artifactId>webforj-googlecharts</artifactId>
  <version>${webforj.version}</version>
</dependency>

Kaavion luomiseksi, määritä kaaviotyyppi, konfiguroi visuaaliset vaihtoehdot ja tarjoa näytettävä data.

Tässä esimerkissä luodaan geo-kaavio, joka kartoittaa liikevaihtotiedot eri maissa, mukautettujen värien, legendan asettelun ja kaavioalueen koon kanssa:

Näytä koodi

Kaaviotyypit​

GoogleChart-lisäosa tarjoaa kattavan valikoiman kaaviotyyppejä erilaisille tietovizualisaatio vaatimuksille. Sopivan kaaviotyypin valinta on olennaista, jotta tiedon tarina voidaan viestiä tehokkaasti. Katso alla olevaa galleriaa esimerkkejä yleisistä kaavioista, joita voidaan käyttää webforJ-sovelluksessa.

Näytä koodi

Vaihtoehdot​

GoogleChart-lisäosa mahdollistaa laajan mukauttamisen eri vaihtoehtojen avulla. Nämä vaihtoehdot antavat sinun räätälöidä kaavioiden ulkoasun ja toiminnallisuuden sovelluksesi tarpeita varten. Vaihtoehtoja välitetään Map<String, Object> muodossa kaavion setOptions()-menetelmään.

Tässä esimerkki kaavion vaihtoehtojen asettamisesta:

Map<String, Object> options = new HashMap<>();
options.put("title", "Kuukausittainen liikevaihto");
options.put("backgroundColor", "#EFEFEF");

// Käytä vaihtoehtoja kaaviossa
chart.setOptions(options);

Lisätietoja saatavilla olevista vaihtoehdoista tietyille kaavioille, katso Google Visualization API viite (Kaaviogalleria).

Datan asettaminen​

Datan visualisoiminen GoogleChart-kaaviolla edellyttää datan oikeaa rakennetta ja asettamista. Tämä opas käy läpi datan valmistelun ja sen soveltamisen kaavioihisi.

Perusdatan asettaminen​

Yksinkertaisin tapa määritellä data on käyttää List<Object>, missä jokainen rivi on lista arvoja.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Tehtävä", "Tunteja päivässä"));
data.add(Arrays.asList("Työ", 11));
data.add(Arrays.asList("Syö", 2));
data.add(Arrays.asList("Kulje", 2));
data.add(Arrays.asList("Katso TV", 2));
data.add(Arrays.asList("Nuku", 7));
chart.setData(data);

Karttojen käyttö monimutkaisemmille rakenteille​

Monimutkaisempia tietorakenteita varten voit käyttää karttoja rivien esittämiseen ja muuntaa ne sitten vaadittuun muotoon.

List<Object> data = new ArrayList<>();

// Otsikkorivi
data.add(Arrays.asList("Maa", "Liikevaihto"));

// Datarivit
Map<String, Object> row1 = Map.of("Maa", "Saksa", "Liikevaihto", 1000);
Map<String, Object> row2 = Map.of("Maa", "Yhdysvallat", "Liikevaihto", 1170);
Map<String, Object> row3 = Map.of("Maa", "Brasilia", "Liikevaihto", 660);

data.add(new ArrayList<>(row1.values()));
data.add(new ArrayList<>(row2.values()));
data.add(new ArrayList<>(row3.values()));

chart.setData(data);

Kun data on valmisteltu, se voidaan asettaa GoogleChart-kaavioon setData-menetelmällä.

Näytä koodi

Datan ja vaihtoehtojen lataaminen JSON:sta​

Voit myös ladata dataa ja vaihtoehtoja JSON-tiedostoista käyttäen Gsonia helpomman hallinnan vuoksi. Tämä lähestymistapa auttaa pitämään datan ja vaihtoehdot järjestyksessä sekä helposti päivitettävänä.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Vuosi", "Myynti", "Kulut"));
data.add(Arrays.asList("2013", 1000, 400));
data.add(Arrays.asList("2014", 1170, 460));
data.add(Arrays.asList("2015", 660, null)); 
data.add(Arrays.asList("2016", 1030, 540));
chart.setData(data);

Map<String, Object> options = new Gson().fromJson(
  Assets.contentOf("options.json"),
  new TypeToken<Map<String, Object>>() {}.getType()
);
chart.setOptions(options);

Kaavioiden visuaalien päivittäminen​

Kaavioidesi ulkoasun päivittäminen tai uudistaminen datan muutosten, käyttäjävuorovaikutusten tai visuaalisten vaihtoehtojen sääntöjen mukaisesti on suoraviivaista redraw()-menetelmän avulla. Tämä menetelmä varmistaa, että kaaviosi pysyvät tarkkoina ja visuaalisesti kohdistettuina taustadatan tai asetusten muutoksille.

Kutsu redraw() esimerkiksi seuraavissa tilanteissa:

  • Datan muutosten jälkeen: Varmistaa, että kaavio heijastaa kaikki päivitykset sen tietolähteeseen.
  • Vaihtoehtojen muuttuessa: Soveltaa uusia tyylittely- tai konfigurointimuutoksia kaavioon.
  • Vastaaviin säätöihin: Säädä kaavion asettelua tai kokoa, kun säilön mitat muuttuvat, varmistaen optimaalisen näyttämisen eri laitteilla.
Näytä koodi

Kaavioiden vieminen kuvina​

getImageUri()-menetelmä tarjoaa tavan viedä Google Charts Base64-koodattujen PNG-kuvina. Tämä menetelmä on erityisen hyödyllinen kaavioiden jakamisessa web-ympärön ulkopuolella, niiden upottamisessa sähköposteihin tai asiakirjoihin tai yksinkertaisesti arkistointitarkoituksiin.

Kutsu getImageUri() kaavioinstanssisi jälkeen, kun kaavio on täysin renderöity. Tyypillisesti tätä menetelmää käytetään "valmis" tapahtuman kuuntelijassa varmistaaksesi, että kaavio on valmis vientiin:

chart.addReadyListener(e -> {
  String imageUri = chart.getImageUri();
  // Nyt voit käyttää imageUri, esimerkiksi img-tagina src-attribuuttina
});

GoogleChartSelectedEvent​

GoogleChartSelectedEvent laukaisee aina, kun käyttäjä valitsee datan pisteen tai segmentin Google Chart -komponentissa. Tämä tapahtuma mahdollistaa vuorovaikutuksen valitun kaavidatan kanssa ja antaa tietoja siitä, mitä on valittu. Tapahtumaan voidaan reagoida käyttämällä addSelectedListener()-menetelmää GoogleChart-instanssilla.

GoogleChartSelectedEvent on hyödyllinen sovelluksissa, joissa käyttäjän vuorovaikutus kaavion kanssa on tarpeen.

GoogleChart chart = new GoogleChart(GoogleChart.Type.BAR);

// Lisää valitsemisen kuuntelija kaavioon
chart.addSelectedListener(event -> {
  // Hanki valinta
  List<Object> selection = chart.getSelection();
  
  // Käsittele valittua tapahtumaa
  if (!selection.isEmpty()) {
    System.out.println("Valittu rivi: " + selection.get(0));
    // Lisäprosessi valinnan rivin/kolumnin perusteella
  }
});

Payload​

GoogleChartSelectedEvent tarjoaa pääsyn valintadataksi, joka voidaan hakea kaavio-objektin getSelection()-menetelmällä. Tämä menetelmä palauttaa listan objekteista, joissa jokaisessa objektissa on seuraavat ominaisuudet:

  • row: Valitun rivin indeksi kaavion tietotaulukossa.
  • column: Tietotaulukon kolumnin indeksi, joka on valinnainen ja pätee kaavioille, jotka sallivat yksittäisten solujen valinnan, kuten taulukko kaavio.

Esimerkiksi piirakka- tai palkkikaavioissa tarjoillaan yleensä vain row, mikä osoittaa valittua datakohtaa.

Esimerkki kuormasta:

[
  {
    "row": 3,  // Valitun rivin indeksi datassa
    "column": 2  // (Valinnainen) Valitun kolumnin indeksi
  }
]
Monien datakohtien valinta

Jos käyttäjä valitsee useita datakohtia, getSelection()-menetelmä palauttaa taulukon objekteista, joista kukin edustaa valittua elementtiä. Kuorma voi vaihdella kaaviotyypin ja käyttäjän suorittaman vuorovaikutuksen mukaan.