Opetusohjelma: Power BI -visualisoinnin luominen Reactin avulla

Kehittäjänä voit luoda omia Power BI -visualisointeja. Sinä, organisaatiosi tai kolmannet osapuolet voivat käyttää näitä visualisointeja.

Tässä opetusohjelmassa kehität Power BI -visualisoinnin käyttämällä Reactiä. Visualisointi näyttää muotoillun mittariarvon ympyrän sisällä. Visualisoinnin mukautuvan koon avulla voit mukauttaa sen asetuksia.

Tässä opetusohjelmassa opit:

Luo visualisoinnille kehitysprojekti.
Kehitä visualisointi käyttämällä Reactiä.
Määritä visualisointi käsittelemään tietoja.
Määritä visualisointi sopeutumaan kokomuutoksiin.
Määritä visualisoinnin mukautuvan värin ja reunan asetukset.

Muistiinpano

Lisätietoja tämän visualisoinnin koko lähdekoodista on kohdassa React circle card Power BI -visualisointi.

Edellytykset

Ennen kuin aloitat Power BI -visualisoinnin kehittämisen, varmista, että sinulla on kaikki tässä osiossa lueteltu.

Power BI Pro - tai käyttäjäkohtaisen Premiumin (PPU) tili. Jos sinulla ei ole sellaista, rekisteröidy ilmaiseen kokeiluversioon.
Visual Studio Code (VS Code). VS Code on ihanteellinen Integroitu kehitysympäristö (IDE) -ympäristö JavaScript- ja TypeScript-sovellusten kehittämiseen.
Windows PowerShell 4 tai uudempi versio (Windows) Tai Terminal (For Mac).
Power BI -visualisoinnin kehittämistä valmisteleva ympäristö. Määritä ympäristösi Power BI -visualisoinnin kehittämistä varten.
Tässä opetusohjelmassa käytetään Yhdysvaltain myyntianalyysi -raporttia . Voit ladata tämän raportin ja ladata sen Power BI -palveluun tai käyttää omaa raporttiasi. Jos tarvitset lisätietoja Power BI -palvelusta ja tiedostojen lataamisesta, katso Luomisen aloittaminen Power BI -palvelussa -opetusohjelma.

Kehitysprojektin luominen

Tässä osiossa luot projektin Reactin pyöreä kortti -visualisoinnille.

Avaa PowerShell ja siirry kansioon, johon haluat luoda projektisi.
Anna seuraava komento:
```
pbiviz new ReactCircleCard
```
Siirry projektin kansioon.
```
cd ReactCircleCard
```
Käynnistä Reactin pyöreä kortti -visualisointi. Visualisointi on nyt käynnissä, ja sitä isännöidään parhaillaan tietokoneessasi.
```
pbiviz start
```
Tärkeä

Jos haluat lopettaa visualisoinnin suorittamisen, paina PowerShellissä Ctrl+C ja jos sinua kehotetaan lopettamaan joukkotyö, paina Y ja sitten Enter.

React circle -kortin tarkasteleminen Power BI -palvelussa

Käytämme Yhdysvaltain myyntianalyysi -raporttia visualisoinnin testaamiseen Power BI -palvelussa. Voit ladata tämän raportin ja ladata sen Power BI -palveluun.

Voit myös käyttää omaa raporttiasi visualisoinnin testaamiseen.

Muistiinpano

Ennen kuin jatkat, varmista, että olet ottanut käyttöön visualisointien kehittäjätilan.

Kirjaudu sisään ja PowerBI.com ja avaa Yhdysvaltain myyntianalyysi - raportti.
Valitse Muokkaa.
Luo uusi sivu testausta varten napsauttamalla Uusi sivu -painiketta Power BI -palveluliittymän alareunassa.
Valitse Visualisoinnit-ruudusta Kehittäjän visualisointi.

Tämä visualisointi edustaa mukautettua visualisointia, jota tietokoneessasi suoritetaan. Se on käytettävissä vain, kun mukautetun visualisoinnin virheenkorjaus -asetus on käytössä.
Varmista, että visualisointi lisättiin raporttipohjaan.

