Εκμάθηση: Δημιουργία γραφήματος ράβδων

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

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

Σε αυτή την εκμάθηση, θα μάθετε πώς μπορείτε να κάνετε τα εξής:

  • Ορισμός των δυνατοτήτων της απεικόνισής σας
  • Κατανόηση του πηγαίου κώδικα που χρησιμοποιείται για τη δημιουργία μιας απεικόνισης
  • Απόδοση της απεικόνισης
  • Προσθήκη αντικειμένων στο τμήμα παραθύρου ιδιοτήτων
  • Συσκευασία της απεικόνισης

Ρύθμιση του περιβάλλοντός σας

Προτού ξεκινήσετε την ανάπτυξη της απεικόνισης Power BI, επαληθεύστε ότι έχετε όλα τα στοιχεία που εμφανίζονται σε αυτήν την ενότητα.

Σημείωση

Αυτή η εκμάθηση χρησιμοποιεί την έκδοση 5 της βιβλιοθήκης d3 JavaScript για την παραγωγή δυναμικών, αλληλεπιδραστικών απεικονίσεων δεδομένων. Εάν δεν εγκαταστήσατε αυτήν τη βιβλιοθήκη ως μέρος των ρυθμίσεών σας, εγκαταστήστε τώρα τη βιβλιοθήκη D3 JavaScript .

Η δημιουργία μιας απεικόνισης γραφήματος ράβδων περιλαμβάνει τα παρακάτω βήματα:

  1. Δημιουργία νέου έργου
  2. Ορισμός του αρχείου δυνατοτήτων -capabilities.json
  3. Δημιουργία API απεικόνισης
  4. Συσκευασία της απεικόνισης -pbiviz.json

