Diagramverktøy

ChartUtils er et sett med grensesnitt og metoder for å opprette akse, dataetiketter og forklaringer i Power BI-visualobjekter.

Installasjon

Hvis du vil installere pakken, bør du kjøre følgende kommando i katalogen med gjeldende visualobjekt:

npm install powerbi-visuals-utils-chartutils --save

Aksehjelper

Aksehjelperen (axis objekt i verktøy) gir funksjoner for å forenkle manipuleringer som har en akse.

Modulen inneholder følgende funksjoner:

getRecommendedNumberOfTicksForXAxis

Denne funksjonen returnerer det anbefalte antallet flått i henhold til bredden på diagrammet.

function getRecommendedNumberOfTicksForXAxis(availableWidth: number): number;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...
axis.getRecommendedNumberOfTicksForXAxis(1024);

// returns: 8

getRecommendedNumberOfTicksForYAxis

Denne funksjonen returnerer det anbefalte antallet flått i henhold til høyden på diagrammet.

function getRecommendedNumberOfTicksForYAxis(availableWidth: number);

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...
axis.getRecommendedNumberOfTicksForYAxis(100);

// returns: 3

getBestNumberOfTicks

Får det optimale antallet flått basert på minimumsverdi, maksimumsverdi, målmetadata og maksimalt antall kryss.

function getBestNumberOfTicks(
  min: number,
  max: number,
  valuesMetadata: DataViewMetadataColumn[],
  maxTickCount: number,
  isDateTime?: boolean
): number;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...
var dataViewMetadataColumnWithIntegersOnly: powerbi.DataViewMetadataColumn[] = [
  {
    displayName: "col1",
    isMeasure: true,
    type: ValueType.fromDescriptor({ integer: true })
  },
  {
    displayName: "col2",
    isMeasure: true,
    type: ValueType.fromDescriptor({ integer: true })
  }
];
var actual = axis.getBestNumberOfTicks(
  0,
  3,
  dataViewMetadataColumnWithIntegersOnly,
  6
);

// returns: 4

getTickLabelMargins

Denne funksjonen returnerer margene for akseetiketter.

function getTickLabelMargins(
  viewport: IViewport,
  yMarginLimit: number,
  textWidthMeasurer: ITextAsSVGMeasurer,
  textHeightMeasurer: ITextAsSVGMeasurer,
  axes: CartesianAxisProperties,
  bottomMarginLimit: number,
  properties: TextProperties,
  scrollbarVisible?: boolean,
  showOnRight?: boolean,
  renderXAxis?: boolean,
  renderY1Axis?: boolean,
  renderY2Axis?: boolean
): TickLabelMargins;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

axis.getTickLabelMargins(
  plotArea,
  marginLimits.left,
  TextMeasurementService.measureSvgTextWidth,
  TextMeasurementService.estimateSvgTextHeight,
  axes,
  marginLimits.bottom,
  textProperties,
  /*scrolling*/ false,
  showY1OnRight,
  renderXAxis,
  renderY1Axis,
  renderY2Axis
);

// returns:  xMax, yLeft, yRight, stackHeigh;

isOrdinal

Kontrollerer om en streng er null, udefinert eller tom.

function isOrdinal(type: ValueTypeDescriptor): boolean;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...
let type = ValueType.fromDescriptor({ misc: { barcode: true } });
axis.isOrdinal(type);

// returns: true

isDateTime

Kontrollerer om en verdi er av Typen DateTime.

function isDateTime(type: ValueTypeDescriptor): boolean;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

axis.isDateTime(ValueType.fromDescriptor({ dateTime: true }));

// returns: true

getCategoryThickness

Bruker D3-skalaen til å få den faktiske kategoritykkelsen.

function getCategoryThickness(scale: any): number;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

let range = [0, 100];
let domain = [0, 10];
let scale = d3.scale
  .linear()
  .domain(domain)
  .range(range);
let actualThickness = axis.getCategoryThickness(scale);

invertOrdinalScale

Denne funksjonen inverterer ordenstallskalaen. Hvis x < scale.range()[0], returneres scale.domain()[0]. Ellers returneres det største elementet i scale.domain() som er <= x.

function invertOrdinalScale(scale: d3.scale.Ordinal<any, any>, x: number);

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