Tämä on yksinkertainen visualisointi, joka näyttää, kuinka monta kertaa sen päivitysmenetelmää on kutsuttu. Tässä vaiheessa visualisointi ei nouda mitään tietoja.

Muistiinpano

Jos visualisointi näyttää yhteyden virhesanoman, avaa uusi selainvälilehti, siirry osoitteeseen https://localhost:8080/assetsja anna selaimelle käyttöoikeus käyttää tätä osoitetta.
Kun uusi visualisointi on valittuna, siirry Tiedot-ruutuun, laajenna Myynti ja valitse Määrä.
Jos haluat testata, miten visualisointi reagoi, muuta sen kokoa. Huomaa, että Päivitä määrä -arvo kasvaa aina, kun muutat visualisoinnin kokoa.

Määritä React projektissasi

Tässä osiossa opit määrittämään Reactin Power BI -visualisointiprojektissasi.

Avaa PowerShell ja pysäytä visualisoinnin suorittaminen näppäinyhdistelmällä Ctrl+C. Jos erätyön lopettamiseen pyydetään kehotetta, paina Y ja sitten Enter.

Asenna React

Jos haluat asentaa vaaditut React-riippuvuudet, avaa PowerShell ReactCircleCard-kansioon ja suorita seuraava komento:

npm i react react-dom

Asenna React-tyyppimääritykset

Jos haluat asentaa tyyppimääritykset Reactille, avaa PowerShell reactCircleCard-kansiossasi ja suorita seuraava komento:

npm i @types/react @types/react-dom

React-komponenttiluokan luominen

Luo React-komponenttiluokka noudattamalla seuraavia ohjeita.

Avaa VS Code ja siirry reactCircleCard-kansioon .
Luo uusi tiedosto valitsemalla Tiedosto>Uusi tiedosto.

Kopioi seuraava koodi uuteen tiedostoon.

import * as React from "react";

export class ReactCircleCard extends React.Component<{}>{
    render(){
        return (
            <div className="circleCard">
                Hello, React!
            </div>
        )
    }
}

export default ReactCircleCard;

Valitse Tallenna nimellä ja siirry src-kansioon.
Tallenna tiedosto seuraavasti:
- Kirjoita Tiedostonimi-kenttään osa.
- Valitse avattavasta Tallenna tyypiksi -valikosta TypeScript React.

Reactin lisääminen visualisointitiedostoon

Korvaa visual.ts tiedoston koodi koodilla, joka mahdollistaa Reactin käytön.

Avaa src-kansiossa visual.ts ja korvaa tiedoston koodi seuraavalla koodilla:

"use strict";
import powerbi from "powerbi-visuals-api";

import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;

// Import React dependencies and the added component
import * as React from "react";
import * as ReactDOM from "react-dom";
import ReactCircleCard from "./component";

import "./../style/visual.less";

export class Visual implements IVisual {

    constructor(options: VisualConstructorOptions) {

    }

    public update(options: VisualUpdateOptions) {

    }
}

Muistiinpano

Koska Power BI:n TypeScript-asetukset eivät oletusarvoisesti tunnista Reactin tsx-tiedostoja , VS Code korostaa ne component virheiksi.

Jos haluat hahmontaa komponentin, lisää HTML-kohde-elementti visual.ts. Tämä elementti on HTMLElement kohteessa VisualConstructorOptions, joka välitetään konstruktoriin.

Avaa src-kansiossa visual.ts.
Lisää seuraava koodi Visual luokkaan:

private target: HTMLElement;
private reactRoot: React.ComponentElement<any, any>;

Lisää konstruktoriin VisualConstructorOptions seuraavat rivit:

this.reactRoot = React.createElement(ReactCircleCard, {});
this.target = options.element;

ReactDOM.render(this.reactRoot, this.target);

visual.ts pitäisi nyt näyttää tältä:

"use strict";
import powerbi from "powerbi-visuals-api";

import DataView = powerbi.DataView;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import * as React from "react";
import * as ReactDOM from "react-dom";
import ReactCircleCard from "./component";    

import "./../style/visual.less";

