Web Components Diseños de ejes

Todos los gráficos Ignite UI for Web Components 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.

Los siguientes ejemplos se pueden aplicar a los controles IgcCategoryChartComponent así como a IgcFinancialChartComponent.

Ejemplo de ubicaciones de ejes

Para todos los ejes, puede especificar la ubicación del eje en relación con el área de trazado del gráfico. La xAxisLabelLocation propiedad de los gráficos Web Components le permite colocar la línea del eje x y sus etiquetas por encima o por debajo del área de la gráfica. Del mismo modo, puede utilizar la propiedad para colocar el eje Y en el yAxisLabelLocation 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

TS

HTML

CSS

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 { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcLegendModule, IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, LegendDescriptionModule, CategoryChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcLegendComponent, IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { CountryRenewableElectricityItem, CountryRenewableElectricity } from './CountryRenewableElectricity';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcLegendModule,
    IgcCategoryChartModule
);

export class Sample {

    private legend: IgcLegendComponent
    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private yAxisLabelLocation: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcCategoryChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var yAxisLabelLocation = this.yAxisLabelLocation = document.getElementById('YAxisLabelLocation') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcCategoryChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.countryRenewableElectricity;
            chart.legend = this.legend;
        }
        this._bind();
    }

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

}

new Sample();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options vertical">
        <igc-property-editor-panel

        description-type="CategoryChart"
        is-horizontal="true"
        is-wrapping-enabled="false"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="YAxisLabelLocation"
            name="YAxisLabelLocation"
            id="YAxisLabelLocation"
            label="Y Axis - Label Location"
            primitive-value="OutsideRight">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Renewable Electricity Generated
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-category-chart
        name="chart"
        id="chart"
        computed-plot-area-margin-mode="Series"
        included-properties="year, europe, china, america"
        chart-type="Line"
        y-axis-title="Labels Location"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false"
        x-axis-interval="1"
        y-axis-label-location="OutsideRight">
        </igc-category-chart>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssコピー

Edit in: Codesandbox

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Escenarios avanzados de Axis

Para escenarios de diseño de ejes más avanzados, puede utilizar Web Components Gráfico de datos para compartir ejes, agregar varios ejes Y y/o X en la misma área de trazado, o incluso cruzar ejes en valores específicos. En los siguientes ejemplos se muestra cómo utilizar estas características de la IgcDataChartComponent.

Ejemplo de eje compartido

