Κοινή χρήση μέσω

Προσθήκη χρωμάτων στις απεικονίσεις σας Power BI

  • Άρθρο

Αυτό το άρθρο περιγράφει τον τρόπο προσθήκης χρωμάτων στις προσαρμοσμένες απεικονίσεις σας και τον τρόπο χειρισμού σημείων δεδομένων για μια απεικόνιση που έχει καθορισμένα χρώματα.

IVisualHost, η συλλογή ιδιοτήτων και υπηρεσιών που αλληλεπιδρούν με τον κεντρικό υπολογιστή απεικόνισης, μπορεί να ορίσει χρώματα σε προσαρμοσμένες απεικονίσεις με την colorPalette υπηρεσία. Το παράδειγμα κώδικα σε αυτό το άρθρο τροποποιεί την απεικόνιση SampleBarChart. Για τον πηγαίο κώδικα απεικόνισης SampleBarChart, ανατρέξτε στο barChart.ts.

Για να ξεκινήσετε τη δημιουργία απεικονίσεων, ανατρέξτε στο θέμα Ανάπτυξη απεικόνισης κάρτας κύκλου Power BI.

Προσθήκη χρώματος σε σημεία δεδομένων

Για να αναπαραστήσουμε κάθε σημείο δεδομένων με διαφορετικό χρώμα, προσθέστε τη color μεταβλητή στη BarChartDataPoint διασύνδεση, όπως φαίνεται στο παρακάτω παράδειγμα:

/**
 * 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;
};

Χρήση της υπηρεσίας παλέτας χρωμάτων

Η colorPalette υπηρεσία διαχειρίζεται τα χρώματα που χρησιμοποιούνται στην απεικόνισή σας. Μια παρουσία της υπηρεσίας colorPalette είναι διαθέσιμη στο IVisualHost.

Καθορίστε την παλέτα χρωμάτων στη update μέθοδο με τον ακόλουθο κώδικα:

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

public update(options: VisualUpdateOptions) {

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

Αντιστοίχιση χρώματος σε σημεία δεδομένων

Στη συνέχεια, καθορίστε dataPoints. Σε αυτό το παράδειγμα, κάθε ένα από τα dataPoints έχει μια καθορισμένη τιμή, κατηγορία και ιδιότητα χρώματος. dataPoints Το μπορεί επίσης να περιλαμβάνει άλλες ιδιότητες.

Στο SampleBarChart, η μέθοδος visualTransform είναι μέρος του viewmodel γραφήματος ράβδων. Επειδή η visualTransform μέθοδος επαναλαμβάνει όλους dataPoints τους υπολογισμούς, είναι το ιδανικό σημείο για να αντιστοιχίσετε χρώματα, όπως στον παρακάτω κώδικα:


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,
        });
    }
}

Στη συνέχεια, εφαρμόστε τα δεδομένα από dataPoints την στην επιλογή barSelection d3 μέσα στη 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();

Σχετικό περιεχόμενο