Disposición de ejes Angular

Todos los gráficos Ignite UI for Angular incluyen opciones para configurar muchas opciones de diseño de ejes, como la ubicación, además de tener la capacidad de compartir ejes entre series o tener varios ejes en el mismo gráfico. Estas características se demuestran en los ejemplos que se dan a continuación.

the following examples can be applied to IgxCategoryChartComponent as well as IgxFinancialChartComponent controls.

60 以上のリアルタイム Angular チャート を使用して、何百万ものデータ ポイントを描画し、視覚化を構築します。これは、あらゆるアプリケーション シナリオに対応する最も広範なチャート ライブラリです。

無料で試してみる

Axis Locations Example

Para todos los ejes, puede especificar la ubicación del eje en relación con el área de trazado del gráfico. La propiedad xAxisLabelLocation de los gráficos Angular le permite colocar la línea del eje x y sus etiquetas encima o debajo del área de trazado. De manera similar, puede utilizar la propiedad yAxisLabelLocation para colocar el eje y en el lado izquierdo o derecho del área de trazado.

El siguiente ejemplo muestra la cantidad de electricidad renovable producida desde 2009, representada por un Gráfico de líneas. Hay un menú desplegable que le permite configurar yAxisLabelLocation para que pueda visualizar cómo se ven los ejes cuando las etiquetas se colocan en el lado izquierdo o derecho en el interior o exterior del área de trazado del gráfico.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

export class CountryRenewableElectricityItem {
    public constructor(init: Partial<CountryRenewableElectricityItem>) {
        Object.assign(this, init);
    }

