Grafik yardımcı programları

ChartUtils, Power BI Görsellerinde eksen, veri etiketleri ve göstergeler oluşturmaya yönelik bir dizi arabirim ve yöntemdir.

Yükleme

Paketi yüklemek için geçerli görselinizle dizinde aşağıdaki komutu çalıştırmanız gerekir:

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

Eksen Yardımcısı

Eksen yardımcısı (axis yardımcı programlardaki nesne), eksen içeren işlemeleri basitleştirmeye yönelik işlevler sağlar.

Modül aşağıdaki işlevleri sağlar:

getRecommendedNumberOfTicksForXAxis

Bu işlev, grafiğin genişliğine göre önerilen onay işareti sayısını döndürür.

function getRecommendedNumberOfTicksForXAxis(availableWidth: number): number;

Örnek:

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

// returns: 8

getRecommendedNumberOfTicksForYAxis

Bu işlev, grafiğin yüksekliğine göre önerilen onay işareti sayısını döndürür.

function getRecommendedNumberOfTicksForYAxis(availableWidth: number);

Örnek:

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

// returns: 3

getBestNumberOfTicks

Minimum değer, maksimum değer, ölçü meta verileri ve maksimum değer sayısı temelinde en uygun değer sayısını alır.

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

Örnek:

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

Bu işlev, değer etiketlerinin kenar boşluklarını döndürür.

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;

Örnek:

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

Dizenin null, tanımsız veya boş olup olmadığını denetler.

function isOrdinal(type: ValueTypeDescriptor): boolean;

Örnek:

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

// returns: true

isDateTime

Değerin DateTime türünde olup olmadığını denetler.

function isDateTime(type: ValueTypeDescriptor): boolean;

Örnek:

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

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

// returns: true

getCategoryThickness

Gerçek kategori kalınlığını almak için D3 ölçeğini kullanır.

function getCategoryThickness(scale: any): number;

Örnek:

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

Bu işlev sıralı ölçeği tersine çevirir. x < scale.range()[0]ise scale.domain()[0] döndürülür. Aksi takdirde, scale.domain() içindeki = x olan <en büyük öğeyi döndürür.

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

Örnek:

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

Bu işlev en yakın x ekseni dizinini bulur ve döndürür.

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

Örnek:

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

Bu işlev, ölçekteki değerlerin farkını hesaplar ve döndürür.

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

Örnek:

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

Bu işlev bir eksen için değer etki alanı oluşturur.

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

Örnek:

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

Bu işlev bir kategori sütununun öğesini alır ValueType . Varsayılan değer, türün mevcut olmadığı durumdur Text .

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

Örnek:

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

Bu işlev ölçek de dahil olmak üzere bir D3 ekseni oluşturur. Dikey veya yatay olabilir ve tarih saat, sayısal veya metin olabilir.

function createAxis(options: CreateAxisOptions): IAxisProperties;

Örnek:

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

Bu işlev özelleştirilmiş bir etki alanı ayarlar, ancak hiçbir şey ayarlı olmadığında değişmez.

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

Örnek:

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

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

axis.applyCustomizedDomain(customizedDomain, existingDomain);

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

combineDomain

Bu işlev, değerlerden biri ayarlandıysa zorunlu etki alanını gerçek etki alanıyla birleştirir. forcedDomain ilk önceliğe göredir. Herhangi bir başvuru noktası gerektiriyorsa etki alanını genişletir.

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

Örnek:

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

Bu işlev, sayının 10'un gücünde olup olmadığını gösterir.

function powerOfTen(d: any): boolean;

Örnek:

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

axis.powerOfTen(10);

// returns: true

DataLabelManager

etiketlerin DataLabelManager oluşturulmasına ve bakımının sağlanmasına yardımcı olur. Bağlantı noktasını veya dikdörtgeni kullanarak etiket öğelerini düzenler. Öğeleri yeniden konumlandırmak veya gizlemek için çakışmalar otomatik olarak algılanabilir.

DataLabelManager sınıfı aşağıdaki yöntemleri sağlar:

hideCollidedLabels

Bu yöntem, tuvaldeki etiketlerin konumunu ve görünürlüğünü etiket boyutlarına ve çakışanlara göre düzenler.

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

Örnek:

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

IsValid

Bu statik yöntem, sağlanan dikdörtgenin geçerli olup olmadığını, yani pozitif genişlik ve yüksekliğe sahip olup olmadığını denetler.

function isValid(rect: IRect): boolean;

Örnek:

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

DataLabelManager.isValid(rectangle);

// returns: true

DataLabelUtils

, DataLabelUtils veri etiketlerini işlemek için yardımcı programlar sağlar.

yöntemi aşağıdaki işlevleri, arabirimleri ve sınıfları sağlar:

getLabelPrecision

Bu işlev, sağlanan bir biçimden duyarlığı hesaplar.

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

getLabelFormattedText

Bu işlev, sağlanan biçimden biçim duyarlığı döndürür.

function getLabelFormattedText(options: LabelFormattedTextOptions): string;

Örnek:

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

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

dataLabelUtils.getLabelFormattedText(options);

enumerateDataLabels

Bu işlev, veri etiketleri için VisualObjectInstance döndürür.

function enumerateDataLabels(
  options: VisualDataLabelsSettingsOptions
): VisualObjectInstance;

enumerateCategoryLabels

Bu işlev, Kategori veri etiketleri için VisualObjectInstance'ı bir numaralandırma nesnesine ekler.

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

createColumnFormatterCacheManager

Bu işlev, biçimlendirilmiş etiketlere hızlı erişim sağlayan Önbellek Yöneticisi'ni döndürür.

function createColumnFormatterCacheManager(): IColumnFormatterCacheManager;

Örnek:

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"

Gösterge hizmeti

Hizmet, Legend Power BI görselleri için Power BI göstergelerini oluşturmaya ve yönetmeye yönelik yardımcı arabirimler sağlar.

Modül aşağıdaki işlevleri ve arabirimleri sağlar:

createLegend

Bu yardımcı işlev, Power BI Özel Görsel göstergesi oluşturmayı basitleştirir.

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;

Örnek:

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

Bu Arabirim, gösterge oluşturma için gereken tüm yöntemleri uygular.

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

Bu işlev, verilen SVG metin özellikleriyle metnin yüksekliğini ölçer.

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

Örnek:

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

İlgili içerik

  • Last updated on