Puede compartir y agregar varios ejes en la misma área de trazado del Web Components IgcDataChartComponent. Es un escenario común usar compartir IgcTimeXAxisComponent y agregar múltiplos IgcNumericYAxisComponent para trazar muchas fuentes de datos que tienen una amplia gama de valores (por ejemplo, precios de acciones y volúmenes de comercio 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

TS

HTML

CSS

export class SharedAxisFinancialData {

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

        if (items === undefined) {
            items = 400;
        }

        const today = new Date();
        const end = new Date(today.getFullYear(), today.getMonth(), today.getDay());
        let time = this.addDays(end, -items);

        const data: any[] = [];
        for (let i = 0; i < items; i++) {
            const date = time.toDateString();
            const label = this.getShortDate(time, false);
            // adding new data item
            data.push({"Time": time, "Date": date, "Label": label, "Close": c, "Open": o, "High": h, "Low": l, "Volume": v});
            // generating new values
            const mod = Math.random() - 0.49;
            o = Math.round(o + (mod * 20));
            o = Math.max(o, 500);
            o = Math.min(o, 675);

            v = Math.round(v + (mod * 500));
            h = Math.round(o + (Math.random() * 5));
            l = Math.round(o - (Math.random() * 5));
            c = Math.round(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 getShortDate(dt: Date, showYear: boolean): string {
        const months = [
            "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
        ];
        const ind = dt.getMonth();
        const day = dt.getDay() + 1;
        let label = months[ind] + " " + day;
        if (showYear) {
            label += " " +  dt.getFullYear();
        }
        return label;
    }
}
tsコピー

// data chart's modules:
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartCategoryModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
// series' modules:
import { IgcFinancialPriceSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcColumnSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { SharedAxisFinancialData } from './SharedAxisFinancialData';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcFinancialPriceSeriesModule,
    IgcNumberAbbreviatorModule,
    IgcColumnSeriesModule
);

export class DataChartAxisSharing {

    private chart: IgcDataChartComponent;

    constructor() {

        this.chart = document.getElementById('chart') as IgcDataChartComponent;
        this.chart.dataSource = this.getData();
    }

    getData(): any[] {
        const data = SharedAxisFinancialData.create();
        return data;
    }
}

new DataChartAxisSharing();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartAxisSharing</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-data-chart id="chart" width="100%" height="100%"
    is-horizontal-zoom-enabled="true"
    is-vertical-zoom-enabled="true">
        <igc-category-x-axis name="xAxisShared" label="Label"></igc-category-x-axis>
        <igc-numeric-y-axis  name="yAxisRight" label-location="OutsideRight"
        minimum-value="400" title="Stock Price ($)"
        maximum-value="700">
        </igc-numeric-y-axis>

        <igc-numeric-y-axis name="yAxisLeft" label-location="OutsideLeft"
        minimum-value="5000" title="Trade Volume"
        maximum-value="45000"
        major-stroke-thickness="0"
        abbreviate-large-numbers="true">
        </igc-numeric-y-axis>

        <igc-column-series
        name="volumeSeries"
        x-axis-name="xAxisShared"
        y-axis-name="yAxisLeft"
        value-member-path="Volume">
        </igc-column-series>

        <igc-financial-price-series
        name="stockSeries"
        x-axis-name="xAxisShared"
        y-axis-name="yAxisRight"
        display-type="Candlestick"
        high-member-path="High"
        low-member-path="Low"
        close-member-path="Close"
        open-member-path="Open">
        </igc-financial-price-series>
    </igc-data-chart>
</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Ejemplo de cruce de ejes

Además de colocar los ejes fuera del área de la gráfica, la Web Components IgcDataChartComponent también proporciona opciones para colocar los ejes dentro del área de la gráfica y hacer que se crucen en valores específicos. Por ejemplo, puede crear un gráfico trigonométrico estableciendo crossingAxis y crossingValue propiedades en los ejes x e y para representar las líneas de eje y las etiquetas de eje 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

TS

HTML

CSS

// data chart's modules:
import { IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule,
         IgcDataChartComponent, IgcLegendComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartInteractivityModule,
);

export class DataChartAxisCrossing {

    private chart: IgcDataChartComponent;
    private xAxis: IgcNumericXAxisComponent;
    private yAxis: IgcNumericYAxisComponent;
    private xAxisCrossLabel: HTMLLabelElement;
    private yAxisCrossLabel: HTMLLabelElement;

    private data: any[] = [];

    constructor() {
        this.onXAxisSliderChanged = this.onXAxisSliderChanged.bind(this);
        this.onYAxisSliderChanged = this.onYAxisSliderChanged.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcDataChartComponent;

        this.xAxis = document.getElementById("xAxis") as IgcNumericXAxisComponent;
        this.yAxis = document.getElementById("yAxis") as IgcNumericYAxisComponent;

        this.xAxis.crossingAxis = this.yAxis;
        this.yAxis.crossingAxis = this.xAxis;

        this.xAxisCrossLabel = document.getElementById("xAxisCrossLabel") as HTMLLabelElement;
        this.yAxisCrossLabel = document.getElementById("yAxisCrossLabel") as HTMLLabelElement;

        const xAxisSlider = document.getElementById("xAxisCrossingSlider") as HTMLInputElement;
        xAxisSlider.addEventListener("input", this.onXAxisSliderChanged);

        const yAxisSlider = document.getElementById("yAxisCrossingSlider") as HTMLInputElement;
        yAxisSlider.addEventListener("input", this.onYAxisSliderChanged);

        this.chart.dataSource = this.data;
    }

    public initData() {

        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.data.push({ X: i, sinValue: sin, cosValue: cos });
        }
    }

    public onXAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.yAxis.crossingValue = value;
        this.xAxisCrossLabel.textContent = value;
    }

    public onYAxisSliderChanged(e: any) {
        const value = e.target.value;
        this.xAxis.crossingValue = value;
        this.yAxisCrossLabel.textContent = value;
    }
}

new DataChartAxisCrossing();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartAxisCrossing</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="options horizontal">
      <label class="option-label">X-Axis Crossing Value: </label>
      <label class="options-value" id="xAxisCrossLabel">0</label>
      <input class="options-slider" id="xAxisCrossingSlider" type="range" min="-360" max="360" step="10" value="0"/>
      <label class="option-label">Y-Axis Crossing Value: </label>
      <label class="options-value" id="yAxisCrossLabel">0</label>
      <input class="options-slider" id="yAxisCrossingSlider" type="range" min="-1.25" max="1.25" step="0.125" value="0"/>
    </div>

    <div class="container"  style="height: calc(100% - 3rem)">
        <igc-data-chart id="chart" width="100%" height="100%" is-horizontal-zoom-enabled="true"
                        is-vertical-zoom-enabled="true" plot-area-margin-bottom="60" plot-area-margin-top="60"
                        plot-area-margin-left="30" plot-area-margin-right="30">
            <igc-numeric-x-axis id="xAxis" name="xAxis" interval="40" minimum-value="-360" maximum-value="360"
                                label-location="InsideBottom" label-top-margin="10" crossing-axis-name="yAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-x-axis>
            <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="-1.25" maximum-value="1.25" interval="0.25"
                                label-location="InsideLeft" label-right-margin="10" crossing-axis-name="xAxis"
                                crossing-value="0" stroke-thickness="1" stroke="Black">
            </igc-numeric-y-axis>

            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="sinValue"></igc-scatter-spline-series>
            <igc-scatter-spline-series x-axis-name="xAxis" y-axis-name="yAxis" marker-type="Circle" x-member-path="X" y-member-path="cosValue"></igc-scatter-spline-series>
        </igc-data-chart>
    <div>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>htmlコピー

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssコピー

Edit in: Codesandbox

Recursos adicionales

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

Referencias de API

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

IgcDataChartComponent	IgcCategoryChartComponent
Axes ➔ IgcNumericYAxisComponent ➔ crossingAxis	Ninguno
Axes ➔ IgcNumericYAxisComponent ➔ crossingValue	Ninguno
Axes ➔ IgcNumericXAxisComponent ➔ isInverted	xAxisInverted
Axes ➔ IgcNumericYAxisComponent ➔ isInverted	yAxisInverted
Axes ➔ IgcNumericYAxisComponent ➔ LabelLocation	yAxisLabelLocation
Axes ➔ IgcNumericXAxisComponent ➔ LabelLocation	xAxisLabelLocation
Axes ➔ IgcNumericYAxisComponent ➔ LabelHorizontalAlignment	yAxisLabelHorizontalAlignment
Axes ➔ IgcNumericXAxisComponent ➔ LabelVerticalAlignment	xAxisLabelVerticalAlignment
Axes ➔ IgcNumericYAxisComponent ➔ LabelVisibility	yAxisLabelVisibility
Axes ➔ IgcNumericXAxisComponent ➔ LabelVisibility	xAxisLabelVisibility