export class Visual implements IVisual {
    private target: HTMLElement;
    private reactRoot: React.ComponentElement<any, any>;

    constructor(options: VisualConstructorOptions) {
        this.reactRoot = React.createElement(ReactCircleCard, {});
        this.target = options.element;

        ReactDOM.render(this.reactRoot, this.target);
    }

    public update(options: VisualUpdateOptions) {

    }
}

Tallenna visual.ts.

Tsconfig-tiedoston muokkaaminen

Muokkaa tsconfig.json, jotta se toimii Reactin kanssa.

Avaa reactCircleCard-kansiossa tsconfig.json ja lisää kaksi riviä kohteen alkuuncompilerOptions.

"jsx": "react",
"types": ["react", "react-dom"],

tsconfig.json pitäisi nyt näyttää tältä, ja component visual.ts virheen pitäisi olla poistettu.

{
    "compilerOptions": {
        "jsx": "react",
        "types": ["react", "react-dom"],
        "allowJs": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "./.tmp/build/",
        "moduleResolution": "node",
        "declaration": true,
        "lib": [
            "es2015",
            "dom"
        ]
    },
    "files": [
        "./src/visual.ts"
    ]
}

Tallenna tsconfig.json.

Visualisoinnin testaaminen

Avaa PowerShell CircleCardVisual-kansioon ja suorita projektisi:

pbiviz start

Kun lisäät raporttiin uuden kehittäjävisualisoinnin Power BI -palvelussa, se näyttää tältä:

Näyttökuva, jossa näkyy Juuri luodun kehittäjävisualisoinnin Hello React -viesti Power BI -palvelussa.

Visualisoinnin tietokentän määrittäminen

Määritä visualisoinnin ominaisuustiedosto niin, että vain yksi tietokenttä voidaan lähettää visualisoinnin Mittayksikkö-tietokenttään.

Avaa VS Codessa reactCircleCard-kansiosta capabilities.json.
ReactCircleCard näyttää yksittäisen -arvonMeasure Data. Category Data Poista objekti kohteesta dataRoles.

Kun olet poistanut objektin Category DatadataRoles , avain näyttää tältä:
```
"dataRoles": [
    {
        "displayName": "Measure Data",
        "name": "measure",
        "kind": "Measure"
    }
],
```
Poista kaikki avaimen sisältö objects (täytät sen myöhemmin).

Kun olet poistanut sen sisällön, objects avain näyttää tältä:
```
"objects": {},
```

dataViewMappings Korvaa -ominaisuus seuraavalla koodilla. max: 1 measure määrittää, että vain yksi tietokenttä voidaan lähettää visualisoinnin Mittayksikkö-tietokenttään.

"dataViewMappings": [
    {
        "conditions": [
            {
                "measure": {
                    "max": 1
                }
            }
        ],
        "single": {
            "role": "measure"
        }
    }
]

Tallenna capabilities.json tekemäsi muutokset.
Varmista, että pbiviz start on käynnissä, ja päivitä React Circle Card -visualisointi Power BI -palvelussa. Mittayksikön tietokenttä voi hyväksyä vain yhden tietokentän kohteen määrittämällä tavalla max: 1.

Visualisoinnin tyylin päivittäminen

Tässä osiossa muutat visualisoinnin muodon ympyräksi. Hallitse visualisoinnin tyyliä käyttämällä visual.less-tiedostoa.

Avaa tyylikansiosta visual.less.

Korvaa visual.less-kohdan sisältö seuraavalla koodilla.

