Share via

Värien lisääminen Power BI:n visualisointeihin

  • Artikkeli

Tässä artikkelissa kerrotaan, miten voit lisätä värejä mukautettuihin visualisointeihin ja käsitellä arvopisteitä visualisoinnissa, jossa on määritetty värejä.

IVisualHost, kokoelma ominaisuuksia ja palveluja, jotka ovat vuorovaikutuksessa visualisoinnin isännän kanssa, voi määrittää värit palvelun mukautetuissa visualisoinneissa colorPalette . Tämän artikkelin esimerkkikoodi muokkaa SampleBarChart-visualisointia. SampleBarChart-visualisoinnin lähdekoodi on kohdassa barChart.ts.

Jos haluat aloittaa visualisointien luomisen, tutustu kohtaan Power BI:n pyöreän kortin visualisoinnin kehittäminen.

Värin lisääminen arvopisteiin

Jos haluat esittää kunkin arvopisteen eri värillä, lisää color muuttuja -liittymään BarChartDataPoint seuraavassa esimerkissä esitetyllä tavalla:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {number} value    - Data value for point.
 * @property {string} category - Corresponding category of data value.
 * @property {string} color    - Color corresponding to data point.
 */
interface BarChartDataPoint {
    value: number;
    category: string;
    color: string;
};

Värivalikoimapalvelun käyttäminen

Palvelu colorPalette hallitsee visualisoinnissa käytettyjä värejä. Palvelun esiintymä colorPalette on käytettävissä kohdassa IVisualHost.

Määritä värivalikoima menetelmässä update seuraavalla koodilla:

constructor(options: VisualConstructorOptions) {
        this.host = options.host; // host: IVisualHost
        ...
    }

public update(options: VisualUpdateOptions) {

    let colorPalette: IColorPalette = host.colorPalette;
    ...
}

Värin määrittäminen arvopisteille

Määritä dataPointsseuraavaksi . Tässä esimerkissä jokaisella - dataPoints parametrilla on määritetty arvo, luokka ja väriominaisuus. dataPoints voi sisältää myös muita ominaisuuksia.

kohdassa SampleBarChart- visualTransform menetelmä on osa palkkikaavion näkymämallia. visualTransform Koska menetelmä iteroi kaikki dataPoints laskutoimitukset, se on ihanteellinen paikka värien määrittelemiseen, kuten seuraavassa koodissa:


public update(options: VisualUpdateOptions) {
    ....
    let viewModel: BarChartViewModel = visualTransform(options, this.host);
    ....
}

function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
    let colorPalette: IColorPalette = host.colorPalette; // host: IVisualHost
    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        barChartDataPoints.push({
            category: category.values[i],
            value: dataValue.values[i],
            color: colorPalette.getColor(category.values[i]).value,
        });
    }
}

Käytä sitten tietoja kohteesta dataPoints d3-valintaan barSelection -menetelmässäupdate:

// This code is for d3 v5
// in d3 v5 for this case we should use merge() after enter() and apply changes on barSelectionMerged
this.barSelection = this.barContainer
    .selectAll('.bar')
    .data(this.barDataPoints);

const barSelectionMerged = this.barSelection
    .enter()
    .append('rect')
    .merge(<any>this.barSelection);

barSelectionMerged.classed('bar', true);

barSelectionMerged
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(<number>d.value))
.attr("y", d => yScale(<number>d.value))
.attr("x", d => xScale(d.category))
.style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
.style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
.style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

this.barSelection
    .exit()
    .remove();

Liittyvä sisältö