let domain: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  pixelSpan: number = 100,
  ordinalScale: d3.scale.ordinal = axis.createOrdinalScale(
    pixelSpan,
    domain,
    0.4
  );

axis.invertOrdinalScale(ordinalScale, 49);

// returns: 4

findClosestXAxisIndex

Denne funksjonen finner og returnerer den nærmeste x-akseindeksen.

function findClosestXAxisIndex(
  categoryValue: number,
  categoryAxisValues: AxisHelperCategoryDataPoint[]
): number;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

/**
 * Finds the index of the category of the given x coordinate given.
 * pointX is in non-scaled screen-space, and offsetX is in render-space.
 * offsetX does not need any scaling adjustment.
 * @param {number} pointX The mouse coordinate in screen-space, without scaling applied
 * @param {number} offsetX Any left offset in d3.scale render-space
 * @return {number}
 */
private findIndex(pointX: number, offsetX?: number): number {
    // we are using mouse coordinates that do not know about any potential CSS transform scale
    let xScale = this.scaleDetector.getScale().x;
    if (!Double.equalWithPrecision(xScale, 1.0, 0.00001)) {
        pointX = pointX / xScale;
    }
    if (offsetX) {
        pointX += offsetX;
    }

    let index = axis.invertScale(this.xAxisProperties.scale, pointX);
    if (this.data.isScalar) {
        // When we have scalar data the inverted scale produces a category value, so we need to search for the closest index.
        index = axis.findClosestXAxisIndex(index, this.data.categoryData);
    }

    return index;
}

diffScaled

Denne funksjonen beregner og returnerer en diff med verdier i skalaen.

function diffScaled(
  scale: d3.scale.Linear<any, any>,
  value1: any,
  value2: any
): number;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

var scale: d3.scale.Linear<number, number>,
    range = [0, 999],
    domain = [0, 1, 2, 3, 4, 5, 6, 7, 8, 999];

scale = d3.scale.linear()
    .range(range)
    .domain(domain);

return axis.diffScaled(scale, 0, 0));

// returns: 0

createDomain

Denne funksjonen oppretter et domene med verdier for en akse.

function createDomain(
  data: any[],
  axisType: ValueTypeDescriptor,
  isScalar: boolean,
  forcedScalarDomain: any[],
  ensureDomain?: NumberRange
): number[];

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

var cartesianSeries = [
  {
    data: [
      { categoryValue: 7, value: 11, categoryIndex: 0, seriesIndex: 0 },
      {
        categoryValue: 9,
        value: 9,
        categoryIndex: 1,
        seriesIndex: 0
      },
      {
        categoryValue: 15,
        value: 6,
        categoryIndex: 2,
        seriesIndex: 0
      },
      { categoryValue: 22, value: 7, categoryIndex: 3, seriesIndex: 0 }
    ]
  }
];

var domain = axis.createDomain(
  cartesianSeries,
  ValueType.fromDescriptor({ text: true }),
  false,
  []
);

// returns: [0, 1, 2, 3]

getCategoryValueType

Denne funksjonen henter ValueType en kategorikolonne. Standard er Text hvis typen ikke finnes.

function getCategoryValueType(
  data: any[],
  axisType: ValueTypeDescriptor,
  isScalar: boolean,
  forcedScalarDomain: any[],
  ensureDomain?: NumberRange
): number[];

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

var cartesianSeries = [
  {
    data: [
      { categoryValue: 7, value: 11, categoryIndex: 0, seriesIndex: 0 },
      {
        categoryValue: 9,
        value: 9,
        categoryIndex: 1,
        seriesIndex: 0
      },
      {
        categoryValue: 15,
        value: 6,
        categoryIndex: 2,
        seriesIndex: 0
      },
      { categoryValue: 22, value: 7, categoryIndex: 3, seriesIndex: 0 }
    ]
  }
];

axis.getCategoryValueType(
  cartesianSeries,
  ValueType.fromDescriptor({ text: true }),
  false,
  []
);

// returns: [0, 1, 2, 3]

createAxis

Denne funksjonen oppretter en D3-akse, inkludert skala. Kan være loddrett eller vannrett, og enten datetime, numerisk eller tekst.

function createAxis(options: CreateAxisOptions): IAxisProperties;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
import { valueFormatter } from "powerbi-visuals-utils-formattingutils";
// ...

var dataPercent = [0.0, 0.33, 0.49];