Δημιουργία νέου έργου

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

  1. Ανοίξτε το PowerShell και μεταβείτε στον φάκελο στον οποίο θέλετε να δημιουργήσετε το έργο σας.

  2. Πληκτρολογήστε την ακόλουθη εντολή:

    pbiviz new BarChart
    

    Τώρα θα πρέπει να έχετε έναν φάκελο που ονομάζεται BarChart που περιέχει τα αρχεία της απεικόνισης.

  3. Στο VS Code, ανοίξτε το αρχείο [tsconfig.json] (visual-project-structure.md#tsconfigjson) και αλλάξτε το όνομα "files" σε "src/barChart.ts".

    "files": [
    "src/barChart.ts"
    ]
    

    Το αντικείμενο "files" tsconfig.json δείχνει στο αρχείο όπου βρίσκεται η κύρια κλάση της απεικόνισης.

    Το τελικό αρχείο tsconfig.json θα πρέπει να μοιάζει κάπως έτσι.

  4. Το αρχείο package.json περιέχει μια λίστα εξαρτήσεων έργου. Αντικαταστήστε το αρχείο project.json με αυτό.

Τώρα θα πρέπει να έχετε έναν νέο φάκελο για την απεικόνισή σας με τα ακόλουθα αρχεία και φακέλους:

Structure of visuals.

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

Τα δύο αρχεία στα οποία θα εστιάσουμε σε αυτή την εκμάθηση είναι το αρχείο capabilities.json , το οποίο περιγράφει την απεικόνιση στον κεντρικό υπολογιστή και το αρχείο src/barchart.ts , το οποίο περιέχει το API της απεικόνισης.

Ορισμός δυνατοτήτων

Το αρχείο capabilities.json είναι το σημείο όπου συνδέουμε δεδομένα στον κεντρικό υπολογιστή. Περιγράφουμε το είδος των πεδίων δεδομένων που αποδέχεται και τις δυνατότητες που θα πρέπει να έχει η απεικόνιση.

Data binding in a Field bucket.

Ορισμός ρόλων δεδομένων

Οι μεταβλητές ορίζονται και συνδέονται στην dataRoles ενότητα του αρχείου δυνατοτήτων. Θέλουμε το γράφημα ράβδων να αποδεχτεί δύο τύπους μεταβλητών:

  • Κατηγορικά δεδομένα που θα αντιπροσωπεύονται από τις διαφορετικές ράβδους στο γράφημα
  • Αριθμητικά ή μετρηθούν δεδομένα, τα οποία αντιπροσωπεύονται από το ύψος κάθε ράβδου

Στο Visual Studio Code, στο αρχείο capabilities.json, επιβεβαιώστε ότι εμφανίζεται το ακόλουθο τμήμα JSON στο αντικείμενο με την ετικέτα "dataRoles".

    "dataRoles": [
        {
            "displayName": "Category Data",
            "name": "category",
            "kind": "Grouping"
        },
        {
            "displayName": "Measure Data",
            "name": "measure",
            "kind": "Measure"
        }
    ],

Αντιστοίχιση των δεδομένων

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

Αντικαταστήστε το περιεχόμενο του αντικειμένου "dataViewMappings" με τα εξής:

"dataViewMappings": [
        {
            "conditions": [
                {
                    "category": {
                        "max": 1
                    },
                    "measure": {
                        "max": 1
                    }
                }
            ],
            "categorical": {
                "categories": {
                    "for": {
                        "in": "category"
                    }
                },
                "values": {
                    "select": [
                        {
                            "bind": {
                                "to": "measure"
                            }
                        }
                    ]
                }
            }
        }
    ],

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

Ορίζει επίσης την αντιστοίχιση κατηγορικών δεδομένων έτσι ώστε κάθε πεδίο να αντιστοιχίζεται στη σωστή μεταβλητή.

Ορισμός αντικειμένων για το τμήμα παραθύρου ιδιοτήτων

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

Για περισσότερες πληροφορίες σχετικά με τα αντικείμενα και τον τρόπο λειτουργίας τους, ανατρέξτε στο θέμα Αντικείμενα.

Τα παρακάτω αντικείμενα είναι προαιρετικά. Προσθέστε τις εάν θέλετε να εξετάσετε τις προαιρετικές ενότητες αυτής της εκμάθησης για να προσθέσετε χρώματα και να αποδώσετε τον άξονα X.

Αντικαταστήστε το περιεχόμενο της ενότητας "αντικείμενα" με τα εξής:

     "objects": {
        "enableAxis": {
            "displayName": "Enable Axis",
            "properties": {
                "show": {
                    "displayName": "Enable Axis",
                    "type": {
                        "bool": true
                    }
                },
                "fill": {
                    "displayName": "Color",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
     },

Αποθηκεύστε το αρχείο capabilities.json.

Το τελικό αρχείο δυνατοτήτων θα πρέπει να μοιάζει με αυτό σε αυτό το παράδειγμα.

API απεικόνισης

Όλες οι απεικονίσεις ξεκινούν με μια κλάση που υλοποιεί τη διασύνδεση IVisual. Το αρχείο src/visual.ts είναι το προεπιλεγμένο αρχείο που περιέχει αυτήν την κλάση.

Σε αυτό το εκπαιδευτικό βοήθημα, θα ονομάσουμε το αρχείο barChart.tsIVisual. Κάντε λήψη του αρχείου και αποθηκεύστε το στον φάκελο /src , εάν δεν το έχετε κάνει ήδη. Σε αυτήν την ενότητα, θα εξετάσουμε λεπτομερώς αυτό το αρχείο και θα περιγράψουμε τις διάφορες ενότητες.

Εισαγωγές

Η πρώτη ενότητα του αρχείου εισάγει τις λειτουργικές μονάδες που απαιτούνται για αυτή την απεικόνιση. Παρατηρήστε ότι εκτός από τις Power BI λειτουργικές μονάδες απεικόνισης, εισάγουμε επίσης τη βιβλιοθήκη d3.

Οι ακόλουθες λειτουργικές μονάδες εισάγονται στο αρχείο barChart.ts :

import "./../style/visual.less";
import {
    event as d3Event,
    select as d3Select
} from "d3-selection";
import {
    scaleLinear,
    scaleBand
} from "d3-scale";

import { axisBottom } from "d3-axis";

import powerbiVisualsApi from "powerbi-visuals-api";
import "regenerator-runtime/runtime";
import powerbi = powerbiVisualsApi;

type Selection<T1, T2 = T1> = d3.Selection<any, T1, any, T2>;
import ScaleLinear = d3.ScaleLinear;
const getEvent = () => require("d3-selection").event;

// powerbi.visuals
import DataViewCategoryColumn = powerbi.DataViewCategoryColumn;
import DataViewObjects = powerbi.DataViewObjects;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import Fill = powerbi.Fill;
import ISandboxExtendedColorPalette = powerbi.extensibility.ISandboxExtendedColorPalette;
import ISelectionId = powerbi.visuals.ISelectionId;
import IVisual = powerbi.extensibility.IVisual;
import IVisualHost = powerbi.extensibility.visual.IVisualHost;
import PrimitiveValue = powerbi.PrimitiveValue;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import VisualObjectInstanceEnumeration = powerbi.VisualObjectInstanceEnumeration;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualEnumerationInstanceKinds = powerbi.VisualEnumerationInstanceKinds;

import { textMeasurementService as tms } from "powerbi-visuals-utils-formattingutils";
import textMeasurementService = tms.textMeasurementService;

import { getValue, getCategoricalObjectValue } from "./objectEnumerationUtility";
import { dataViewWildcard } from "powerbi-visuals-utils-dataviewutils";

Διασυνδέσεις

Στη συνέχεια, ορίζουμε τις διασυνδέσεις viewmodel. Οι παρακάτω τρεις διασυνδέσεις χρησιμοποιούνται για την περιγραφή της απεικόνισης γραφήματος ράβδων:

  • BarChartDataPoint
  • BarChartViewModel
  • BarChartSettings

Αυτές οι διασυνδέσεις ορίζονται ως εξής:

/**
 * Interface for BarCharts viewmodel.
 *
 * @interface
 * @property {BarChartDataPoint[]} dataPoints - Set of data points the visual will render.
 * @property {number} dataMax                 - Maximum data value in the set of data points.
 */
interface BarChartViewModel {
    dataPoints: BarChartDataPoint[];
    dataMax: number;
    settings: BarChartSettings;
}

/**
 * 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.
 * @property {ISelectionId} selectionId - Id assigned to data point for cross filtering
 *                                        and visual interaction.
 */
interface BarChartDataPoint {
    value: PrimitiveValue;
    category: string;
    color: string;
    strokeColor: string;
    strokeWidth: number;
    selectionId: ISelectionId;
}

/**
 * Interface for BarChart settings.
 *
 * @interface
 * @property {{show:boolean}} enableAxis - Object property that allows axis to be enabled.
*/
interface BarChartSettings {
    enableAxis: {
        show: boolean;
        fill: string;
    };
}

let defaultSettings: BarChartSettings = {
    enableAxis: {
        show: false,
        fill: "#000000",
    }
};

Μετασχηματισμός απεικόνισης

Τώρα που έχουν οριστεί οι δομές δεδομένων, πρέπει να αντιστοιχίσουμε δεδομένα σε αυτές χρησιμοποιώντας τη visualTransform συνάρτηση. Αυτή η συνάρτηση λαμβάνει δεδομένα από την προβολή δεδομένων και τα μετασχηματίζει σε μια μορφή που μπορεί να χρησιμοποιήσει η απεικόνιση. Σε αυτήν την περίπτωση, επιστρέφει τη BarChartViewModel διασύνδεση που περιγράφεται παραπάνω.

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

Αυτή η συνάρτηση καλείται κάθε φορά που ενημερώνεται η απεικόνιση.

/**
 * Function that converts queried data into a viewmodel that will be used by the visual.
 *
 * @function
 * @param {VisualUpdateOptions} options - Contains references to the size of the container
 *                                        and the dataView which contains all the data
 *                                        the visual had queried.
 * @param {IVisualHost} host            - Contains references to the host which contains services
 */
function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
    let dataViews = options.dataViews;
    let viewModel: BarChartViewModel = {
        dataPoints: [],
        dataMax: 0,
        settings: <BarChartSettings>{}
    };

    if (!dataViews
        || !dataViews[0]
        || !dataViews[0].categorical
        || !dataViews[0].categorical.categories
        || !dataViews[0].categorical.categories[0].source
        || !dataViews[0].categorical.values
    ) {
        return viewModel;
    }

    let categorical = dataViews[0].categorical;
    let category = categorical.categories[0];
    let dataValue = categorical.values[0];

    let barChartDataPoints: BarChartDataPoint[] = [];
    let dataMax: number;

    let colorPalette: ISandboxExtendedColorPalette = host.colorPalette;
    let objects = dataViews[0].metadata.objects;

    const strokeColor: string = getColumnStrokeColor(colorPalette);

    let barChartSettings: BarChartSettings = {
        enableAxis: {
            show: getValue<boolean>(objects, 'enableAxis', 'show', defaultSettings.enableAxis.show),
            fill: getAxisTextFillColor(objects, colorPalette, defaultSettings.enableAxis.fill),
        }
    };

    const strokeWidth: number = getColumnStrokeWidth(colorPalette.isHighContrast);

    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        const color: string = getColumnColorByIndex(category, i, colorPalette);

        const selectionId: ISelectionId = host.createSelectionIdBuilder()
            .withCategory(category, i)
            .createSelectionId();

        barChartDataPoints.push({
            color,
            strokeColor,
            strokeWidth,
            selectionId,
            value: dataValue.values[i],
            category: `${category.values[i]}`,
        });
    }

    dataMax = <number>dataValue.maxLocal;

    return {
        dataPoints: barChartDataPoints,
        dataMax: dataMax,
        settings: barChartSettings,
    };
}

Σημείωση

Οι επόμενες συναρτήσεις στο αρχείο barChart.ts ασχολούνται με το χρώμα και τη δημιουργία του άξονα X. Αυτά είναι προαιρετικά και εξετάζονται περαιτέρω σε αυτό το πρόγραμμα εκμάθησης. Αυτή η εκμάθηση θα συνεχιστεί από τη IVisual συνάρτηση.

Απόδοση της απεικόνισης

Μόλις οριστούν τα δεδομένα, αποδίδουμε την απεικόνιση χρησιμοποιώντας την κλάση BarChart που υλοποιεί τηIVisual διασύνδεση. Η IVisual διασύνδεση περιγράφεται στη σελίδα API απεικόνισης . Περιέχει μια constructor μέθοδο που δημιουργεί την απεικόνιση και μια update μέθοδο που καλείται κάθε φορά που φορτώνεται εκ νέου η απεικόνιση. Πριν από την απόδοση της απεικόνισης, πρέπει να δηλώσουμε τα μέλη της κλάσης:

export class BarChart implements IVisual {
    private svg: Selection<any>;
    private host: IVisualHost;
    private barContainer: Selection<SVGElement>;
    private xAxis: Selection<SVGElement>;
    private barDataPoints: BarChartDataPoint[];
    private barChartSettings: BarChartSettings;

    private barSelection: d3.Selection<d3.BaseType, any, d3.BaseType, any>;

    static Config = {
        xScalePadding: 0.1,
        solidOpacity: 1,
        transparentOpacity: 1,
        margins: {
            top: 0,
            right: 0,
            bottom: 25,
            left: 30,
        },
        xAxisFontMultiplier: 0.04,
    }
 }

Δημιουργία της απεικόνισης

Η συνάρτηση κατασκευής καλείται μόνο μία φορά, όταν η απεικόνιση αποδίδεται για πρώτη φορά. Δημιουργεί κενά κοντέινερ SVG για το γράφημα ράβδων και τον άξονα X. Παρατηρήστε ότι χρησιμοποιεί τη βιβλιοθήκη d3 για την απόδοση του SVG.

/**
     * Creates instance of BarChart. This method is only called once.
     *
     * @constructor
     * @param {VisualConstructorOptions} options - Contains references to the element that will
     *                                             contain the visual and a reference to the host
     *                                             which contains services.
     */
    constructor(options: VisualConstructorOptions) {
        this.host = options.host;

        this.svg = d3Select(options.element)
            .append('svg')
            .classed('barChart', true);

        this.barContainer = this.svg
            .append('g')
            .classed('barContainer', true);

        this.xAxis = this.svg
            .append('g')
            .classed('xAxis', true);
    }

Ενημέρωση της απεικόνισης

Η μέθοδος ενημέρωσης καλείται κάθε φορά που αλλάζει το μέγεθος της απεικόνισης ή μία από τις τιμές της.

Κλίμακα

Πρέπει να κλιμακώνουμε την απεικόνιση έτσι ώστε ο αριθμός των ράβδων και των τρεχουσών τιμών να χωράει στα καθορισμένα όρια πλάτους και ύψους της απεικόνισης. Αυτό είναι παρόμοιο με τη μέθοδο ενημέρωσης στην εκμάθηση κάρτας κύκλου.

Για να υπολογίσουμε την κλίμακα, χρησιμοποιούμε τις scaleLinear μεθόδους και scaleBand που έχουν εισαχθεί νωρίτερα από τη d3-scale βιβλιοθήκη.

Η viewModel.datamax τιμή περιέχει τη μεγαλύτερη τιμή από όλα τα τρέχοντα σημεία δεδομένων. Αυτή η τιμή χρησιμοποιείται για τον προσδιορισμό του ύψους του άξονα y. Η κλίμακα για το πλάτος του άξονα x προσδιορίζεται από τον αριθμό των κατηγοριών που συνδέονται με την απεικόνιση στη barchartdatapoint διασύνδεση.

Για περιπτώσεις όπου αποδίδεται ο άξονας X, αυτή η απεικόνιση χειρίζεται επίσης αλλαγές λέξεων σε περίπτωση που δεν υπάρχει αρκετός χώρος για τη σύνταξη ολόκληρου του ονόματος στον άξονα X.

Άλλες δυνατότητες ενημέρωσης

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

   /**
     * Updates the state of the visual. Every sequential databinding and resize will call update.
     *
     * @function
     * @param {VisualUpdateOptions} options - Contains references to the size of the container
     *                                        and the dataView which contains all the data
     *                                        the visual had queried.
     */
    public update(options: VisualUpdateOptions) {
        let viewModel: BarChartViewModel = visualTransform(options, this.host);
        let settings = this.barChartSettings = viewModel.settings;
        this.barDataPoints = viewModel.dataPoints;

        let width = options.viewport.width;
        let height = options.viewport.height;

        this.svg
            .attr("width", width)
            .attr("height", height);

        if (settings.enableAxis.show) {
            let margins = BarChart.Config.margins;
            height -= margins.bottom;
        }

        this.xAxis
            .style("font-size", Math.min(height, width) * BarChart.Config.xAxisFontMultiplier)
            .style("fill", settings.enableAxis.fill);

        let yScale = scaleLinear()
            .domain([0, viewModel.dataMax])
            .range([height, 0]);

        let xScale = scaleBand()
            .domain(viewModel.dataPoints.map(d => d.category))
            .rangeRound([0, width])
            .padding(0.2);

        let xAxis = axisBottom(xScale);

        const colorObjects = options.dataViews[0] ? options.dataViews[0].metadata.objects : null;
        this.xAxis.attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis)
            .attr("color", getAxisTextFillColor(
                colorObjects,
                this.host.colorPalette,
                defaultSettings.enableAxis.fill
            ));

        const textNodes = this.xAxis.selectAll("text")
        BarChart.wordBreak(textNodes, xScale.bandwidth(), height);

        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();

    }

    private static wordBreak(
        textNodes: Selection<any, SVGElement>,
        allowedWidth: number,
        maxHeight: number
    ) {
        textNodes.each(function () {
            textMeasurementService.wordBreak(
                this,
                allowedWidth,
                maxHeight);
        });
    }

Συμπλήρωση του τμήματος παραθύρου ιδιοτήτων

Η τελική μέθοδος στη IVisual συνάρτηση είναι enumerateObjectInstances. Αυτή η μέθοδος εξετάζει όλα τα "αντικείμενα" στο αρχείο capabilities.json (στην περίπτωσή μας, enableAxis και colorSelector) και τα τοποθετεί μέσα στο τμήμα παραθύρου Μορφοποίηση. Το όνομα του αντικειμένου είναι διαθέσιμο από EnumerateVisualObjectInstancesOptionsτο .

Για να προσθέσετε έναν επιλογέα χρώματος για κάθε κατηγορία στο τμήμα παραθύρου Ιδιότητα, προσθέστε μια επιπλέον περίπτωση στην πρόταση για colorSelectorτο switch και επαναλαμβάνεται σε κάθε σημείο δεδομένων με το συσχετισμένο χρώμα.

    /**
     * Enumerates through the objects defined in the capabilities and adds the properties to the format pane
     *
     * @function
     * @param {EnumerateVisualObjectInstancesOptions} options - Map of defined objects
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        let objectName = options.objectName;
        let objectEnumeration: VisualObjectInstance[] = [];

        if (!this.barChartSettings ||
            !this.barChartSettings.enableAxis ||
            !this.barDataPoints) {
            return objectEnumeration;
        }

        switch (objectName) {
            case 'enableAxis':
                objectEnumeration.push({
                    objectName: objectName,
                    properties: {
                        show: this.barChartSettings.enableAxis.show,
                        fill: this.barChartSettings.enableAxis.fill,
                    },
                    selector: null
                });
                break;
            case 'colorSelector':
                for (let barDataPoint of this.barDataPoints) {
                    objectEnumeration.push({
                        objectName: objectName,
                        displayName: barDataPoint.category,
                        properties: {
                            fill: {
                                solid: {
                                    color: barDataPoint.color
                                }
                            }
                        },
                        propertyInstanceKind: {
                            fill: VisualEnumerationInstanceKinds.ConstantOrRule
                        },
                        altConstantValueSelector: barDataPoint.selectionId.getSelector(),
                        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals)
                    });
                }
                break;
        };

        return objectEnumeration;
    }

(Προαιρετικό) Απόδοση του άξονα X (στατικά αντικείμενα)

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

Μπορείτε να ενεργοποιήσετε ή να απενεργοποιήσετε αυτά τα αντικείμενα στο τμήμα παραθύρου Ιδιότητα .

Objects in the Property pane.

Αυτό το παράδειγμα αποδίδει έναν άξονα X στο γράφημα ράβδων ως στατικό αντικείμενο.

Έχουμε ήδη προσθέσει την enableAxis ιδιότητα στο αρχείο δυνατοτήτων και στη διασύνδεση barChartSettings. Προσθέστε τον παρακάτω κώδικα στο αρχείο barChart.tsπριν από την κλάση iVisual για να σχεδιάσετε τον άξονα X:

function getAxisTextFillColor(
    objects: DataViewObjects,
    colorPalette: ISandboxExtendedColorPalette,
    defaultColor: string
): string {
    if (colorPalette.isHighContrast) {
        return colorPalette.foreground.value;
    }

    return getValue<Fill>(
        objects,
        "enableAxis",
        "fill",
        {
            solid: {
                color: defaultColor,
            }
        },
    ).solid.color;
}

(Προαιρετικό) Προσθήκη χρώματος (αντικείμενα συνδεδεμένα με δεδομένα)

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

Screenshot of color selection on properties.

Έχουμε ήδη καθορίσει το colorSelector αντικείμενο στο αρχείο δυνατοτήτων .

Κάθε σημείο δεδομένων αντιπροσωπεύεται από ένα διαφορετικό χρώμα. Συμπεριλαμβάνουμε χρώμα στη διασύνδεση BarChartDataPoint και αντιστοιχίζουμε ένα προεπιλεγμένο χρώμα σε κάθε σημείο δεδομένων όταν ορίζεται στο IVisualHost.

function getColumnColorByIndex(
    category: DataViewCategoryColumn,
    index: number,
    colorPalette: ISandboxExtendedColorPalette,
): string {
    if (colorPalette.isHighContrast) {
        return colorPalette.background.value;
    }

    const defaultColor: Fill = {
        solid: {
            color: colorPalette.getColor(`${category.values[index]}`).value,
        }
    };

    return getCategoricalObjectValue<Fill>(
        category,
        index,
        'colorSelector',
        'fill',
        defaultColor
    ).solid.color;
}

function getColumnStrokeColor(colorPalette: ISandboxExtendedColorPalette): string {
    return colorPalette.isHighContrast
        ? colorPalette.foreground.value
        : null;
}

function getColumnStrokeWidth(isHighContrast: boolean): number {
    return isHighContrast
        ? 2
        : 0;
}

Η colorPalette υπηρεσία, στη visualTransform συνάρτηση, διαχειρίζεται αυτά τα χρώματα. Δεδομένου ότι visualTransform επαναλαμβάνεται σε καθένα από τα σημεία δεδομένων, είναι ένα ιδανικό σημείο για την αντιστοίχιση κατηγορικών αντικειμένων όπως το χρώμα.

Για πιο λεπτομερείς οδηγίες σχετικά με τον τρόπο προσθήκης χρώματος στο γράφημα ράβδων, μεταβείτε στην ενότητα Προσθήκη χρωμάτων στην απεικόνιση Power BI σας

Σημείωση

Επαληθεύστε ότι το τελικό αρχείο barChart.ts μοιάζει με αυτόν τον πηγαίο κώδικα barChart.ts ή κάντε λήψη του πηγαίου κώδικα barChart.ts και χρησιμοποιήστε το για να αντικαταστήσετε το αρχείο σας.

Βοηθητικό πρόγραμμα απαρίθμησης αντικειμένων (προαιρετικό)

Οι τιμές ιδιοτήτων αντικειμένου είναι διαθέσιμες ως μετα-δεδομένα στο dataView, αλλά δεν υπάρχει υπηρεσία που θα σας βοηθήσει να ανακτήσετε αυτές τις τιμές. ObjectEnumerationUtility Το είναι ένα προαιρετικό σύνολο στατικών συναρτήσεων που επαναλαμβάνουν τις dataView τιμές αντικειμένων και ανακτάται. Δημιουργήστε ένα αρχείο με την ονομασία objectEnumerationUtility.ts στον src φάκελο και αντιγράψτε τον παρακάτω κώδικα σε αυτόν:

/**
 * Gets property value for a particular object.
 *
 * @function
 * @param {DataViewObjects} objects - Map of defined objects.
 * @param {string} objectName       - Name of desired object.
 * @param {string} propertyName     - Name of desired property.
 * @param {T} defaultValue          - Default value of desired property.
 */
export function getValue<T>(objects: DataViewObjects, objectName: string, propertyName: string, defaultValue: T ): T {
    if(objects) {
        let object = objects[objectName];
        if(object) {
            let property: T = object[propertyName];
            if(property !== undefined) {
                return property;
            }
        }
    }
    return defaultValue;
}

/**
 * Gets property value for a particular object in a category.
 *
 * @function
 * @param {DataViewCategoryColumn} category - List of category objects.
 * @param {number} index                    - Index of category object.
 * @param {string} objectName               - Name of desired object.
 * @param {string} propertyName             - Name of desired property.
 * @param {T} defaultValue                  - Default value of desired property.
 */
export function getCategoricalObjectValue<T>(category: DataViewCategoryColumn, index: number, objectName: string, propertyName: string, defaultValue: T): T {
    let categoryObjects = category.objects;

    if (categoryObjects) {
        let categoryObject: DataViewObject = categoryObjects[index];
        if (categoryObject) {
            let object = categoryObject[objectName];
            if (object) {
                let property: T = <T>object[propertyName];
                if (property !== undefined) {
                    return property;
                }
            }
        }
    }
    return defaultValue;
}

Η συνάρτηση getCategoricalObjectValue παρέχει έναν εύχρηστο τρόπο πρόσβασης στις ιδιότητες βάσει του ευρετηρίου κατηγοριών τους. Πρέπει να καταχωρήσετε objectName και propertyName που συμφωνούν με το αντικείμενο και την ιδιότητα στο capabilities.json.

Ανατρέξτε στο objectEnumerationUtility.ts για τον πηγαίο κώδικα.

Δοκιμή της απεικόνισης

Εκτελέστε την απεικόνιση στον διακομιστή Power BI για να δείτε την εμφάνισή της:

  1. Στο PowerShell, μεταβείτε στον φάκελο του έργου και ξεκινήστε την εφαρμογή ανάπτυξης.

    pbiviz start
    

    Η απεικόνισή σας πλέον εκτελείται ενώ φιλοξενείται στον υπολογιστή σας.

    Σημαντικό

    Μην κλείσετε το παράθυρο του PowerShell μέχρι το τέλος της εκμάθησης. Για να διακόψετε την εκτέλεση της απεικόνισης, πληκτρολογήστε Ctrl+C και, εάν σας ζητηθεί, για να τερματίσετε τη μαζική εργασία, πληκτρολογήστε Y και πατήστε Enter.

  2. Προβάλετε την απεικόνιση σε Υπηρεσία Power BI επιλέγοντας την απεικόνιση Προγραμματιστής από το τμήμα παραθύρου Απεικόνιση.

    Screenshot of developer visual.

  3. Προσθήκη δεδομένων στην απεικόνιση

    Screenshot of data bound to field bucket.

  4. Σύρετε τα άκρα της απεικόνισης για να αλλάξετε το μέγεθος και παρατηρήστε πώς προσαρμόζεται η κλίμακα.

  5. Ενεργοποιήστε και απενεργοποιήστε τον άξονα Χ.

    Screenshot of X-Axis on property pane.

  6. Αλλάξτε τα χρώματα των διαφορετικών κατηγοριών.

Προσθήκη άλλων δυνατοτήτων

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

Συσκευασία της απεικόνισης

Για να μπορέσετε να φορτώσετε την απεικόνισή σας σε Power BI Desktop ή να τη μοιραστείτε με την κοινότητα στην Power BI Συλλογή απεικονίσεων, πρέπει να τη συσκευάσετε σε πακέτο.

Ακολουθήστε τις οδηγίες στο Πακέτο Power BI απεικόνιση για να προετοιμάσετε την απεικόνιση για κοινή χρήση.

Σημείωση

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

Επόμενα βήματα