.circleCard {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #000;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

p {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;

    position: relative;
    top: -30px;
    margin: 50% 0 0 0;
}

Tallenna visual.less.

Määritä visualisointi vastaanottamaan ominaisuuksia Power BI:stä

Tässä osiossa määrität visualisoinnin vastaanottamaan tietoja Power BI:stä ja lähettämään päivityksiä component.tsx-tiedoston esiintymiin.

Hahmonna tiedot käyttämällä Reactiä

Voit hahmontaa tietoja käyttämällä Reactiä. Komponentti voi näyttää tietoja omasta tilastaan.

Avaa VS Codessa reactCircleCard-kansiosta component.tsx.

Korvaa component.tsx-kohteen sisältö seuraavalla koodilla.

import * as React from "react";

export interface State {
    textLabel: string,
    textValue: string
}

export const initialState: State = {
    textLabel: "",
    textValue: ""
}

export class ReactCircleCard extends React.Component<{}, State>{
    constructor(props: any){
        super(props);
        this.state = initialState;
    }

    render(){
        const { textLabel, textValue } = this.state;

        return (
            <div className="circleCard">
                <p>
                    {textLabel}
                    <br/>
                    <em>{textValue}</em>
                </p>
            </div>
        )
    }
}

Tallenna component.tsx.

Visualisoinnin määrittäminen vastaanottamaan tietoja

Visualisoinnit vastaanottavat tietoja menetelmän argumenttina update . Tässä osiossa päivität tämän menetelmän tietojen vastaanottamiseksi.

Seuraava koodi valitsee kohteen textLabel ja textValue kohteesta DataView, ja jos tietoja on olemassa, se päivittää komponentin tilan.

Avaa VS Codessa src-kansiosta visual.ts.
Korvaa rivi import ReactCircleCard from "./component"; seuraavalla koodilla:
```
import { ReactCircleCard, initialState } from "./component";
```

Lisää seuraava koodi menetelmään update .

if(options.dataViews && options.dataViews[0]){
    const dataView: DataView = options.dataViews[0];

    ReactCircleCard.update({
        textLabel: dataView.metadata.columns[0].displayName,
        textValue: dataView.single.value.toString()
    });
} else {
    this.clear();
}

Luo menetelmä clear lisäämällä seuraava koodi -menetelmän update alapuolelle.
```
private clear() {
    ReactCircleCard.update(initialState);
}
```
Tallenna visual.ts

Tietojen lähettäminen määrittämällä visualisointi

Tässä osiossa päivität visualisoinnin ja lähetät päivityksiä osatiedoston esiintymiin.

Avaa VS Codessa src-kansiosta component.tsx.

Lisää seuraava koodi ReactCircleCard luokkaan:

private static updateCallback: (data: object) => void = null;

public static update(newState: State) {
    if(typeof ReactCircleCard.updateCallback === 'function'){
        ReactCircleCard.updateCallback(newState);
    }
}

public state: State = initialState;

public componentWillMount() {
        ReactCircleCard.updateCallback = (newState: State): void => { this.setState(newState); };
}

public componentWillUnmount() {
    ReactCircleCard.updateCallback = null;
}

Tallenna component.tsx.

Visualisoinnin muutosten tarkasteleminen

Testaa React Circle Card -visualisointia, jotta voit tarkastella tekemiäsi muutoksia.

Varmista, että pbiviz start on käynnissä, ja päivitä Power BI -palvelussa React Circle Card - visualisointi.
Lisää Myynti visualisoinnin Mittayksikkö-tietokenttään.

Näyttökuva myyntiarvosta, joka näkyy Power BI -palvelun react circle card -visualisoinnissa.

Visualisoinnin koko voi muokata

Tällä hetkellä visualisoinnin leveys ja korkeus ovat kiinteät. Jotta visualisoinnin kokoa voidaan muuttaa, muuttuja on määritettävä size sekä visual.ts- että component.tsx-tiedostoissa. Tässä osiossa voit tehdä visualisoinnista muokattavan.

Kun olet suorittanut tässä osiossa kuvatut vaiheet, ympyrän halkaisija visualisoinnissa vastaa vähimmäisleveyttä tai korkeutta, ja voit muuttaa sen kokoa Power BI -palvelussa.

visual.ts tiedoston määrittäminen

Hae visualisoinnin näyttöraportin nykyinen koko objektista options .

Avaa VS Codessa src-kansiosta visual.ts.
Tuo liittymä lisäämällä IViewport tämä koodi.
```
import IViewport = powerbi.IViewport;
```
viewport Lisää ominaisuus visual luokkaan.
```
private viewport: IViewport;
```

update Lisää seuraava koodi -menetelmään ennen -menetelmääReactCircleCard.update.

this.viewport = options.viewport;
const { width, height } = this.viewport;
const size = Math.min(width, height);

Lisää -menetelmässä update kohdassa ReactCircleCard.updatesize.
```
size,
```
Tallenna visual.ts.

Component.tsx-tiedoston määrittäminen

Avaa VS Codessa src-kansiosta component.tsx.
Lisää seuraava koodi kohteeseen export interface State.
```
size: number
```
Lisää seuraava koodi kohteeseen export const initialState: State.
```
size: 200
```
render Tee koodiin seuraavat muutokset -menetelmässä:
1. Lisää size kohteeseen const { textLabel, textValue, size } = this.state;. Tämän esittelyn pitäisi nyt näyttää tältä:
```
const { textLabel, textValue, size } = this.state;
```
2. Lisää seuraava koodi yllä return.
```
const style: React.CSSProperties = { width: size, height: size };
```
3. Korvaa ensimmäinen palautusrivi<div className="circleCard"> seuraavasti:
```
<div className="circleCard" style={style}>
```
Tallenna component.tsx.

Visualisointitiedoston määrittäminen

Avaa VS Codessa tyylikansiostavisual.less.
Korvaa .circleCardwidth kohteessa ja height arvoilla min-width ja min-height.
```
min-width: 200px;
min-height: 200px;
```
Tallenna visual.less.

Power BI -visualisoinnin muuttaminen mukautettavaksi

Tässä osiossa lisäät mahdollisuuden mukauttaa visualisointia, jolloin käyttäjät voivat muuttaa sen väriä ja reunan paksuutta.

Värin ja paksuuden lisääminen ominaisuustiedostoon

Lisää väri ja reunan object paksuus capabilities.json ominaisuuteen.

Avaa VS Codessa reactCircleCard-kansiosta capabilities.json.

Lisää seuraavat asetukset -ominaisuuteen objects .

"circle": {
    "properties": {
       "circleColor": {
            "type": {
                "fill": {
                    "solid": {
                        "color": true
                    }
                }
            }
        },
        "circleThickness": {
            "type": {
                "numeric": true
            }
        }
    }
}

Tallenna capabilities.json.

Ympyrämuotoilun asetusluokan lisääminen asetustiedostoon

Circle Lisää muotoiluasetukset settings.ts. Lisätietoja muotoilumalliasetusten luomisesta on artikkelissa Muotoilun apuohjelmat.

Avaa VS Codessa src-kansiosta settings.ts.

Korvaa settings.ts oleva koodi seuraavalla koodilla:

"use strict";

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

import FormattingSettingsCard = formattingSettings.SimpleCard;
import FormattingSettingsSlice = formattingSettings.Slice;
import FormattingSettingsModel = formattingSettings.Model;

/**
* Circle Formatting Card
*/
class CircleCardSettings extends FormattingSettingsCard {
    circleColor = new formattingSettings.ColorPicker({
        name: "circleColor", // circle color name should match circle color property name in capabilities.json
        displayName: "Color",
        description: "The fill color of the circle.",
        show: true,
        value: { value: "white" }
    });

    circleThickness = new formattingSettings.NumUpDown({
        name: "circleThickness", // circle thickness name should match circle color property name in capabilities.json
        displayName: "Thickness",
        description: "The circle thickness.",
        show: true,
        value: 2
    });

    name: string = "circle"; // circle card name should match circle object name in capabilities.json
    displayName: string = "Circle";
    show: boolean = true;
    slices: Array<FormattingSettingsSlice> = [this.circleColor, this.circleThickness];
}

/**
* visual settings model class
*
*/
export class VisualFormattingSettingsModel extends FormattingSettingsModel {
    // Create formatting settings model circle formatting card
    circleCard = new CircleCardSettings();

    cards = [this.circleCard];
}

Tallenna settings.ts.

Lisää menetelmä visualisoinnin asetusten käyttöön miseksi

getFormattingModel Lisää visualisointiasetusten käyttöön käytettävä menetelmä ja pakollinen tuonti visual.ts-tiedostoon.

Avaa VS Codessa src-kansiosta visual.ts.

Lisää nämä import lausekkeet visual.ts yläosaan.

import { FormattingSettingsService } from "powerbi-visuals-utils-formattingmodel";
import { VisualFormattingSettingsModel } from "./settings";

Lisää seuraava esittely Visualisointiin.

private formattingSettings: VisualFormattingSettingsModel;
private formattingSettingsService: FormattingSettingsService;

Lisää -getFormattingModelmenetelmä Visualisointiin.

public getFormattingModel(): powerbi.visuals.FormattingModel {
    return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
}

Visual Lisää luokkaan seuraava koodirivi alustettavaksi constructorformattingSettingsService
```
    this.formattingSettingsService = new FormattingSettingsService();
```

Visual Lisää luokkaan seuraava koodi, jotta update visualisoinnin muotoiluasetukset päivitetään uusimpiin muotoiluominaisuuksien arvoihin.

Lisää tämä koodi if-lausekkeeseen :n jälkeenconst size = Math.min(width, height);.

this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
const circleSettings = this.formattingSettings.circleCard;

Lisää tämä koodi kohteeseen ReactCircleCard.update jälkeen size:

borderWidth: circleSettings.circleThickness.value,
background: circleSettings.circleColor.value.value,
}