var formatStringProp: powerbi.DataViewObjectPropertyIdentifier = {
  objectName: "general",
  propertyName: "formatString"
};
let metaDataColumnPercent: powerbi.DataViewMetadataColumn = {
  displayName: "Column",
  type: ValueType.fromDescriptor({ numeric: true }),
  objects: {
    general: {
      formatString: "0 %"
    }
  }
};

var os = axis.createAxis({
  pixelSpan: 100,
  dataDomain: [dataPercent[0], dataPercent[2]],
  metaDataColumn: metaDataColumnPercent,
  formatString: valueFormatter.getFormatString(
    metaDataColumnPercent,
    formatStringProp
  ),
  outerPadding: 0.5,
  isScalar: true,
  isVertical: true
});

applyCustomizedDomain

Denne funksjonen angir et tilpasset domene, men det endres ikke når ingenting er angitt.

function applyCustomizedDomain(customizedDomain: any[], forcedDomain: any[]): any[];

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

let customizedDomain = [undefined, 20],
  existingDomain = [0, 10];

axis.applyCustomizedDomain(customizedDomain, existingDomain);

// returns: {0:0, 1:20}

combineDomain

Denne funksjonen kombinerer det tvangsdomenet med det faktiske domenet hvis en av verdiene ble angitt. TvungenDomene er i første prioritet. Utvider domenet hvis et referansepunkt krever det.

function combineDomain(
  forcedDomain: any[],
  domain: any[],
  ensureDomain?: NumberRange
): any[];

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

let forcedYDomain = this.valueAxisProperties
  ? [this.valueAxisProperties["secStart"], this.valueAxisProperties["secEnd"]]
  : null;

let xDomain = [minX, maxX];

axis.combineDomain(forcedYDomain, xDomain, ensureXDomain);

powerOfTen

Denne funksjonen angir om tallet er potens på 10.

function powerOfTen(d: any): boolean;

Eksempel:

import { axis } from "powerbi-visuals-utils-chartutils";
// ...

axis.powerOfTen(10);

// returns: true

DataLabelManager

Hjelper DataLabelManager deg med å opprette og vedlikeholde etiketter. Den ordner etikettelementer ved hjelp av ankerpunktet eller rektanglet. Kollisjoner kan oppdages automatisk for å flytte eller skjule elementer.

Klassen DataLabelManager inneholder følgende metoder:

hideCollidedLabels

Denne metoden ordner etikettenes posisjon og synlighet på lerretet i henhold til etikettstørrelser og overlapping.

function hideCollidedLabels(
  viewport: IViewport,
  data: any[],
  layout: any,
  addTransform: boolean = false
  hideCollidedLabels?: boolean
): LabelEnabledDataPoint[];

Eksempel:

let dataLabelManager = new DataLabelManager();
let filteredData = dataLabelManager.hideCollidedLabels(
  this.viewport,
  values,
  labelLayout,
  true,
  true
);

IsValid

Denne statiske metoden kontrollerer om det angitte rektanglet er gyldig, det vil vil eksempelvis ha positiv bredde og høyde.

function isValid(rect: IRect): boolean;

Eksempel:

let rectangle = {
  left: 150,
  top: 130,
  width: 120,
  height: 110
};

DataLabelManager.isValid(rectangle);

// returns: true

DataLabelUtils

Inneholder DataLabelUtils verktøy for å manipulere dataetiketter.

Metoden inneholder følgende funksjoner, grensesnitt og klasser:

getLabelPrecision

Denne funksjonen beregner presisjon fra et angitt format.

function getLabelPrecision(precision: number, format: string): number;

getLabelFormattedText

Denne funksjonen returnerer formatpresisjon fra det angitte formatet.

function getLabelFormattedText(options: LabelFormattedTextOptions): string;

Eksempel:

import { dataLabelUtils } from "powerbi-visuals-utils-chartutils";
// ...

let options: LabelFormattedTextOptions = {
  text: "some text",
  fontFamily: "sans",
  fontSize: "15",
  fontWeight: "normal"
};

dataLabelUtils.getLabelFormattedText(options);

nummerereDataLabels

Denne funksjonen returnerer VisualObjectInstance for dataetiketter.

function enumerateDataLabels(
  options: VisualDataLabelsSettingsOptions
): VisualObjectInstance;