    public year: string;
    public europe: number;
    public china: number;
    public america: number;

}
export class CountryRenewableElectricity extends Array<CountryRenewableElectricityItem> {
    public constructor(items: Array<CountryRenewableElectricityItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CountryRenewableElectricityItem(
                {
                    year: `2009`,
                    europe: 34,
                    china: 21,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2010`,
                    europe: 43,
                    china: 26,
                    america: 24
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2011`,
                    europe: 66,
                    china: 29,
                    america: 28
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2012`,
                    europe: 69,
                    china: 32,
                    america: 26
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2013`,
                    europe: 58,
                    china: 47,
                    america: 38
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2014`,
                    europe: 40,
                    china: 46,
                    america: 31
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2015`,
                    europe: 78,
                    china: 50,
                    america: 19
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2016`,
                    europe: 13,
                    china: 90,
                    america: 52
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2017`,
                    europe: 78,
                    china: 132,
                    america: 50
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2018`,
                    europe: 40,
                    china: 134,
                    america: 34
                }),
                new CountryRenewableElectricityItem(
                {
                    year: `2019`,
                    europe: 80,
                    china: 96,
                    america: 38
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxPropertyEditorPanelModule } from 'igniteui-angular-layouts';
import { IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxPropertyEditorPanelModule,
    IgxLegendModule,
    IgxCategoryChartModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-angular-core';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import { IgxLegendComponent, IgxCategoryChartComponent } from 'igniteui-angular-charts';
import { IgxPropertyEditorPanelComponent, IgxPropertyEditorPropertyDescriptionComponent } from 'igniteui-angular-layouts';

import { defineAllComponents } from 'igniteui-webcomponents';

defineAllComponents();

@Component({
    standalone: false,
    selector: "app-root",
    styleUrls: ["./app.component.scss"],
    templateUrl: "./app.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})

export class AppComponent implements AfterViewInit
{

    @ViewChild("legend", { static: true } )
    private legend: IgxLegendComponent
    @ViewChild("propertyEditorPanel1", { static: true } )
    private propertyEditorPanel1: IgxPropertyEditorPanelComponent
    @ViewChild("yAxisLabelLocation", { static: true } )
    private yAxisLabelLocation: IgxPropertyEditorPropertyDescriptionComponent
    @ViewChild("chart", { static: true } )
    private chart: IgxCategoryChartComponent
    private _countryRenewableElectricity: CountryRenewableElectricity = null;
    public get countryRenewableElectricity(): CountryRenewableElectricity {
        if (this._countryRenewableElectricity == null)
        {
            this._countryRenewableElectricity = new CountryRenewableElectricity();
        }
        return this._countryRenewableElectricity;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            LegendDescriptionModule.register(context);
            CategoryChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public constructor(private _detector: ChangeDetectorRef)
    {
    }

    public ngAfterViewInit(): void
    {
    }

}

tsコピー

<div class="container vertical sample">
  <div class="options vertical">
      <igx-property-editor-panel
      [componentRenderer]="renderer"
      [target]="chart"
      descriptionType="CategoryChart"
      isHorizontal="true"
      isWrappingEnabled="false"
      name="propertyEditorPanel1"
      #propertyEditorPanel1>
          <igx-property-editor-property-description
          propertyPath="YAxisLabelLocation"
          name="YAxisLabelLocation"
          #yAxisLabelLocation
          label="Y Axis - Label Location"
          primitiveValue="OutsideRight">
          </igx-property-editor-property-description>
      </igx-property-editor-panel>
  </div>
  <div class="legend-title">
      Renewable Electricity Generated
  </div>
  <div class="legend">
      <igx-legend
      name="legend"
      #legend
      orientation="Horizontal">
      </igx-legend>
  </div>
  <div class="container fill">
      <igx-category-chart
      name="chart"
      #chart
      computedPlotAreaMarginMode="Series"
      [dataSource]="countryRenewableElectricity"
      includedProperties="year, europe, china, america"
      [legend]="legend"
      chartType="Line"
      yAxisTitle="Labels Location"
      isHorizontalZoomEnabled="false"
      isVerticalZoomEnabled="false"
      xAxisInterval="1"
      yAxisLabelLocation="OutsideRight">
      </igx-category-chart>
  </div>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

Axis Advanced Scenarios

Para escenarios de diseño de ejes más avanzados, puede usar Angular Gráfico de datos para compartir ejes, agregar múltiples ejes y o ejes x en la misma área de gráfico o incluso cruzar ejes en valores específicos. Los siguientes ejemplos muestran cómo usar estas funciones de IgxDataChartComponent.

Axis Sharing Example

Puede compartir y agregar múltiples ejes en la misma área de gráfico de Angular IgxDataChartComponent. Es un escenario común usar IgxTimeXAxisComponent compartido y agregar múltiples IgxNumericYAxisComponent para representar gráficamente muchas fuentes de datos que tienen una amplia gama de valores (por ejemplo, precios de acciones y volúmenes de transacciones de acciones).

El siguiente ejemplo muestra un gráfico de precio de acciones y volumen comercial con un gráfico de acciones y un Gráfico de columnas trazados. En este caso, el eje Y de la izquierda lo utiliza el Gráfico de columnas y el eje Y de la derecha lo utiliza el gráfico de acciones, mientras que el eje X se comparte entre los dos.

EXAMPLE

DATA

MODULES

TS

HTML

SCSS

import { Injectable } from "@angular/core";

@Injectable()
export class SampleFinancialData {

    public static create(): any[] {
        // initial values
        let v = 10000;
        let o = 500;
        let h = o + (Math.random() * 5);
        let l = o - (Math.random() * 5);
        let c = l + (Math.random() * (h - l));

        const items = 100;
        const end = new Date(2020, 11, 1);
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            // const date = this.getDate(time);
            // adding new data item
            data.push({ Time: time, Date: date, Close: c, Open: o, High: h, Low: l, Volume: v });
            // generating new values
            const mod = Math.random() - 0.4;
            o = o + (mod * 5 * 2);
            v = v + (mod * 5 * 100);
            h = o + (Math.random() * 5);
            l = o - (Math.random() * 5);
            c = l + (Math.random() * (h - l));
            time = this.addDays(time, 1);
        }
        return data;
    }

    public static addDays(dt: Date, days: number): Date {
        return new Date(dt.getTime() + days * 24 * 60 * 60 * 1000);
    }
    public static getDate(dt: Date): string {
        return dt.getDay() + "/" + dt.getMonth() + "/" + dt.getFullYear();
    }
}
tsコピー

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxNumericXAxisModule, IgxNumericYAxisModule, IgxMoneyFlowIndexIndicatorModule, IgxLegendModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxFinancialPriceSeriesModule } from "igniteui-angular-charts";
import { SampleFinancialData } from "./SampleFinancialData";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxNumericXAxisModule,
    IgxNumericYAxisModule,
    IgxMoneyFlowIndexIndicatorModule,
    IgxLegendModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxFinancialPriceSeriesModule
],
  providers: [SampleFinancialData],
schemas: []
})
export class AppModule {}
tsコピー

import { Component, OnInit } from "@angular/core";
import { SampleFinancialData } from "./SampleFinancialData";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent implements OnInit {

    public data: any[] = SampleFinancialData.create();
    constructor() { }

    public ngOnInit() {
    }

}
tsコピー

<div class="container vertical">
        <igx-data-chart
            width="100%"
            height="100%"
            [dataSource]="data">

            <igx-category-x-axis #xAxisShared label="Date" gap=0.75></igx-category-x-axis>
            <igx-numeric-y-axis #yAxisRight
                labelLocation="OutsideRight"
                title="Stock Price"
                minimumValue="400"
                maximumValue="700">
            </igx-numeric-y-axis>
            <igx-numeric-y-axis #yAxisLeft
                labelLocation="OutsideLeft"
                title="Trade Volume"
                minimumValue="5000"
                maximumValue="45000"
                abbreviateLargeNumbers=true
                majorStrokeThickness="0">
            </igx-numeric-y-axis>

            <igx-column-series [xAxis]="xAxisShared"
                [yAxis]="yAxisLeft"
                valueMemberPath="Volume"
                showDefaultTooltip=true
                title="Trade Volume">
            </igx-column-series>

            <igx-financial-price-series
                [xAxis]="xAxisShared"
                [yAxis]="yAxisRight"
                displayType="Candlestick"
                highMemberPath="High"
                lowMemberPath="Low"
                closeMemberPath="Close"
                openMemberPath="Open"
                volumeMemberPath="Volume"></igx-financial-price-series>
        </igx-data-chart>
</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Axis Crossing Example

Además de colocar los ejes fuera del área del gráfico, el Angular IgxDataChartComponent también proporciona opciones para colocar los ejes dentro del área del gráfico y hacer que se crucen en valores específicos. Por ejemplo, puede crear un gráfico trigonométrico configurando las propiedades crossingAxis y crossingValue tanto en el eje x como en el eje y para representar las líneas y las etiquetas de los ejes de modo que se crucen en el punto de origen (0, 0).

El siguiente ejemplo muestra una onda Sin y Cos representada por un gráfico de dispersión con los ejes X e Y cruzándose en el punto de origen (0, 0).

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";

import { IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartScatterModule, IgxLegendModule } from "igniteui-angular-charts";


@NgModule({
  bootstrap: [AppComponent],
  declarations: [
    AppComponent,

],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    FormsModule,
    IgxDataChartCoreModule,
    IgxDataChartCategoryModule,
    IgxDataChartScatterModule,
    IgxLegendModule
],
  providers: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from "@angular/core";

@Component({
  standalone: false,
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  templateUrl: "./app.component.html"
})
export class AppComponent {

    public SinData: any[];
    public CosData: any[];

    public YAxisCrossingValue : number = 0;
    public XAxisCrossingValue : number = 0;

    constructor() {

      this.SinData= [];
      this.CosData= [];

        for (let i = -360; i <= 360; i+=10)
        {
            const radians = (i * Math.PI) / 180;
            const sin = Math.sin(radians);
            const cos = Math.cos(radians);

            this.SinData.push( { X : i, Y : sin });
            this.CosData.push( { X : i, Y : cos });
        }
    }

    public OnXAxisCrossingValueChanged(e : any) {
        this.XAxisCrossingValue = e.target.value;
    }

    public OnYAxisCrossingValueChanged(e : any) {
        this.YAxisCrossingValue = e.target.value;
    }
}
tsコピー

<div class="container vertical">
    <div class="options horizontal">

        <label>X Axis Crossing Value:  </label>
        <label class="options-value" ><span [textContent]="XAxisCrossingValue" ></span></label>
        <input type="range" min="-1.25" max="1.25" step="0.25" value="0" (input)="OnXAxisCrossingValueChanged($event)" />

        <label>Y Axis Crossing Value:  </label>
        <label class="options-value" ><span [textContent]="YAxisCrossingValue" ></span></label>
        <input type="range" min="-360" max="360" step="40" value="0" (input)="OnYAxisCrossingValueChanged($event)" />
    </div>

    <div class="container">
        <igx-data-chart isHorizontalZoomEnabled=true isVerticalZoomEnabled=true
            width="100%" height="100%" [dataSource]="SinData" >
            <igx-numeric-x-axis #xAxis interval="40"
                minimumValue="-360"
                maximumValue="360"
                labelLocation="InsideBottom"
                [crossingAxis]="yAxis"
                [crossingValue]="XAxisCrossingValue">
            </igx-numeric-x-axis>
            <igx-numeric-y-axis #yAxis
                minimumValue="-1.25"
                maximumValue="1.25"
                interval="0.25"
                labelLocation="InsideLeft"
                [crossingAxis]="xAxis"
                [crossingValue]="YAxisCrossingValue" >
            </igx-numeric-y-axis>

            <igx-scatter-spline-series markerType="Circle"
                [dataSource]="SinData"
                [xAxis]="xAxis"
                [yAxis]="yAxis"
                xMemberPath="X"
                yMemberPath="Y" >
            </igx-scatter-spline-series>

            <igx-scatter-spline-series markerType="Circle"
                [dataSource]="CosData"
                [xAxis]="xAxis"
                [yAxis]="yAxis"
                xMemberPath="X"
                yMemberPath="Y">
            </igx-scatter-spline-series>
        </igx-data-chart>

</div>
htmlコピー

/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
scssコピー

Edit in: Codesandbox

Additional Resources

Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:

• Líneas de cuadrícula del eje
• Opciones de eje

API References

La siguiente es una lista de miembros de API mencionados en las secciones anteriores: d en las secciones anteriores:

IgxDataChartComponent	IgxCategoryChartComponent
Axes ➔ IgxNumericYAxisComponent ➔ crossingAxis	Ninguno
Axes ➔ IgxNumericYAxisComponent ➔ crossingValue	Ninguno
Axes ➔ IgxNumericXAxisComponent ➔ isInverted	xAxisInverted
Axes ➔ IgxNumericYAxisComponent ➔ isInverted	yAxisInverted
Axes ➔ IgxNumericYAxisComponent ➔ LabelLocation	yAxisLabelLocation
Axes ➔ IgxNumericXAxisComponent ➔ LabelLocation	xAxisLabelLocation
Axes ➔ IgxNumericYAxisComponent ➔ LabelHorizontalAlignment	yAxisLabelHorizontalAlignment
Axes ➔ IgxNumericXAxisComponent ➔ LabelVerticalAlignment	xAxisLabelVerticalAlignment
Axes ➔ IgxNumericYAxisComponent ➔ LabelVisibility	yAxisLabelVisibility
Axes ➔ IgxNumericXAxisComponent ➔ LabelVisibility	xAxisLabelVisibility