Tallenna visual.ts.

Osatiedoston muokkaaminen

Muokkaa komponenttitiedostoa niin, että se voi hahmontaa visualisoinnin värin ja reunan paksuuden muutokset.

Avaa VS Codessa src-kansiosta component.tsx.

Lisää nämä arvot kohteeseen State:

background?: string,
borderWidth?: number

render Korvaa -menetelmässä seuraavat koodirivit:
1. const { textLabel, textValue, size } = this.state; kanssa:
```
const { textLabel, textValue, size, background, borderWidth } = this.state;
```
2. const style: React.CSSProperties = { width: size, height: size }; kanssa:
```
const style: React.CSSProperties = { width: size, height: size, background, borderWidth };
```
Tallenna component.tsx.

Muutosten tarkasteleminen

Kokeile visualisoinnin väriä ja reunan paksuutta, joita voit nyt hallita.

Varmista, että pbiviz start on käynnissä, ja päivitä Power BI -palvelussa React Circle Card - visualisointi.
Valitse Muotoile-välilehti ja laajenna Ympyrä.
Säädä visualisoinnin Väri - ja Paksuus-asetuksia ja tarkista niiden vaikutus visualisointiin.

Näyttökuva Power BI -palvelun React circle card -visualisoinnista, joka näyttää väri- ja reunan paksuusmuotovaihtoehdot.