nummerereCategoryLabels

Denne funksjonen legger til VisualObjectInstance for kategoridataetiketter i et opplistingsobjekt.

function enumerateCategoryLabels(
  enumeration: VisualObjectInstanceEnumerationObject,
  dataLabelsSettings: VisualDataLabelsSettings,
  withFill: boolean,
  isShowCategory: boolean = false,
  fontSize?: number
): void;

createColumnFormatterCacheManager

Denne funksjonen returnerer Hurtigbufferbehandling som gir rask tilgang til formaterte etiketter.

function createColumnFormatterCacheManager(): IColumnFormatterCacheManager;

Eksempel:

import { dataLabelUtils } from "powerbi-visuals-utils-chartutils";
// ...

let value: number = 200000;

labelSettings.displayUnits = 1000000;
labelSettings.precision = 1;

let formattersCache = DataLabelUtils.createColumnFormatterCacheManager();
let formatter = formattersCache.getOrCreate(null, labelSettings);
let formattedValue = formatter.format(value);

// formattedValue == "0.2M"

Forklaringstjeneste

Tjenesten Legend tilbyr hjelpegrensesnitt for å opprette og administrere Power BI-forklaringer for Power BI-visualobjekter.

Modulen inneholder følgende funksjoner og grensesnitt:

createLegend

Denne hjelpefunksjonen forenkler oppretting av egendefinert visualobjekt i Power BI.

function createLegend(
  legendParentElement: HTMLElement, // top visual element, container in which legend will be created
  isScrollable: boolean = false, // indicates that legend could be scrollable or not
  legendPosition: LegendPosition = LegendPosition.Top // Position of the legend inside of legendParentElement container
): ILegend;

Eksempel:

public constructor(options: VisualConstructorOptions) {
    this.visualInitOptions = options;
    this.layers = [];

    var element = this.element = options.element;
    var viewport = this.currentViewport = options.viewport;
    var hostServices = options.host;

    //... some other init calls

    this.legend = createLegend(
        element,
        true);
}

ILegend

Dette grensesnittet implementerer alle metoder som er nødvendige for oppretting av forklaring.

export interface ILegend {
  getMargins(): IViewport;
  isVisible(): boolean;
  changeOrientation(orientation: LegendPosition): void; // processing legend orientation
  getOrientation(): LegendPosition; // get information about current legend orientation
  drawLegend(data: LegendData, viewport: IViewport); // all legend rendering code is placing here
  /**
   * Reset the legend by clearing it
   */
  reset(): void;
}

drawLegend

Denne funksjonen måler høyden på teksten med de angitte SVG-tekstegenskapene.

function drawLegend(data: LegendData, viewport: IViewport): void;

Eksempel:

private renderLegend(): void {
    if (!this.isInteractive) {
        let legendObjectProperties = this.data.legendObjectProperties;
        if (legendObjectProperties) {
            let legendData = this.data.legendData;
            LegendData.update(legendData, legendObjectProperties);
            let position = <string>legendObjectProperties[legendProps.position];
            if (position)
                this.legend.changeOrientation(LegendPosition[position]);

            this.legend.drawLegend(legendData, this.parentViewport);
        } else {
            this.legend.changeOrientation(LegendPosition.Top);
            this.legend.drawLegend({ dataPoints: [] }, this.parentViewport);
        }
    }
}

Legge til interaktivitet i visualobjekter etter visualobjektvalg i Power BI

Tilbakemeldinger

Var denne siden nyttig?

Last updated on 2025-12-15

Diagramverktøy

Installasjon

Aksehjelper

getRecommendedNumberOfTicksForXAxis

getRecommendedNumberOfTicksForYAxis

getBestNumberOfTicks

getTickLabelMargins

isOrdinal

isDateTime

getCategoryThickness

invertOrdinalScale

findClosestXAxisIndex

diffScaled

createDomain

getCategoryValueType

createAxis

applyCustomizedDomain

combineDomain

powerOfTen

DataLabelManager

hideCollidedLabels

IsValid

DataLabelUtils

getLabelPrecision

getLabelFormattedText

nummerereDataLabels

nummerereCategoryLabels

createColumnFormatterCacheManager

Forklaringstjeneste

createLegend

ILegend

drawLegend

Relatert innhold

Tilbakemeldinger

Flere ressurser