Palaute

Onko tästä sivusta apua?

Last updated on 2025-12-15

Jaa

Opetusohjelma: Power BI -visualisoinnin luominen Reactin avulla

Edellytykset

Kehitysprojektin luominen

React circle -kortin tarkasteleminen Power BI -palvelussa

Määritä React projektissasi

Asenna React

Asenna React-tyyppimääritykset

React-komponenttiluokan luominen

Reactin lisääminen visualisointitiedostoon

Tsconfig-tiedoston muokkaaminen

Visualisoinnin testaaminen

Visualisoinnin tietokentän määrittäminen

Visualisoinnin tyylin päivittäminen

Määritä visualisointi vastaanottamaan ominaisuuksia Power BI:stä

Hahmonna tiedot käyttämällä Reactiä

Visualisoinnin määrittäminen vastaanottamaan tietoja

Tietojen lähettäminen määrittämällä visualisointi

Visualisoinnin muutosten tarkasteleminen

Visualisoinnin koko voi muokata

visual.ts tiedoston määrittäminen

Component.tsx-tiedoston määrittäminen

Visualisointitiedoston määrittäminen

Power BI -visualisoinnin muuttaminen mukautettavaksi

Värin ja paksuuden lisääminen ominaisuustiedostoon

Ympyrämuotoilun asetusluokan lisääminen asetustiedostoon

Lisää menetelmä visualisoinnin asetusten käyttöön miseksi

Osatiedoston muokkaaminen

Muutosten tarkasteleminen

Liittyvä sisältö

Palaute

Lisäresursseja